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
Add assets image in flutter

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),
        ....
      ],),
  ));
}
Flutter ListView With Checkbox

The ShoppingList class extends StatefulWidget, which means this widget stores mutable states. When the ShoppingListwidget 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.

Related Post

Download this project from GitHub