How to create a horizontal listview in Flutter

How to create a horizontal listview in Flutter:

ListView is used to show a list of items in a scrollable element. You will find scrollable lists in most of the applications. ListView can hold a finite or infinite amount of items.

For example, if you are building a social media app, you will have an infinite set of data stored in your database. You can use a ListView to show these data in a list. User can scroll through the list and interact with any of these items.

Types of List views:

We can have two types of ListView. It can be either vertical or horizontal. The vertical list views are scrollable only in the up and down directions. The horizontal list views are scrollable in horizontal directions i.e. left and right.

We can also have a horizontal ListView inside a vertical ListView. In that case, the horizontal list view will be an item of the vertical list view.

You can also create a vertical list view inside another vertical list view or a horizontal list view inside another horizontal list view. But it is not a good idea to use two scrollable views in the same direction.

How to create a horizontal ListView in Flutter:

Flutter provides widgets to implement listview. It is called ListView. We can use this widget to create a vertical or horizontal list in Flutter.

There are different ways to create a ListView in Flutter or there are different ways to use the ListView class.

Let me show you all one by one:

Method 1: By using the ListView constructor:

The constructor of ListView widget takes a List of Widget as its children. We can use the constructor to create a list of small number of elements. It constructs all items passed as its children. So, the performance will decrease for a large number of elements.

I am using a basic Flutter project with its main.dart as the home screen.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Horizontal List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Horizontal List")),
      body: Container(
        height: 200,
        child: ListView(
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(8),
          children: <Widget>[
            Container(
              width: 300,
              color: Colors.green[500],
            ),
            Container(
              width: 300,
              color: Colors.red[500],
            ),
            Container(
              width: 300,
              color: Colors.amber[500],
            ),
          ],
        ),
      ),
    );
  }
}

We are using a Container of height 200 to show the horizontal list.
Three Container are passed as the child of the list view. We can also pass any other types of widgets here.
The ListView is changed to horizontal by using the scrollDirection flag.

It will build a horizontal scrollable listview of three items.

Method 2: By using ListView.builder:

We can also use ListView.builder constructor. It will build the items on demand. This is a better approach for an infinite list. It constructs only those elements which are currently visible on the screen. So, the performance is not impacted by the length of the list.

Below is the updated code for MyHomePage:

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);

  final List colors = [Colors.green[500], Colors.red[500], Colors.amber[500]];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Horizontal List")),
      body: Container(
        height: 200,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.all(10),
            itemCount: colors.length,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                width: 300,
                color: colors[index],
              );
            }),
      ),
    );
  }
}

It will give a similar result.

CodeVsColor