How to add a ListView to a Column In Flutter ?

· 3 min read
Add ListView to Column in Flutter
Add ListView to Column in Flutter

ListView Widgets are basically used to fetch data from the Backend and display it on a mobile screen. So in this article, we are going to talk about How to add a ListView to a Column In Flutter?

What is ListView Widget in Flutter?

ListView Widget has been introduced to reduce the overload of having various layouts performing the same task.

Purpose Of ListView Widget

Most of the time, the dynamic behavior is achieved by changing the contents that are being displayed in the body. So Flutter provides ListView.Builder() constructor which can be used to generate dynamic contents from external sources.

How to add a ListView to a Column Widget In Flutter?

Users need to add a height constraint to your horizontal list. Consider a code snippet like below:

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

Reason for the error:

Column Widget expands to the maximum size in the main axis direction (vertical axis), and so does the ListView Widget.

    • Use Expanded Widget: 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"))
              ]),
        ),

 

  • 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"))
        ]),
 ),
  • Use Container: A convenience widget that combines common paintingpositioning, 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:

    ListView in a Column
    ListView in a Column

Conclusion:

In this article, we have been through How to add a ListView to a Column In Flutter.

Still, need support for Flutter? We are always there to serve you better.

Keep Fluttering !!! Keep Learning !!!

And Also, check out this article on how to Add Header Row to a ListView in Flutter

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply