How to set the size of Text field Button - flutter

Question

I am building a Flutter application where I am trying to build simple login UI but having problem as shown in image below. One problem is the size of the email field and the password field is different and another is login button is being overflowed by 13-pixels? Also want to set the height underscore of Forget your password. How can It be solved? Thank you in advance.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Navigation Bar',
theme: ThemeData(
primaryColor: Color(0xFFC41A3B),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _isVisible = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: const [
Colors.blue,
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 36.0,
horizontal: 24.0,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 46.0,
fontWeight: FontWeight.w800,
),
),
SizedBox(
height: 10.0,
),
Text(
'Enter to the butiful world',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontWeight: FontWeight.w300,
),
),
],
),
),
),
Expanded(
flex: 2,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xffe73ded),
hintText: "E-mail",
prefixIcon: Icon(
Icons.email,
color: Colors.grey,
),
)),
SizedBox(
height: 20.0,
),
TextField(
obscureText: _isVisible ? false :true,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
suffix: IconButton(
onPressed: () {
setState(() {
_isVisible = !_isVisible;
});
},
icon: Icon(
_isVisible ? Icons.visibility : Icons.visibility_off,
color: Colors.grey,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xffe73ded),
hintText: "Password",
prefixIcon: Icon(
Icons.lock_rounded,
color: Colors.grey,
),
)),
SizedBox(
height: 5.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: Text(
'Forgot your password',
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
),
],
),
SizedBox(
height: 20.0,
),
Container(
color: Colors.blue,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28),
),
),
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0),
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
),
),
SizedBox( height: 2,),
RichText(
text: TextSpan(
text: 'Do you have an account?',
style: TextStyle(
color: Colors.black,
fontSize: 18,
),
children: [
TextSpan(
text: 'Register',
style: TextStyle(
color: Colors.blue,
fontSize: 18,
),
recognizer: TapGestureRecognizer()
..onTap = () {}),
],
),
),
],
),
),
),
),
],
),
),
),
);
}
}

Answer 1

The issue is you created a container with max height as the device.then used expanded widgets which are equally spaced. You can try increasing the flex value of the second expanded widget
Expanded(
flex: 3
)
Now the first and second expanded will be of ratio 2:3 which will give more space to the second widget