onPressed create multiple instances of CheckboxListTile in Flutter

Issue

I’m new to flutter so I’m not sure how to go about this. I want to be able to add another instance of the same CheckboxListTile when a user presses a button right below the most recent CheckboxListTile.

The code for how it currently is is below.

Widget build(BuildContext context) {
return ListView(
  children: <Widget>[
    CheckboxListTile(
        title: TextField(
          autocorrect: true,
        ),
        value: checkBoxValue,
        secondary: Icon(Icons.assignment),
        onChanged: (bool newValue) {
          setState(() {
            checkBoxValue = newValue;
          });
        }
    ),
  ],

The code of an example of how I would want the app to appear after a user presses is below.

Widget build(BuildContext context) {
return ListView(
  children: <Widget>[
    CheckboxListTile(
        title: TextField(
          autocorrect: true,
        ),
        value: checkBoxValue,
        secondary: Icon(Icons.assignment),
        onChanged: (bool newValue) {
          setState(() {
            checkBoxValue = newValue;
          });
        }
    ),
    CheckboxListTile(
        title: TextField(
          autocorrect: true,
        ),
        value: checkBoxValue,
        secondary: Icon(Icons.assignment),
        onChanged: (bool newValue) {
          setState(() {
            checkBoxValue = newValue;
          });
        }
    ),
  ],

Thanks in advance!

Solution

One way you could do it is by using a ListView.builder like this..

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  List<bool> checkBoxesCheckedStates = [false];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: checkBoxesCheckedStates.length,
            itemBuilder: (BuildContext context, int index){
              return CheckboxListTile(
                title: TextField(
                  autocorrect: true,
                ),
                value: checkBoxesCheckedStates[index],
                secondary: Icon(Icons.assignment),
                onChanged: (bool newValue) {
                  setState(() {
                    checkBoxesCheckedStates[index] = newValue;
                  });
                },
              );
            },
          ),
        ),
        RaisedButton(
          child: Text('Add'),
          onPressed: (){
            setState(() {
              checkBoxesCheckedStates.add(false);
            });
          },
        ),
      ],
    );
  }
}

Answered By – Jigar Patel

Answer Checked By – David Marino (FlutterFixes Volunteer)