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’;

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, 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

• [Solved] type ‘int’ is not a subtype of type ‘String’ error in Dart
• [Solved] RenderFlex children have non-zero flex but incoming height constraints are unbounded
• [Solved] type List is not a subtype of type List
• [Solved] Flutter Error: Vertical viewport was given unbounded height
• [solved] Flutter Error: RangeError (index): Invalid value: Not in range 0..2, inclusive: 3