Centering ListView in Flutter

Question

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

Eadie

maybe shrinkWrap: true, can help – Devotional

Answer 1

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?', () => {})
            ],
          ),
        ),)
    );
  }

Tjirebon

Answer 2

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:

Grenadines

Answer 3

• Use shrinkWrap: true in ListView.

 child: ListView(
      shrinkWrap: true,
      ......
    ),

Stoned

Answer 4

Use CustomScrollView and SliverFillRemaining instead of using ListView.

Scaffold(
  appBar: AppBar(),
  body: CustomScrollView(
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Center(
          child: new Text('ABC')
        ),
      ),
    ]
  )
);

Axinomancy