In this post, you will learn how to implement a basic single line ListView
with Image
and Checkbox
.First, Create a new Flutter Project in your IntelliJ Idea.
1. Adding Assets and Images in Flutter
Flutter apps can include both code and assets. An asset is a file that is bundled and deployed with your app and is accessible at runtime.
Specifying assets
Flutter uses the pubspec.yaml
file, located at the root of your project, to identify assets required by an app.
flutter:
uses-material-design: true
assets:
- assets/person.png

The assets
subsection of the flutter
section specifies files that should be included with the app. Each asset is identified by an explicit path (relative to the pubspec.yaml
file) where the asset file is located. The order in which the assets are declared does not matter. The main asset is assumed to correspond to a resolution of 1.0. For example, consider the following asset layout for an image named person.png:
- …/person.png
- …/2.0x/person.png
- …/3.0x/person.png
On devices with a device pixel ratio of 1.8, the asset …/2.0x/person.png would be chosen. For a device pixel ratio of 2.7, the asset …/3.0x/person.png would be chosen.
2. Create a Presentation Class
We’ll create a purchase application, which displays various products offered and maintains a purchase list. Let’s start by defining our presentation class, Product:
class Product {
String name;
String avatarImage;
bool isCheck;
Product(this.name, this.avatarImage, this.isCheck);
}
3. Create a List of Item
ListTiles
are always a fixed height (which height depends on how isThreeLine, dense, and subtitle are configured); they do not grow in height based on their contents. If you are looking for a widget that allows for arbitrary layouts in a row, consider Row.
import 'package:flutter/material.dart';
import 'package:untitled1/product/Product.dart';
class ShoppingItemList extends StatefulWidget{
final Product product;
ShoppingItemList(Product product)
: product = product,
super(key: new ObjectKey(product));
@override
ShoppingItemState createState() {
return new ShoppingItemState(product);
}
}
class ShoppingItemState extends State<ShoppingItemList> {
final Product product;
ShoppingItemState(this.product);
@override
Widget build(BuildContext context) {
return new ListTile(
onTap:null,
leading: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Image(image: new AssetImage(product.avatarImage)),
),
title: new Row(
children: <Widget>[
new Expanded(child: new Text(product.name)),
new Checkbox(value: product.isCheck, onChanged: (bool value) {
setState(() {
product.isCheck = value;
});
})
],
)
);
}
}
The ShoppingListItem
widget follows a common pattern for stateful widgets. It stores the values it receives in its constructor in member variables, which it then uses during its function.
4. Create Listview
The parent creates a new instance of ShoppingListItem
when it rebuilds, that operation is cheap because the framework compares the newly built widgets with the previously built widgets and applies only the differences to the underlying render objects. Let’s look at an example parent widget that stores a mutable state:
class ShoppingList extends StatefulWidget {
ShoppingList({Key key, this.product}) :super(key: key);
List<Product> product;
@override
_ShoppingListState createState() {
return new _ShoppingListState();
}
}
class _ShoppingListState extends State<ShoppingList> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Product List"),
),
body: new Container(
padding: new EdgeInsets.all(8.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(child: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: widget.product.map((Product product) {
return new ShoppingItemList(product);
}).toList(),
)),
new RaisedButton(onPressed: () {
for (Product p in widget.product) {
if (p.isCheck)
print(p.name);
}
},
child: new Text('Save'),
)
],
),
)
);
}
}
void main() {
runApp(new MaterialApp(
title: 'Demo App',
home: new SoppingList(product:
[
new Product('Eggs','assets/person.png',false),
new Product('Flour','assets/person.png',false),
new Product('Chocolate chips','assets/person.png',false),
....
],),
));
}

The ShoppingList
class extends StatefulWidget
, which means this widget stores mutable states. When the ShoppingList
widget is first inserted into the tree, the framework calls the createState
function to create a fresh instance of _ShoppingListState
to associate with that location in the tree. To access properties of the current ShoppingList
, the _ShoppingListState
can use its widget
property. If the parent rebuilds and creates a new ShoppingList
, the _ShoppingListState
will also rebuild with the new widget
value. If you wish to be notified when the widget
property changes, you can override the didUpdateWidget
function, which is passed oldWidget
to let you compare the old widget with the current widget
.
Super! you should post this on medium.com