Flutter - Horizontal List - GeeksforGeeks

30 Nov, 2021
In Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passing a horizontal parameter to it.
ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)
childrenDelegate: This property takes in SliverChildDelegate class as the object. It provides a children delegate for the Listview.
itemExtent: The itemExtent property takes in a double value as the object to set the extent of the scrollable area for the ListView.
In this article, we will look into the process of creating a horizontal list. For the same purpose, we will design a simple app that shows a list of images of superheroes in a horizontal direction. To do so we will need to follow the below steps:
Create a statelessWidget (say, Myapp)
Add scaffold widget to hold the containers
Add container containing the images inside a ListView constructor
It is important to note that all the images used in the application will be stored in the assets/images folder as shown below:
Also, the assets dependency needs to be stated in the pubspec.yaml file as shown below:
Now let’s look into them in detail.
To create a stateful widget that provides a base structure to the application using the below code:
Dart
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    final title = 'GeeksForGeeks';     return MaterialApp()
  
 
To add a scaffold widget inside the statelessWidget use the below technique:
 
Dart
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    final title = 'GeeksForGeeks';     return MaterialApp(      title: title,      home: Scaffold(        appBar: AppBar(          title: Text(title),        )
  
 
A simple ListView with containers can be created as follows:
 
Dart
ListView(           scrollDirection: Axis.horizontal,           children: <Widget>[             Container(               height: 480.0,               width: 240.0,               decoration: BoxDecoration(                 image: DecorationImage(                   image: AssetImage(                       'assets/images/aquaman.png'),                   fit: BoxFit.fill,                 ),                 shape: BoxShape.rectangle,               ),             ),             Container(               height: 480.0,               width: 240.0,               decoration: BoxDecoration(                 image: DecorationImage(                   image: AssetImage(                       'assets/images/greenlantern.webp'),                   fit: BoxFit.fill,                 ),                 shape: BoxShape.rectangle,               ),             ),             Container(               height: 240.0,               width: 240.0,               decoration: BoxDecoration(                 image: DecorationImage(                   image: AssetImage(                       'assets/images/batman.jpg'),                   fit: BoxFit.fill,                 ),                 shape: BoxShape.rectangle,               ),             ),             Container(               height: 480.0,               width: 240.0,               decoration: BoxDecoration(                 image: DecorationImage(                   image: AssetImage(                       'assets/images/superman.jpg'),                   fit: BoxFit.fill,                 ),                 shape: BoxShape.rectangle,               ),             ),             Container(               height: 480.0,               width: 240.0,               decoration: BoxDecoration(                 image: DecorationImage(                   image: AssetImage(                       'assets/images/wonderwomen.jpg'),                   fit: BoxFit.fill,                 ),                 shape: BoxShape.rectangle,               ),             ),           ],          ),
  
Now that we have designed all the essential components of the app, it’s time to integrate them into one complete app as follows:
 
Complete Source Code:
 
Dart
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    final title = 'GeeksForGeeks';     return MaterialApp(      title: title,      home: Scaffold(        appBar: AppBar(          title: Text(title),          backgroundColor: Colors.green,        ),        body: Container(          margin: EdgeInsets.symmetric(vertical: 20.0),          height: 550.0,          child: ListView(            scrollDirection: Axis.horizontal,            children: <Widget>[              Container(                height: 480.0,                width: 240.0,                decoration: BoxDecoration(                  image: DecorationImage(                    image: AssetImage(                        'assets/images/aquaman.png'),                    fit: BoxFit.fill,                  ),                  shape: BoxShape.rectangle,                ),              ),              Container(                height: 480.0,                width: 240.0,                decoration: BoxDecoration(                  image: DecorationImage(                    image: AssetImage(                        'assets/images/greenlantern.webp'),                    fit: BoxFit.fill,                  ),                  shape: BoxShape.rectangle,                ),              ),              Container(                height: 240.0,                width: 240.0,                decoration: BoxDecoration(                  image: DecorationImage(                    image: AssetImage(                        'assets/images/batman.jpg'),                    fit: BoxFit.fill,                  ),                  shape: BoxShape.rectangle,                ),              ),              Container(                height: 480.0,                width: 240.0,                decoration: BoxDecoration(                  image: DecorationImage(                    image: AssetImage(                        'assets/images/superman.jpg'),                    fit: BoxFit.fill,                  ),                  shape: BoxShape.rectangle,                ),              ),              Container(                height: 480.0,                width: 240.0,                decoration: BoxDecoration(                  image: DecorationImage(                    image: AssetImage(                        'assets/images/wonderwomen.jpg'),                    fit: BoxFit.fill,                  ),                  shape: BoxShape.rectangle,                ),              ),            ],           ),        ),      ),    );  }}
  
Output:
 
 
ankit_kumar_
vinitmppromail
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Listview.builder in Flutter
Flutter - DropDownButton Widget
Flutter - Asset Image
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - BoxShadow Widget
Flutter - Flexible Widget