Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction 
2.
Horizontal Lists
2.1.
ListView Constructor
2.2.
Key Properties of ListView Widgets
3.
Implementation 
4.
Frequently Asked Questions
4.1.
What is Flutter?
4.2.
What are the advantages of using Flutter?
4.3.
What are the different types of widgets in Flutter?
4.4.
What are Horizontal lists?
4.5.
Which constructor is used to create vertical as well as horizontal flutter lists?
5.
Conclusion
Last Updated: Mar 27, 2024

Flutter Horizontal List

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction 

Flutter is a cross-platform development framework used to write code and can deploy on various platforms like android, iOS, and desktop.

Let us learn how to create a horizontal list in Flutter using dart

Lists in Flutter are a popular element of mobile and web apps, consisting of multiple columns and rows. Lists can include text, buttons, icons, and many more items. 
Now we will see how we can create flutter lists and how we can work with them. In this blog we will cover a type of flutter list: the Flutter Horizontal List. At last, we will go through one example and implement the code to understand the concept better.

Horizontal Lists

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 scrollDirection that overrides the vertical direction.

ListView Constructor

ListView(
	{Key key,
	Axis scrollDirection: Axis.vertical,
	bool reverse: false,
	ScrollPhysics physics,
	double itemExtent,
	bool addAutomaticKeepAlives: true,
	bool shrinkWrap: false,
	ScrollController controller,
	bool primary,
	EdgeInsetsGeometry padding,
	bool addRepaintBoundaries: true,
	bool addSemanticIndexes: true,
	double cacheExtent,
	List<Widget> children: const <Widget>[],
	int semanticChildCount, 
	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior:ScrollViewKeyboardDismissBehavior.manual,
	DragStartBehavior dragStartBehavior: DragStartBehavior.start,
	String restorationId,
	Clip clipBehavior: Clip.hardEdge}
)

Key Properties of ListView Widgets

  • childrenDelegate
    The object of this property is SliverChildDelegate class. This class provides a children's delegate for the ListView. This delegate is specified by PageView.custom explicitly. ChildrenDelegate that wraps the given list and IndexedWidgetBuilder is created by the PageView and PageView.builder constructors.
     
  • itemExtend
    As an object, a double value is taken by the itemExtent property to set the extent of Listview's scrollable area.
     

Now we will move to the implementation of the horizontal list. Here we are making an app that shows the names of fruits in a horizontal direction.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Implementation 

You can go to the FlutLab website, where you will see something like this with the main.dart file open-

Now you can replace the ‘main.dart’ file code with the following given code-

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Coding Ninjas Flutter Horizontal List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 25.0),
          height: 300.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 150.0,
                color: Colors.orangeAccent,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      title: Text('Orange'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 150.0,
                color: Colors.blueAccent,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      title: Text('Black Berry'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 150.0,
                color: Colors.red,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      title: Text('Cherry'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 150.0,
                color: Colors.green,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      title: Text('Grapes'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 150.0,
                color: Colors.yellow,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      title: Text('Banana'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}


Now you can run the program, and the output of the above will be like this -


Frequently Asked Questions

What is Flutter?

Flutter is a cross-platform development framework used to write code and can deploy on various platforms like android, iOS, and desktop.

What are the advantages of using Flutter?

A flutter is a potent tool. Following are a few advantages of using Flutter-

  • Faster Development
  • Live and Hot Reloading
  • Good Community
  • Minimal Code
  • Documentation
  • Cross-Platform Development
  • UI Focused
  • UI Focused

What are the different types of widgets in Flutter?

We have two types of widgets in Flutter -

  • Stateless Widget

This widget does nothing. This widget is static and does not store any state or values that may change.
 

  • Stateful Widget

This widget does anything. This widget is dynamic, which means the stateful widget monitors changes and updates the UI accordingly.

What are Horizontal lists?

When we want our list to be scrolled horizontally rather than vertically, we go for Horizontal List. List view provides the horizontal scrollDirection that overrides the vertical direction.

Which constructor is used to create vertical as well as horizontal flutter lists?

We use the listView constructor and assign parameters to scrollDirection. By default, it is vertical, but we can override it by passing the horizontal parameter.

Conclusion

In this blog, we covered everything about the flutter horizontal list. After that, we went through the code and output of the flutter horizontal list and if you would like to learn more, check out our articles on Flutter Checkbox and Flutter Stateful and Stateless Widgets.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Happy Learning Ninja! 🥷

Live masterclass