Abhijith
Abhijith

Reputation: 2327

Passing multiples data to function with checkbox flutter

I have a showModalBottomSheetwith Listview with 4 checkbox data,i am facing a problem.

1:Whenever i press on each checkbox it's not updating,then if i close the showModalBottomSheet then open again it show the data selected earlier,it's not updating real time.

there is no problem with getting data from the API

Initialized data

var ids;
 List<SearchMenuModel> menu_model = [];
  List<bool> inputs = new List<bool>();
  @override
  void initState() {
    // TODO: implement initState
    setState(() {
      for(int i=0;i<menu_model.length;i++){
        inputs.add(true);
      }
    });

void ItemChange(bool val,int index){
    setState(() {
      inputs[index] = val;
    });
  }

Showmodalbottomsheet with Listview with checkbox

     void displayBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (ctx) {
          return Container(
            height: MediaQuery
                .of(context)
                .size
                .height * 0.6,
            child: Column(
              children: [
                Container(
                  width: 300,
                  height: 250,
                  child: new ListView.builder(
                      itemCount: menu_model.length,
                      itemBuilder: (BuildContext context, int index){
                        return new Container(
                          padding: new EdgeInsets.all(10.0),
                          child: new Column(
                            children: <Widget>[
                              new CheckboxListTile(
                                  value: inputs[index],
                                  title: new Text(menu_model[index].english),
                                  controlAffinity: 
                                  ListTileControlAffinity.leading,
                                  onChanged:(bool val){
                                    ItemChange(val, index);
                                    setState(() {
                                      ids=menu_model[index].id;
                                      print(ids);
                                    });
                                  }
                              )
                            ],
                          ),
                        );

                      }
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(15),
                  child: GestureDetector(
                    onTap: (){
                      submit(ids);
                    },
                    child: Container(
                      height: 40,
                      width: 280,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        color: Color.fromRGBO(34, 83, 148, 1),
                      ),
                      child: Center(
                        child: Text(
                          "APPLY",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          );
        });
  }

Upvotes: 1

Views: 230

Answers (1)

jksevend
jksevend

Reputation: 458

Wrap your Container in a StatefulBuilder like this:

StatefulBuilder(
builder: (context, setState) {
      return Container()....
  
})

and call the setState anytime you want the bottom sheet container widget to change.

Here is a link with a simple example using statefulbuilder with alertdialog.

Upvotes: 1

Related Questions