base list
Displaying a list of data is a basic pattern for mobile applications. Flutter includes the ListView widget to make lists a breeze!
Create a ListView
Using the standard ListView constructor is great for lists with only a few items. We'll also use the built-in ListTile widget to give our project a visual structure.
new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
new ListTile(
leading: new Icon(Icons.photo_album),
title: new Text('Album'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
],
);complete example
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Basic List';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
new ListTile(
leading: new Icon(Icons.photo_album),
title: new Text('Album'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
],
),
),
);
}
}
Create a horizontal list
Sometimes, you may want to create a list that scrolls horizontally instead of vertically. The ListView widget supports horizontal lists out of the box.
We'll use the standard ListView constructor, passing the horizontal scrollDirection , which will override the default vertical orientation.
new ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 160.0,
color: Colors.red,
),
new Container(
width: 160.0,
color: Colors.blue,
),
new Container(
width: 160.0,
color: Colors.green,
),
new Container(
width: 160.0,
color: Colors.yellow,
),
new Container(
width: 160.0,
color: Colors.orange,
),
],
)complete example
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Horizontal List';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Container(
margin: new EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 160.0,
color: Colors.red,
),
new Container(
width: 160.0,
color: Colors.blue,
),
new Container(
width: 160.0,
color: Colors.green,
),
new Container(
width: 160.0,
color: Colors.yellow,
),
new Container(
width: 160.0,
color: Colors.orange,
),
],
),
),
),
);
}
}
Use long lists
The standard ListView constructor works for small lists. In order to handle lists with a large number of items, it is best to use the ListView.builder constructor.
While the default ListView constructor requires us to create all the items at once, the ListView.builder constructor will create the items as they are scrolled to the screen.
1. Create a data source
First, we need a data source to work with. For example, your data source might be a list of messages, search results, or products in a store. Most of the time, this data will come from the internet or a database.
In this example, we will use the List.generate constructor to generate a list of 10000 strings.
final items = new List<String>.generate(10000, (i) => "Item $i");2. Convert data sources into widgets
In order to display our list of strings, we need to render each string as a widget!
This is where ListView.builder will come into play. In our case, we'll display each string on its own line.
new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new ListTile(
title: new Text('${items[index]}'),
);
},
);complete example
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp(
items: new List<String>.generate(10000, (i) => "Item $i"),
));
}
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({Key key, @required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = 'Long List';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new ListTile(
title: new Text('${items[index]}'),
);
},
),
),
);
}
}
Create a list with different types of entries
We often need to create lists that display different types of content. For example, we might be making a list that shows a title, followed by several items related to that title, followed by another title, and so on.
How can we create such a structure with Flutter?
route
- Create a data source with different types of entries
- Convert a data source to a parts list
1. Create a data source with different types of entries
project type
To represent different types of items in a list, we need to define a category for each type of item.
In this example, we will display a title on an application followed by five messages. Therefore, we will create three classes: ListItem , HeadingItem and MessageItem .
// The base class for the different types of items the List can contain
abstract class ListItem {}
// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
final String heading;
HeadingItem(this.heading);
}
// A ListItem that contains data to display a message
class MessageItem implements ListItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
}Creating a list of items
Most of the time, we fetch data from the internet or a local database and convert this data into a list of items.
For this example, we'll generate a list of items to work with. The list will contain a title followed by five messages. Rinse, repeat.
final items = new List<ListItem>.generate(
1200,
(i) => i % 6 == 0
? new HeadingItem("Heading $i")
: new MessageItem("Sender $i", "Message body $i"),
);2. Convert the data source to a parts list
To handle turning each item into a widget, we'll use the ListView.builder constructor.
In general, we'd like to provide a builder function that checks the type of item we're dealing with, and returns the corresponding widget for that type of item.
In this example, it can be very convenient to use the is keyword to check what type of item we are dealing with. It's fast and automatically converts each item to the appropriate type. However, if you prefer another mode, there are different ways to solve this problem!
new ListView.builder(
// Let the ListView know how many items it needs to build
itemCount: items.length,
// Provide a builder function. This is where the magic happens! We'll
// convert each item into a Widget based on the type of item it is.
itemBuilder: (context, index) {
final item = items[index];
if (item is HeadingItem) {
return new ListTile(
title: new Text(
item.heading,
style: Theme.of(context).textTheme.headline,
),
);
} else if (item is MessageItem) {
return new ListTile(
title: new Text(item.sender),
subtitle: new Text(item.body),
);
}
},
);complete example
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp(
items: new List<ListItem>.generate(
1000,
(i) => i % 6 == 0
? new HeadingItem("Heading $i")
: new MessageItem("Sender $i", "Message body $i"),
),
));
}
class MyApp extends StatelessWidget {
final List<ListItem> items;
MyApp({Key key, @required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = 'Mixed List';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new ListView.builder(
// Let the ListView know how many items it needs to build
itemCount: items.length,
// Provide a builder function. This is where the magic happens! We'll
// convert each item into a Widget based on the type of item it is.
itemBuilder: (context, index) {
final item = items[index];
if (item is HeadingItem) {
return new ListTile(
title: new Text(
item.heading,
style: Theme.of(context).textTheme.headline,
),
);
} else if (item is MessageItem) {
return new ListTile(
title: new Text(item.sender),
subtitle: new Text(item.body),
);
}
},
),
),
);
}
}
// The base class for the different types of items the List can contain
abstract class ListItem {}
// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
final String heading;
HeadingItem(this.heading);
}
// A ListItem that contains data to display a message
class MessageItem implements ListItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
}
Create a grid list
In some cases, you may want to display items as a grid instead of a normal list of next items. For this task, we will use the GridView widget.
The easiest way to get started with a grid is to use the GridView.count constructor as it allows us to specify the number of rows or columns we want.
In this example, we will generate a list of 100 parts and display their indices in the list. This will help us visualize how the GridView works.
new GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this would produce 2 rows.
crossAxisCount: 2,
// Generate 100 Widgets that display their index in the List
children: new List.generate(100, (index) {
return new Center(
child: new Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
);complete example
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Grid List';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this would produce 2 rows.
crossAxisCount: 2,
// Generate 100 Widgets that display their index in the List
children: new List.generate(100, (index) {
return new Center(
child: new Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
),
),
);
}
}