Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering ListView in Flutter

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

like image 963
Optimist GM Avatar asked Oct 23 '18 10:10

Optimist GM


People also ask

How do I center the ListView in Flutter?

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.

How do you center the container in Flutter?

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.

What is shrinkwrap Flutter?

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.

How do you align in Flutter?

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.


Video Answer


2 Answers

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?', () => {})
            ],
          ),
        ),)
    );
  }
like image 157
Sachin Soma Avatar answered Oct 11 '22 07:10

Sachin Soma


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:

enter image description here

like image 39
Jitesh Mohite Avatar answered Oct 11 '22 07:10

Jitesh Mohite