How to Create Horizontally Scrollable ListView in Flutter?

Flutter ListView – Scroll Horizontally

To scroll a Flutter ListView widget horizontally, set scrollDirection property of the ListView widget to Axis.horizontal. This arranges the items side by side horzontally.

Following is the basic syntax to arrange the items horizontally in a ListView and scroll them horizontally.

ListView(
	scrollDirection: Axis.horizontal,
	children: <Widget>[
		//your widget items here
	],
),

Example Flutter Application with Horizontally Scrollable ListView

Create a new Flutter project and copy the contents of this main.dart file into your project.

In the ListView, we have added four Container widgets as items. You may add any number of widgets as items as ListView children.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ListView - googleflutter.com'),
        ),
        body: Container(
          height: 100,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 200,
                color: Colors.purple[600],
                child: const Center(child: Text('Item 1', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
              Container(
                width: 200,
                color: Colors.purple[500],
                child: const Center(child: Text('Item 2', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
              Container(
                width: 200,
                color: Colors.purple[400],
                child: const Center(child: Text('Item 3', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
              Container(
                width: 200,
                color: Colors.purple[300],
                child: const Center(child: Text('Item 4', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

We have run this application on an Android Emulator. The result would be as shown in the following screenshot.

Flutter ListView - Scroll Horizontally

You can scroll the list horizontally.

Summary

In this Flutter Tutorial, we learned how to create a ListView widget to scroll horizontally in Flutter Application.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.