How to create horizontal ListView in flutter?

Hey, what’s up coders. You know how to create vertical ListView in flutter. And now you want to learn how to create a horizontal ListView in flutter. In this post, we will learn about creating a horizontal ListView in flutter. And It’s really too easy. You just have to pass one parameter to the ListView. So, without further ado, let’s see what that parameter is.

To create a horizontal ListView in flutter we pass the scrollDirection parameter to it. Let’s see an example.

Example –

class MyListView extends StatelessWidget
{

  final List<String> listItems = <String>['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];
  final List<int> colorCodes = <int>[600, 500, 400 ,300 ,100];
  @override
  Widget build(BuildContext build)
  {
    return Container(
      height: 200,
      child:  ListView.builder(
        //Pass the scrollDirection parameter to the ListView
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(8),
          itemCount: listItems.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              width: 160,
              margin: EdgeInsets.all(8.0),
              color: Colors.pink[colorCodes[index]],
              child: Center(child: Text(listItems[index])),
            );
          }
      )
    );


  }
}

(Full code – Click here)

You can see in the above code that I have set the scrollDirection parameter to Axis.horizontal. By default it is vertical but, when you pass Axis.horizontal, it overrides the default vertical direction.

Output :

So, that’s all for this post.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: