Hello Guys How are you all ? hope you all are fine. In this tutorial we are going to learn How To Create horizontal ListView in Flutter.
To use ListView.builder as horizontal ListView you have to set scrollDirection property of the ListView widget to Axis.horizontal.
Sometime you might have to create a list that scrolls rather than vertically. So Here is ListView widget will help you. Use the standard ListView constructor, passing in a horizontal scrollDirection, which overrides the default vertical direction.
So Without Wasting Your Time Lets start this tutorial.
Example To Create horizontal ListView in Flutter
First Of All Create Listview.
Now Set scrollDirection to Axis. Horizontal.
That’s it. Now You Can use any children that you want in Horizontal Direction.
I am Giving my Source Code Here.
import ‘package:flutter/material.dart’;
How To Create horizontal ListView in Flutter
class ListViewHorizontal extends StatefulWidget {
@override
_ListViewHorizontalState createState() => _ListViewHorizontalState();
}
class _ListViewHorizontalState extends State<ListViewHorizontal> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Horizontal ListView"),
),
body: Center(
child: Container(
child: SizedBox(
height: 160.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
child: Center(
child: Text("Item 1"),
),
),
Container(
width: 160.0,
color: Colors.blue,
child: Center(
child: Text("Item 2"),
),
),
Container(
width: 160.0,
color: Colors.green,
child: Center(
child: Text("Item 3"),
),
),
Container(
width: 160.0,
color: Colors.yellow,
child: Center(
child: Text("Item 4"),
),
),
Container(
width: 160.0,
color: Colors.orange,
child: Center(
child: Text("Item 5"),
),
),
],
),
),
),
),
);
}
}
So Guys, Do You Like Our Article ? Please Comment below if any Queries you have. So That’s it for this article, hope you like this article. Thank you.
also read https://fluttercorner.com/how-to-create-horizontal-listview-in-flutter/
Top comments (0)