I want to make the spacing between ‘Please sign in to continue’ and ‘Username’ text field relative to the parent height. As of now it’s fixed to 100. How to achieve this in flutter? Have tried using FractionalSizedBox on the Parent Column view with heightFactor but when keyboard appears, child inside the parent column overflows the parent view.
Here is the code ->
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),
],
)),
),
);
}
}





