Brand

Flutter Lists

List is a scrollable column or row made up of multiple rows of items, we can add text, buttons, toggles, icons, thumbnails, and many more. We can display various widgets such as menus, tabs, or to break the monotony of pure text files.

In this section, we are going to learn how Lists works. We can work with Lists in different ways, which are given below:

  • Basic Lists
  • Long Lists
  • Horizontal Lists

Let us see all the details about the above lists.

Basic Lists

ListView widget is used for working with Lists. The ListView widget is perfect for displaying lists that contain only a small number of items. We can use ListTile widget in ListView, which provides more properties for the visual structure of the data.

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    final appTitle = 'Flutter Basic List Demo';  
  
    return MaterialApp(  
      title: appTitle,  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text(appTitle),  
        ),  
        body: ListView(  
          children: [  
            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'),  
            ),  
          ],  
        ),  
      ),  
    );  
  }  
}
Output

flutter-basic-list-demo

Working with Long Lists

Sometimes you dont know the number of items in the list (when you are getting data from api) you can use ListView.builder() constructor. The main difference between ListView and ListView.builder is that ListView adds all items at once, whereas the ListView.builder() constructor creates items when you scroll onto the screen.

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp(  
    products: List.generate(500, (i) => "Product List: $i"),  
  ));  
}  
  
class MyApp extends StatelessWidget {  
  final List products;  
  
  MyApp({Key key, @required this.products}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    final appTitle = 'Flutter Long List Demo';  
  
    return MaterialApp(  
      title: appTitle,  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text(appTitle),  
        ),  
        body: ListView.builder(  
          itemCount: products.length,  
          itemBuilder: (context, index) {  
            return ListTile(  
              title: Text('${products[index]}'),  
            );  
          },  
        ),  
      ),  
    );  
  }  
}

In the above code, the itemCount is used to set the number of elements in the list. The itemBuilder tells how the rows will be displayed.

Output

flutter-long-list-demo

Creating a Horizontal List

You can set a horizontal list using the scrollDirection property where you set the axis as horizontal to set a horizontal list.

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    final title = 'Flutter Horizontal Demo 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: [  
              Container(  
                width: 150.0,  
                color: Colors.blue,  
                child: new Stack(  
                  children: [  
                    ListTile(  
                      leading: Icon(Icons.home),  
                      title: Text('Home'),  
                    ),  
                  ],  
                ),  
              ),  
              Container(  
                width: 148.0,  
                color: Colors.green,  
                child: new Stack(  
                  children: [  
                    ListTile(  
                      leading: Icon(Icons.camera_alt),  
                      title: Text('Camera'),  
                    ),  
                  ],  
                ),  
              ),  
              Container(  
                width: 148.0,  
                color: Colors.yellow,  
                child: new Stack(  
                  children: [  
                    ListTile(  
                      leading: Icon(Icons.phone),  
                      title: Text('Phone'),  
                    ),  
                  ],  
                ),  
              ),  
              Container(  
                width: 148.0,  
                color: Colors.red,  
                child: new Stack(  
                  children: [  
                    ListTile(  
                      leading: Icon(Icons.map),  
                      title: Text('Map'),  
                    ),  
                  ],  
                ),  
              ),  
              Container(  
                width: 148.0,  
                color: Colors.orange,  
                child: new Stack(  
                  children: [  
                    ListTile(  
                      leading: Icon(Icons.settings),  
                      title: Text('Setting'),  
                    ),  
                  ],  
                ),  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}
Output

flutter-horizontal-list-demo

Previous
Next
Subscribe Now