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.
dart
ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160, color: Colors.red),
Container(width: 160, color: Colors.blue),
Container(width: 160, color: Colors.green),
Container(width: 160, color: Colors.yellow),
Container(width: 160, color: Colors.orange),
],
),
Interactive example
#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: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160, color: Colors.red),
Container(width: 160, color: Colors.blue),
Container(width: 160, color: Colors.green),
Container(width: 160, color: Colors.yellow),
Container(width: 160, color: Colors.orange),
],
),
),
),
);
}
}
Was this page's content helpful?
Thank you for your feedback!
Provide details Thank you for your feedback! Please let us know what we can do to improve.
Provide details Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-02-12. View source or report an issue.