How to add a ListView to a Column in Flutter

0 votes

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),
          ),
        ),
      );

Mar 6, 2023 in Android by Tejashwini
• 780 points
15,121 views

1 answer to this question.

0 votes

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.

answered Mar 9, 2023 by pooja

Related Questions In Android

0 votes
0 answers

How to define a circle shape in an Android XML drawable file?

I'm having some trouble locating the Android ...READ MORE

Nov 22, 2022 in Android by Edureka
• 12,690 points
2,289 views
0 votes
0 answers

How to put a <vector> in a <shape> in Android?

I'm trying to make customizable icons in ...READ MORE

Dec 8, 2022 in Android by Edureka
• 12,690 points
870 views
0 votes
1 answer

How to change package name in flutter?

Yes, you can change the package name ...READ MORE

answered Mar 1, 2023 in Android by vishalini
3,179 views
0 votes
1 answer

How to create number input field in Flutter?

Yes, Flutter has a built-in widget called ...READ MORE

answered Mar 1, 2023 in Android by vishalini
7,881 views
0 votes
1 answer

How to deal with unwanted widget build?

There are a few strategies that you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
3,107 views
0 votes
1 answer

How can I add a border to a widget in Flutter?

To add a border to a widget ...READ MORE

answered Mar 1, 2023 in Android by vishalini
11,280 views
0 votes
1 answer

setState() or markNeedsBuild called during build

The first error occurs because the ListView.builder ...READ MORE

answered Mar 10, 2023 in Android by vinayak
4,588 views
0 votes
1 answer

Adding a splash screen to Flutter apps

To add a splash screen to your ...READ MORE

answered Mar 18, 2023 in Android by anonymous
986 views
0 votes
1 answer

How do I disable a Button in Flutter?

To disable a button in Flutter, you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
14,524 views
0 votes
1 answer

How to run code after some delay in Flutter?

You can use the Future.delayed method to ...READ MORE

answered Mar 10, 2023 in Android by vinayak
879 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP