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