How to add a ListView to a Column in Flutter

Question

I'm trying to construct a simple login page for my Flutter app. I've successfully built the TextFields and log in/Sign in buttons. I want to add a horizontal ListView. When I run the code my elements disappear, if I do it without the ListView, it's fine again. How can I do this correctly?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

Answer 1

To add a ListView to a Column in Flutter, you need to wrap the ListView widget with an Expanded widget so that it can take up the remaining available space within the Column. This is because the Column widget will take up all the available space by default and you need to inform it that there is another widget that needs space.

Here's an updated code snippet:

return new MaterialApp(
  home: new Scaffold(
    appBar: new AppBar(
      title: new Text("Login / Signup"),
    ),
    body: new Container(
      child: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TextField(
              decoration: new InputDecoration(
                hintText: "E M A I L    A D D R E S S"
              ),
            ),
            new Padding(padding: new EdgeInsets.all(15.00)),
            new TextField(
              obscureText: true,
              decoration: new InputDecoration(
                hintText: "P A S S W O R D"
              ),
            ),
            new Padding(padding: new EdgeInsets.all(15.00)),
            new TextField(
              decoration: new InputDecoration(
                hintText: "U S E R N A M E"
              ),
            ),
            new RaisedButton(
              onPressed: null,
              child: new Text("SIGNUP"),
            ),
            new Padding(padding: new EdgeInsets.all(15.00)),
            new RaisedButton(
              onPressed: null,
              child: new Text("LOGIN"),
            ),
            new Expanded(
              child: new ListView(
                scrollDirection: Axis.horizontal,
                children: <Widget>[
                  new RaisedButton(
                    onPressed: null,
                    child: new Text("Facebook"),
                  ),
                  new Padding(padding: new EdgeInsets.all(5.00)),
                  new RaisedButton(
                    onPressed: null,
                    child: new Text("Google"),
                  )
                ],
              ),
            )
          ],
        ),
      ),
      margin: new EdgeInsets.all(15.00),
    ),
  ),
);

As you can see, the ListView widget is now wrapped with an Expanded widget, which allows it to take up the remaining available space within the Column widget. This will prevent the elements from disappearing when you run the code.

To know more about Flutter, join our Best Flutter Course today.