I am trying to make a login / registration screens with a logo. I need them responsive, so the can fit most of mobile screens. For achieving that, I've used ListView. However, I just need to center the ListView inside my layout. Any suggestions?
Here is my attempt:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ListView(
children: <Widget>[
Image.asset('assets/images/logo.png', scale: 3.0,),
InputField('enter email address', Icons.email, TextInputType.emailAddress),
PasswordInputField('enter password', Icons.lock, TextInputType.text),
RoundBtn('SIGN IN', signIn),
RoundBtn('SIGN UP', () => {}),
OutlineBtn('FORGOT PASSWORD?', () => {})
],
),
)
);
}
Login Screen Registration Screen
The solution is to place a Container as the only children in the ListView , and give it a minimum height equal to the available space for the height (Use LayoutBuilder to measure the maximum height for the widget). Then as the Container 's child, you can either place a Center or Column (with MainAxisAlignment.
In Flutter, to vertically center a child widget inside a Container, you can wrap the child widget with Column and add mainAxisAlignment: MainAxisAlignment. center to it.
Shrink wrapping the content of the scroll view is significantly more expensive than expanding to the maximum allowed size because the content can expand and contract during scrolling, which means the size of the scroll view needs to be recomputed whenever the scroll position changes.
To set the alignment of a widget in Flutter, you can wrap it as the child of an Align widget and pass the alignment argument to adjust the position. The widthFactor and heightFactor arguments can be passed as well to set the width and the height relative to the child's width and height respectively.
Use SingleChildScrollView instead of ListView. Try this...
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Image.asset('assets/images/logo.png', scale: 3.0,),
InputField('enter email address', Icons.email, TextInputType.emailAddress),
PasswordInputField('enter password', Icons.lock, TextInputType.text),
RoundBtn('SIGN IN', signIn),
RoundBtn('SIGN UP', () => {}),
OutlineBtn('FORGOT PASSWORD?', () => {})
],
),
),)
);
}
ListView cannot be added to the center of the screen. Still, no official documentation is there. But still, if you want to do
Example:
Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Center(child: Text('Text1')),
Center(child: Text('Text2')),
Center(child: Text('Text3')),
],
),
)
Output:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With