Horizontal List in Flutter

A horizontal list is a common UI pattern in mobile applications, and Flutter provides several widgets for implementing it. In this blog post, we will explore how to use the ListView widget to create a horizontal list in our Flutter applications.

Creating a Horizontal List with ListView

To create a horizontal list using the ListView widget, we need to set the scrollDirection property to Axis.horizontal.

Here's an example of  ListView

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final List<String> items = [    'Item 1',    'Item 2',    'Item 3',    'Item 4',    'Item 5',    'Item 6',    'Item 7',    'Item 8',    'Item 9',    'Item 10',  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              margin: EdgeInsets.all(10),
              width: 150,
              height: 150,
              color: Colors.blueGrey,
              child: Center(
                child: Text(
                  items[index],
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
​

In this example, we define a list of items and use the ListView.builder widget to create a horizontal list. We set the scrollDirection property to Axis.horizontal and use the itemCount property to specify the number of items in the list. We also define a builder function that returns a Container widget for each item in the list. The Container widget defines the size and style of each item.