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.
DeveloperXon 
Leave a Reply