我想把‘请登录以继续’和‘用户名’之间的间距设置为相对于父高度的文本字段.到目前为止,它被固定在100.如何在Flutter 翼中做到这一点?我已try 在具有heightFactor的父列视图上使用FractionalSizedBox,但当键盘出现时,父列内的子级溢出父视图.
以下是代码->;
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:reflux_tracker/constants/app_color.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State<StatefulWidget> createState() {
return _LoginScreenState();
}
}
class _LoginScreenState extends State<LoginScreen> {
// Properties
String username = "";
String password = "";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Hello There",
style: GoogleFonts.lato(
color: AppColors.primaryColor, fontSize: 34)),
const Text(
"Please sign in to continue.",
style: TextStyle(
fontFamily: "RobotoSlab-Light",
fontSize: 18,
color:
AppColors.textColor, // Adjust the color as needed
),
),
],
),
Container(height: 100,),
Column(
children: [
// Username
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: const InputDecoration(
labelText: "Username",
labelStyle: TextStyle(
fontFamily: "RobotoSlab-Light",
fontSize: 18,
color: AppColors.textColor,
),
),
onChanged: (value) {
setState(() {
username = value;
});
},
),
],
),
// Password
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
obscureText: true,
decoration: const InputDecoration(
labelText: "Password",
labelStyle: TextStyle(
fontFamily: "RobotoSlab-Light",
fontSize: 18,
color: AppColors.textColor,
),
),
onChanged: (value) {
setState(() {
password = value;
});
},
),
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
// Handle forgot password logic
},
child: const Text(
"Forgot Password?",
style: TextStyle(
fontFamily: "RobotoSlab-Light",
fontSize: 14,
color: AppColors.textColor,
),
),
),
],
),
const SizedBox(height: 16),
// Button
GestureDetector(
onTap: () {
// Handle login logic
},
child: Container(
width: 60,
height: 60,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color:
AppColors.primaryColor, // Adjust the color as needed
),
child: const Icon(
Icons.arrow_right,
size: 40,
color: AppColors.backgroundColor,
),
),
),
const SizedBox(height: 35),
// Sign Up
TextButton(
onPressed: () {
// Handle sign up logic
},
child: const Text(
"Sign up, if you’re new!",
style: TextStyle(
fontFamily: "RobotoSlab-Light",
fontSize: 18,
color: AppColors.textColor,
),
),
),
const SizedBox(height: 30),
],
)),
),
);
}
}