Table of contents
1.
Introduction 
2.
Flutter Lists
3.
Basic Lists
4.
Long Lists
5.
Grid Lists
6.
Horizontal Lists
7.
Frequently Asked Questions
7.1.
What is Flutter?
7.2.
What are the advantages of using Flutter?
7.3.
What are the different types of widgets in Flutter?
7.4.
What is Dart?
7.5.
What are flutter lists?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter Lists

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

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 form in Flutter using dart. This blog will cover Flutter lists and different types of Flutter lists with running code and output. At last, we will go through one example and implement the code to understand the concept better.

Flutter Lists

Lists are a popular element of mobile and web apps and are made up 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 but before, let;'s see the types of flutter lists-

  • Basic Lists
  • Long Lists
  • Grid Lists
  • Horizontal Lists


Let us take a look at each form of flutter list thoroughly..

Basic Lists

Working with Lists, Flutter has provided one widget called ListView, the fundamental concept of displaying the data on the web or mobile apps. The lists contain only a few items; the ListView is the perfect standard for it. To provide more properties to the visual structure of the list, we have ListTitle included in ListView.

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 appTitle = 'Coding Ninjas Flutter Basic List Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
            ListTile(
              leading: Icon(Icons.contacts),
              title: Text('Contact'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Setting'),
            ),
          ],
        ),
      ),
    );
  }
}


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

Long Lists

When you want to display a very long list or contain many items on a single screen of your app, then ListView.builder() constructor is best to use.

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(
    ninjas: List<String>.generate(500, (i) => "Ninjas List: $i"),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> ninjas;

  MyApp({Key? key, required this.ninjas}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final appTitle = 'Coding Ninjas Flutter Long List';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: ListView.builder(
          itemCount: ninjas.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('${ninjas[index]}'),
            );
          },
        ),
      ),
    );
  }
}

 

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

Grid Lists

When we want to display the list items in a grid layout rather than a normal list, we use the Grid View widget provided by Flutter that allows you to create a grid list. We can easily create a grid by using the GridView.count() constructor, which will enable us to specify the number of columns and rows in a grid.

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(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({key});

  @override
  Widget build(BuildContext context) {
    const title = 'Coding Ninjas Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(100, (index) {
            return Center(
              child: Text(
                'Ninja no. $index',
                style: Theme.of(context).textTheme.headline5,
              ),
            );
          }),
        ),
      ),
    );
  }
}


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

Horizontal Lists

The ListView widget also supports a horizontal 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.

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: 150.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 150.0,
                color: Colors.orangeAccent,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.home),
                      title: Text('Coding Ninjas'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 148.0,
                color: Colors.purple,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.laptop),
                      title: Text('Blogs'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 148.0,
                color: Colors.yellow,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.code),
                      title: Text('Coding contest'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 148.0,
                color: Colors.blueAccent,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.map),
                      title: Text('Map'),
                    ),
                  ],
                ),
              ),
              Container(
                width: 148.0,
                color: Colors.brown,
                child: new Stack(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.settings),
                      title: Text('Setting'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

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 is Dart?

It is an object-oriented programming language with C-style syntax. It is an open-source Language that Google created in 2011. Frontend user interfaces are created by this dart of mobile and web apps. For creating flutter apps, the dart is an essential language.

What are flutter lists?

Lists are a popular element of mobile and web apps and are made up of multiple columns and rows. Lists can include text, buttons, icons, and many more items.

Conclusion

In this blog, we covered the topic of flutter lists, different types of flutter lists with running code and output 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!

Live masterclass