ListView is used to create multiple items scrollable linear array of widgets in flutter. We have to use ListTile widget as child of ListView, ListTile component comes with multiple List modifications items. ListView is one of the most usable component in mobile development arena. We would also use Icons inbuilt package of Flutter to shows icons just before ListView items. So in this tutorial we would Create Simple ListView in Flutter using ListTile Android iOS Example Tutorial.
Contents in this project Create Simple ListView in Flutter using ListTile Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Call our main class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget with Appbar in widget build area in MyApp class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Simple ListView in Flutter'), ), body: ), ); } } |
4. Create ListView widget in body section of MyApp class with ListTile component.
- ListTile : Used to create a List Tile.
- leading : Used to display widget before the Title.
- title : Used to set Primary Title content of ListView item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
ListView( children: <Widget>[ ListTile( leading: Icon(Icons.access_alarm), title: Text('Alarm'), ), ListTile( leading: Icon(Icons.android), title: Text('Android'), ), ListTile( leading: Icon(Icons.announcement), title: Text('Announcement'), ), ListTile( leading: Icon(Icons.apps), title: Text('Apps'), ), ListTile( leading: Icon(Icons.archive), title: Text('Archive'), ), ListTile( leading: Icon(Icons.assessment), title: Text('Assessment'), ), ListTile( leading: Icon(Icons.backup), title: Text('Backup'), ), |
5. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Simple ListView in Flutter'), ), body: ListView( children: <Widget>[ ListTile( leading: Icon(Icons.access_alarm), title: Text('Alarm'), ), ListTile( leading: Icon(Icons.android), title: Text('Android'), ), ListTile( leading: Icon(Icons.announcement), title: Text('Announcement'), ), ListTile( leading: Icon(Icons.apps), title: Text('Apps'), ), ListTile( leading: Icon(Icons.archive), title: Text('Archive'), ), ListTile( leading: Icon(Icons.assessment), title: Text('Assessment'), ), ListTile( leading: Icon(Icons.backup), title: Text('Backup'), ), ], ), ), ); } } |
Screenshot:
