Hello guys, We have discussed flutter listview implementation in one of our previous. Here we will implement an example of how to create a checked listview in flutter application. Like previous example here also we will use a listview builder. So that you will get an idea of how to input items to listview dynamically in flutter.
Contents
- Learn code for implementing checked listview.
- Set up the functions
- Implement the checked listview in class
Learn code for implementing checked listview
First step is to learn what set of code is used to build a listview in flutter. Following is the which has to be add to build a listview in flutter. You can specify the item count will decide the number of items in the listview and you can return a card in itemBuilder. Full code will be provided in the third step.
body: new ListView.builder( itemCount: inputs.length, itemBuilder: (BuildContext context, int index){ return new Card( child: new Container( padding: new EdgeInsets.all(10.0), child: new Column( children: <Widget>[ new CheckboxListTile( value: inputs[index], title: new Text('item ${index}'), controlAffinity: ListTileControlAffinity.leading, onChanged:(bool val){ItemChange(val, index);} ) ], ), ), ); } ),
Set up the functions
There has to be two functions required to implement this example. First one we will just override initState function to set up the data for checked listview. And the next function will be the ItemChange function which will get called when user checks the checkbox.
List<bool> inputs = new List<bool>(); @override void initState() { // TODO: implement initState setState(() { for(int i=0;i<20;i++){ inputs.add(true); } }); } void ItemChange(bool val,int index){ setState(() { inputs[index] = val; }); }
Implement the checked listview in the class (Complete code)
In this step we will put the pieces together to get a checked listview.Following is the complete code of the main.dart file which is used for implementing this example. After implementation you will get the output displayed above.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Checked Listview', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(title: 'Flutter Checked Listview'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { List<bool> inputs = new List<bool>(); @override void initState() { // TODO: implement initState setState(() { for(int i=0;i<20;i++){ inputs.add(true); } }); } void ItemChange(bool val,int index){ setState(() { inputs[index] = val; }); } @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text('Checked Listview'), ), body: new ListView.builder( itemCount: inputs.length, itemBuilder: (BuildContext context, int index){ return new Card( child: new Container( padding: new EdgeInsets.all(10.0), child: new Column( children: <Widget>[ new CheckboxListTile( value: inputs[index], title: new Text('item ${index}'), controlAffinity: ListTileControlAffinity.leading, onChanged:(bool val){ItemChange(val, index);} ) ], ), ), ); } ), ); } }
Very useful, but what happens whe you build the list of items before passing it to the listview?,
Thank you.
Hi, very helpful post. For flutter, It’s weird to save the check information for checkbox in the list item.Thank you very much.
This was really helpful. How would I change the title for each item?
Thank you.
Can We Add Lock And Unlock Level Instead Of Check Boxes