In this post, you will learn how to implement basic single line ListView
with Image
and Checkbox
.First, Create 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 Presentation Class
We’ll create purchase application, which displays various products offered for 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 List 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 layout 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 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 state. 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