Open In App

Flutter – Horizontal List

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

Constructor of ListView used here:

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}
)

Key Propertied Of ListView Widget:

  • 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:

assets

Also, the assets dependency needs to be stated in the pubspec.yaml file as shown below:

pubspec.yaml file

Now let’s look into them in detail.

Creating a statelessWidget:

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()


 
 

Adding the scaffold widget:

 

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),
        )


 
 

Creating ListView with containers:

 

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:

 

 



Last Updated : 30 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads