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:
Also, the assets dependency needs to be stated in the pubspec.yaml file as shown below:
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:
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:
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:
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:
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: