Flutter listview with checkbox

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

1. Learn code for implementing checked listview.
2. Set up the functions
3. 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);}
                    )
                  ],
                ),
              ),
            );

          }
      ),
    );
  }
}