Search code examples
androiddartflutterflutter-layout

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


Solution

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