As @Claudia Provoste mentioned, using a `SingleChildScrollView` is a great approach. Wrapping the `Container` inside a `ConstrainedBox` with `maxHeight: MediaQuery.of(context).size.height` is necessary to ensure that the content respects the height constraints of the device's screen, especially when using a `SingleChildScrollView`.
Code:
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: _onWillPop,
child: Scaffold(
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
ColorConstant.bluegray200,
ColorConstant.pink100,
],
),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 60),
child: Image.asset('assets/images/Icon.png'),
),
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
'¡Bienvenido(a)!',
style: TextStyle(
color: Colors.white,
fontSize: 35,
fontFamily: 'Jost',
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 30),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: TextField(
controller: _emailController,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Email',
),
),
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: TextField(
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Contraseña',
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: InkWell(
child: Container(
height: 50,
width: 150,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 3,
blurRadius: 7,
offset: const Offset(0, 5),
)
],
),
child: const Center(
child: Text(
'Ingresar',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Jost',
fontWeight: FontWeight.w400,
),
),
),
),
onTap: () {
login(context);
},
),
),
const Spacer(),
Align(
alignment: Alignment.bottomCenter,
child: Image.asset(
'assets/images/Waves.png',
width: double.infinity,
fit: BoxFit.cover,
),
)
],
),
),
),
),
),
);
}
wrap your column with singlechildscrollview
body:singleChildScrollview(Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
child: Image.asset(
'assets/images/logo.png',
alignment: Alignment.center,
height: 110,
width: 150,
),
),
)),
Expanded(
flex: 2,
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
hintText: 'Email',
prefixIcon: Icon(Icons.email_outlined)),
onSaved: (input) => _email = input,
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
hintText: 'Password',
prefixIcon: Icon(Icons.lock_outlined)),
onSaved: (input) => _password = input,
obscureText: true,
),
const SizedBox(height: 20),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lime,
minimumSize: const Size.fromHeight(50), // NEW
),
onPressed: _submit,
child: const Text(
'Sign In',
),
),
],
),
),
Column(
children: [
Text('Sign in with',
style: Theme.of(context)
.textTheme
.bodyMedium
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(
height: 12,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/google.png',
height: 25)),
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/facebook.png',
height: 25)),
Container(
width: 50,
height: 50,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
width: 2, color: Colors.grey[350]),
),
child: Image.asset(
'assets/images/social/apple.png',
height: 25)),
]),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Create a New Account?'),
TextButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => const SignupScreen()),
),
child: const Text(
'Go to Sign Up',
),
),
],
)
],
),
),
),
]),)
