How to Create Horizontal ListView in Flutter

In this example, we are going to show you how to create a Horizontal scroll view or List view in Flutter App. We will set Scroll direction to Horizontal on ListView or SingleChildScrollView() widgets to make a Horizontal scroll view. See the example below:

ListView(
  scrollDirection: Axis.horizontal,
  children:[]
)

By default, the scroll direction of ListView is vertical, you can use scrollDirection property to change scroll direction to Horizontal. You have to pass Axis value on this property.

Now, we will use this property to make Horizontal ListView:

List<String> countries = ["Brazil", "Nepal", "India", "China", "USA", "Canada"];

ListView(
  scrollDirection: Axis.horizontal,
  children: countries.map((country){
        return Container(
           color: Colors.orangeAccent,
           height: 100, width:150,
           alignment: Alignment.center
           child: Text(country)
        );
  }).toList(),
)

Here, we have made the list of Countries on ListView and set the scroll direction to Horizontal. We can achieve this feature using SingleChildScrollView() and Row() widgets as well.

List<String> countries = ["Brazil", "Nepal", "India", "China", "USA", "Canada"];

SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child:Row(
    children: countries.map((country){
        return Container(
           color: Colors.orangeAccent,
           height: 100, width:150,
           alignment: Alignment.center
           child: Text(country)
        );
    }).toList(),
  )
)

Here, we have wrapped infinite Row() with SingleChildScrollView() to add scrolling on overflowed Row width. And we have changed the scroll direction to Horizontal.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<String> countries = ["Brazil", "Nepal", "India", "China", "USA", "Canada"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Horizonatl ListView"),
            backgroundColor: Colors.redAccent,
         ),

         body: Container(
                padding: EdgeInsets.all(20),
                child: Column( 
                  children: [

                      Container(
                        height: 100,
                        child:ListView(
                          scrollDirection: Axis.horizontal,
                          children: countries.map((country){
                               return box(country, Colors.deepPurpleAccent);
                          }).toList(),
                        )
                      ),

                      Container(
                        height: 100,
                        child:SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child:Row(
                            children: countries.map((country){
                                return box(country, Colors.deepOrangeAccent);
                            }).toList(),
                          )
                        )
                      )
   
                  ],
                ) 
            )   
          
    );
  } 

  Widget box(String title, Color backgroundcolor){
     return Container(
        margin: EdgeInsets.all(10),
        width: 80,
        color: backgroundcolor,
        alignment: Alignment.center,
        child: Text(title, style:TextStyle(
                     color: Colors.white,
                     fontSize: 20))
     );
  }
}

In this example, we have made two Scroll Views, one is using ListView() and one is using SingleChildScrollView(). Both have scroll direction to the Horizontal axis.