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.

Answer 1

Here is a very simple method. There are a different ways to do it, like you can get it by Expanded, Sizedbox or Container and it should be used according to needs.

1. Use Expanded : A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

   Expanded(
       child: ListView(scrollDirection: Axis.horizontal,
           children: <Widget>[
             OutlineButton(onPressed: null,
                 child: Text("Facebook")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Google")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Twitter"))
           ]),
     ),
   

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column).

2. Use SizedBox : A box with a specified size.

   SizedBox(
       height: 100,
       child: ListView(scrollDirection: Axis.horizontal,
           children: <Widget>[
             OutlineButton(
                 color: Colors.white,
                 onPressed: null,
                 child: Text("Amazon")
             ),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Instagram")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("SoundCloud"))
           ]),
    ),
   

If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent).

3. Use Container : A convenience widget that combines common painting, positioning, and sizing widgets.

    Container(
       height: 80.0,
       child: ListView(scrollDirection: Axis.horizontal,
           children: <Widget>[
             OutlineButton(onPressed: null,
                 child: Text("Shopify")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("Yahoo")),
             Padding(padding: EdgeInsets.all(5.00)),
             OutlineButton(onPressed: null,
                 child: Text("LinkedIn"))
           ]),
     ),
   

The output to all three would be something like this

Answer 2

Actually, when you read docs the ListView should be inside Expanded Widget so it can work.

  Widget build(BuildContext context) {
return Scaffold(
    body: Column(
  children: <Widget>[
    Align(
      child: PayableWidget(),
    ),
    Expanded(
      child: _myListView(context),
    )
  ],
));

}

Answer 3

You can use Flex and Flexible widgets. for example:

Flex(
direction: Axis.vertical,
children: <Widget>[
    ... other widgets ...
    Flexible(
        flex: 1,
        child: ListView.builder(
        itemCount: ...,
        itemBuilder: (context, index) {
            ...
        },
        ),
    ),
],

);

Answer 4

Try using Slivers:

Container(
    child: CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 1"),
              HeaderWidget("Header 2"),
              HeaderWidget("Header 3"),
              HeaderWidget("Header 4"),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
              BodyWidget(Colors.green),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.green),
              BodyWidget(Colors.yellow),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
      ],
    ),
  ),
)

Answer 5

I have SingleChildScrollView as a parent, and one Column Widget and then List View Widget as last child.

Adding these properties in List View Worked for me.

  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  scrollDirection: Axis.vertical,

Answer 6

return new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("Login / Signup"),
      ),
      body: new Container(
        child: new Center(
          child: ListView(
          //mainAxisAlignment: MainAxisAlignment.center,
          scrollDirection: Axis.vertical,
            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),
      ),
    ),
  );