Flutter Material ListView Widget Tutorial

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.


Flutter Material ListView Widget useful inputs

  • padding: Empty space to inscribe inside the decoration. The child, if any, is placed inside this padding. It describes by EdgeInsets

  • children: The widget below this widget in the tree.


Flutter Material ListView Widget example

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.green[600],
      child: const Center(child: Text('First')),
    ),
    Container(
      height: 50,
      color: Colors.green[500],
      child: const Center(child: Text('Second')),
    ),
    Container(
      height: 50,
      color: Colors.green[100],
      child: const Center(child: Text('Third')),
    ),
  ],
)

Basic ListView full codes example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class ListViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('List View Example Code'),
        ),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: <Widget>[
            Container(
              height: 50,
              color: Colors.green[600],
              child: const Center(child: Text('First')),
            ),
            Container(
              height: 50,
              color: Colors.green[500],
              child: const Center(child: Text('Second')),
            ),
            Container(
              height: 50,
              color: Colors.green[100],
              child: const Center(child: Text('Third')),
            ),
          ],
        ),
      ),
    );
  }
}


ListView.builder full codes example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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


class ListViewBuilderExample extends StatelessWidget {

  final List<String> entries = <String>['First', 'Second', 'Third'];
  final List<int> colorCodes = <int>[600, 500, 100];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('List View Example Code'),
        ),
        body: ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: entries.length,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 50,
                color: Colors.red[colorCodes[index]],
                child: Center(child: Text('${entries[index]}')),
              );
            }
        ),
      ),
    );
  }
}


ListView.separated full codes example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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


class ListViewWithSeparatorExample extends StatelessWidget {

  final List<String> entries = <String>['First', 'Second', 'Third'];
  final List<int> colorCodes = <int>[600, 500, 100];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('List View Example Code'),
        ),
        body: ListView.separated(
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 50,
              color: Colors.lime[colorCodes[index]],
              child: Center(child: Text('${entries[index]}')),
            );
          },
          separatorBuilder: (BuildContext context, int index) => const Divider(),
        ),
      ),
    );
  }
}


Output

Basic ListView ListView.builder ListView.separated
List View Widget
List View Builder Widget
List View Seperator Widget


References