Create a horizontal list
You might want to create a list that scrolls
horizontally rather than vertically.
The ListView
widget supports horizontal lists.
Use the standard ListView constructor, passing in a horizontal
scrollDirection, which overrides the default vertical direction.
ListView(
scrollDirection: Axis.horizontal,
children: [
for (final color in Colors.primaries)
Container(width: 160, color: color),
],
),
Interactive example
#import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Horizontal list';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Container(
margin: const EdgeInsets.symmetric(vertical: 20),
height: 200,
child: ScrollConfiguration(
// Add a custom scroll behavior that
// allows all devices to drag the list.
behavior: const MaterialScrollBehavior().copyWith(
dragDevices: {...PointerDeviceKind.values},
),
child: ListView(
scrollDirection: Axis.horizontal,
children: [
for (final color in Colors.primaries)
Container(width: 160, color: color),
],
),
),
),
),
);
}
}
Unless stated otherwise, the documentation on this site reflects Flutter 3.35.5. Page last updated on 2025-10-28. View source or report an issue.