close

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. If You face Flutter Error: Vertical viewport was given unbounded height then click on this article.

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

  1. First Of All Create Listview.
  2. Now Set scrollDirection to Axis. Horizontal.
  3. That’s it. Now You Can use any children that you want in Horizontal Direction.
  4. I am Giving my Source Code Here.
  5. 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"),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
  1. How to create horizontle listview in flutter ?

    To use ListView.builder as horizontal Listview you have to set scrollDirection Property of the listView Widget to Axis.horizontal.

  2. create horizontle listview in flutter

    To use ListView.builder as horizontal Listview you have to set scrollDirection Property of the listView Widget to Axis.horizontal.

So, It’s All About This tutorial. I hope this tutorial helps you to lot. Please Comment Below if You stucks anywhere with my code. And please comment below your thought. Thank You.

Also Check Out Below Tutorials

1 thought on “How To Create horizontal ListView in Flutter”

Leave a Comment

%d bloggers like this: