After wrapping my Column widget with SingleChildScrollView widget, my screen got cut like this:
I could not find fill max height or something as a parameter for the SingleChildScrolledView. The reason for adding the SingleChild is because when I open tap on the TextField widget and the keyboard pops up, the last TextField says it's 'overflowed' and as a solution, I found that TextField should be added. Thanks in advance :)
class _RegisterScreenState extends State<RegisterScreen> {
// TextFields controllers
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
width: double.infinity,
color: const Color(0xFF26243C),
child: SingleChildScrollView(
reverse: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 72),
const Text("Get Started",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Chalet',
fontSize: 48,
fontWeight: FontWeight.w100,
color: Color(0xFFDF862D),
height: 1.0
),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('Already have an account?',
textAlign: TextAlign.center,
style: TextStyle(color: Color(0xFFF6F9F8))),
TextButton(
onPressed: () {
// take you to login page
Navigator.push(context, MaterialPageRoute(builder: (context) => const RegisterScreen()));
},
child: const Text(
'Sign In!',
style: TextStyle(
color: Color(0xFFF6F9F8), fontWeight: FontWeight.bold)
))
],
),
const SizedBox(height: 65),
const Text("Your e-mail",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// email textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _emailController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Enter your e-mail',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
const SizedBox(height: 12),
const Text("Your password",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// password textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _passwordController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Enter your password',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
const SizedBox(height: 12),
const Text("Confirm your password",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// confirm password textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _confirmPasswordController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Confirm your password',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
],
),
),
),
);
}
}
after adding BoxConstrains.expand() to my Container constraints, this happened:
Scaffold(
body: Container(
// ...
constraints: BoxConstraints.expand(), // Added this
child: SingleChildScrollView(
// ...
),
),
)
The Container
that wraps the SingleChildScrollView
is constrained to match its child's requested height. To make the Container
with its child expand to the body of Scaffold
, use constraints: BoxConstraints.expand()
.
Scaffold(
body: Container(
// ...
constraints: BoxConstraints.expand(), // Add this constraint
child: SingleChildScrollView(
// ...
),
),
)
See also: Understanding constraints
EDIT: You also have reverse: true
set, which reverses the scroll direction and cause the remaining space to fill up on the top. Remove that line.