Flutter – Horizontal List

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

filter_none

edit
close

play_arrow

link
brightness_4
code

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp()

chevron_right


 
 

Adding the scaffold widget:

 

To add a scaffold widget inside the statelessWidget use the below technique:

 



Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksForGeeks';
 
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        )

chevron_right


 
 

Creating ListView with containers:

 

A simple ListView with containers can be created as follows:

 

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 
 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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,
                ),
              ),
            ],
 
          ),
        ),
      ),
    );
  }
}

chevron_right


 
 

Output:

 

 




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.