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: [
             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: [
             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: [
             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