Displaying lists of data is a fundamental pattern for mobile apps. Flutterincludes the ListViewWidget to make working with lists a breeze!

Create a ListView

Using the standard ListView constructor is perfect for lists that contain onlya few items. We will also employ the built-inListTileWidget to give our items a visual structure.

  1. ListView(
  2. children: <Widget>[
  3. ListTile(
  4. leading: Icon(Icons.map),
  5. title: Text('Map'),
  6. ),
  7. ListTile(
  8. leading: Icon(Icons.photo_album),
  9. title: Text('Album'),
  10. ),
  11. ListTile(
  12. leading: Icon(Icons.phone),
  13. title: Text('Phone'),
  14. ),
  15. ],
  16. );

Complete example

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. final title = 'Basic List';
  7. return MaterialApp(
  8. title: title,
  9. home: Scaffold(
  10. appBar: AppBar(
  11. title: Text(title),
  12. ),
  13. body: ListView(
  14. children: <Widget>[
  15. ListTile(
  16. leading: Icon(Icons.map),
  17. title: Text('Map'),
  18. ),
  19. ListTile(
  20. leading: Icon(Icons.photo_album),
  21. title: Text('Album'),
  22. ),
  23. ListTile(
  24. leading: Icon(Icons.phone),
  25. title: Text('Phone'),
  26. ),
  27. ],
  28. ),
  29. ),
  30. );
  31. }
  32. }

Basic List Demo