How to create a horizontally scrollable ListView in Flutter
Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms.
The ListView class
The ListView class in Flutter is commonly used to display a scrollable list of items. It is a flexible widget that provides a way to present various data in a scrollable format. The list can be displayed in both horizontal and vertical format.
Create a horizontal ListView in Flutter
Follow the steps below to create a horizontal ListView in the Flutter application:
1: Create a Flutter project
Let’s create a new Flutter project. For this, open the terminal and execute the following commands:
flutter create horizontallistcd horizontallist
2: Create the user interface
Next, we’ll create a list of Flutter widgets using the ListView widget. To display the list of items in horizontally, we set the scrollDirection property of ListView to Axis.horizontal. The code is as follows:
ListView(scrollDirection: Axis.horizontal,children: <Widget>[// Add your horizontally scrollable items here],)
3: Add content
Inside the children property of the ListView, we can add any widgets we want to be horizontally scrollable. For instance, we can add Container, Card, or custom widgets. Here’s an example with a simple Container widgets:
ListView(scrollDirection: Axis.horizontal,children: <Widget>[Container(width: 200,color: Colors.blue,),Container(width: 200,color: Colors.red,),Container(width: 200,color: Colors.green,),Container(width: 200,color: Colors.blue,),Container(width: 200,color: Colors.red,),],)
Complete implementation
The following example shows the complete implementation of the horizontal ListView in the Flutter application.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}Note: You can find your application running at the given link once you run the code widget above.
Explanation
Lines 43–67: We have created a
ListViewthat displays the elements on the screen.Line 44: We have set the direction of the list to horizontal.
Lines 46–85: We have provided the widgets that are displayed in the list.
Free Resources