Dynamically created checkbox in flutter not changing the state on clicked

问题

I am creating a checkbox field every time i press a button. but the generated checkbox is not changing the state when pressed, instead the next checkbox which is generated comes with the changed state.

I have attached the video of how it is working currently (https://imgur.com/a/75vE5cj )

my entire code goes like this :

class ToDoNotes extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
  SizeConfig().init(context);
  return new MaterialApp(
  title: 'notes',
  theme: new ThemeData(
    primarySwatch: Colors.green,
  ),
  home: new T_notes(),
); }}

class T_notes extends StatefulWidget {
 static String tag = 'T_notes';
@override
_T_notesState createState() => new _T_notesState();
}

this is my code for creating checkbox dynamically.

class _T_notesState extends State<T_notes> {
bool rememberMe = false;
 void _onRememberMeChanged(bool newValue) => setState(() {
 rememberMe = newValue;
 });
List<Widget> _children = [];
int _count = 0;
String input;
int i=0;
void _add() {
_children = List.from(_children)
  ..add(
      CheckboxListTile(
        value: rememberMe,
        onChanged: _onRememberMeChanged,
        title: new Text(input,style: TextStyle(color: Colors.black)),
        controlAffinity: ListTileControlAffinity.leading,
        activeColor: Colors.black,
      )
   );
 setState(() {
  ++_count;
});
i++;
}

inside the widget build() inside the body i have the dynamic widget as:

@override
Widget build(BuildContext context) {
return new Scaffold(
  resizeToAvoidBottomPadding: false,
     body: ListView(
    padding: EdgeInsets.all(28.0),
      children: <Widget>[
        SizedBox(height: 30),
        new Row(
          children: <Widget>[
            SizedBox(width:0.2),
            new Container(
              width:200,
              child: new TextField(
                textAlign: TextAlign.left,
                decoration: InputDecoration(
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(138.0)),
                  hintText: 'Enter the text',
                ),
                onChanged: (val) {
                  input = val;
                  }
              ),
            ),

            SizedBox(width:10),
             new Container(
          width: 80,
          child:new Material(
            borderRadius: BorderRadius.circular(30.5),
            shadowColor: Colors.lightBlueAccent.shade100,
            elevation: 1.0,
            child: new MaterialButton(
              onPressed: () {
                _add();
                },
               child: Text('ADD', style: TextStyle(color: Colors.lightGreen,fontSize: 15)),
             ),
           ),
         ),
          ],
         ),
         new Container(
          height: 390,
          child: ListView(children: _children),
         ),
        ],
      ) ,
    );
  }

I want the checkbox field to change the state properly on clicked.

回答1:

Ok the thing here is that you need to have a model for each CheckboxListTile to preserve the state of each of the CheckboxListTiles.

This would be the model:

class ListTileModel {
  bool enabled;
  String text;

  ListTileModel(this.enabled,this.text);
}

Then, when a user taps a Tile, just update the state of that particular row. What you have now is a general state for all your Tiles. So instead of having an array of widgets, have an array of models representing each row. And finally, use the a map function to build all your items

class _T_notesState extends State<T_notes> {
  bool rememberMe = false;

  List<ListTileModel> _items = [];

  String input;
  int i = 0;

  void _add() {
    _items.add(ListTileModel(false,input));
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      body: ListView(
        padding: EdgeInsets.all(28.0),
        children: <Widget>[
          SizedBox(height: 30),
          new Row(
            children: <Widget>[
              SizedBox(width: 0.2),
              new Container(
                width: 200,
                child: new TextField(
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(138.0)),
                      hintText: 'Enter the text',
                    ),
                    onChanged: (val) {
                      input = val;
                    }),
              ),
              SizedBox(width: 10),
              new Container(
                width: 80,
                child: new Material(
                  borderRadius: BorderRadius.circular(30.5),
                  shadowColor: Colors.lightBlueAccent.shade100,
                  elevation: 1.0,
                  child: new MaterialButton(
                    onPressed: () {
                      _add();
                    },
                    child: Text('ADD',
                        style:
                            TextStyle(color: Colors.lightGreen, fontSize: 15)),
                  ),
                ),
              ),
            ],
          ),
          new Container(
            height: 390,
            child: ListView(
                children: _items
                    .map((item) => CheckboxListTile(
                          value: item.enabled,
                          onChanged: (enabled) {
                            item.enabled = enabled;
                            setState(() {});
                          },
                          title: new Text(item.text,
                              style: TextStyle(color: Colors.black)),
                          controlAffinity: ListTileControlAffinity.leading,
                          activeColor: Colors.black,
                        ))
                    .toList()),
          ),
        ],
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/57380673/dynamically-created-checkbox-in-flutter-not-changing-the-state-on-clicked