DEV Community

Cover image for How To Create horizontal ListView in Flutter
FlutterCorner
FlutterCorner

Posted on

How To Create horizontal ListView in Flutter

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"),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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)