Flutter Horizontal List Tutorial Example

24-Aug-2022

.

Admin

Flutter Horizontal List Tutorial Example

Hello Friends,

Here, I will show you how to work flutter horizontal list tutorial example. it's a simple example of creating a horizontal listview in a flutter. this example will help you how to implement a horizontal listview in a flutter. I would like to show you create a horizontal listview in a flutter. follow the below step for a horizontal listview inside a vertical scroll view in a flutter.

The ListView widget supports both flutter horizontal list and vertical list. When we want our list to be scrolled horizontally rather than vertically, we go for Horizontal List. List view provides the horizontal scroll direction that overrides the vertical direction.

So, let's see the below solution with an output:

Step 1: Create Flutter Project


Follow along with the setup, you will be creating a Flutter app.

- $flutter create flutter_horizontal_image_list_example

Navigate to the project directory:

- $cd flutter_horizontal_image_list_example

Step 2: Create Asset Directory

- Create Asset Directory Like This assets/images

- Set Asset Directory in pubspec.yaml like this

# The following section is specific to Flutter.

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the material Icons class.

uses-material-design: true

assets:

- assets/images/

Step 3: Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

final title = 'Horizontal Image List Example';

return MaterialApp(

title: title,

home: Scaffold(

appBar: AppBar(

title: Text(title),

backgroundColor: Colors.blue,

),

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/1.jpg'),

fit: BoxFit.fill,

),

shape: BoxShape.rectangle,

),

),

Container(

height: 480.0,

width: 240.0,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(

'assets/images/2.webp'),

fit: BoxFit.fill,

),

shape: BoxShape.rectangle,

),

),

Container(

height: 240.0,

width: 240.0,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(

'assets/images/3.jpg'),

fit: BoxFit.fill,

),

shape: BoxShape.rectangle,

),

),

Container(

height: 480.0,

width: 240.0,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(

'assets/images/4.jpeg'),

fit: BoxFit.fill,

),

shape: BoxShape.rectangle,

),

),

Container(

height: 480.0,

width: 240.0,

decoration: BoxDecoration(

image: DecorationImage(

image: AssetImage(

'assets/images/1.jpg'),

fit: BoxFit.fill,

),

shape: BoxShape.rectangle,

),

),

],

),

),

),

);

}

}

Step 4: Run this Debug App

I hope it can help you...

#Flutter