ios developer
ios developer

Reputation: 3473

Refresh ListView.builder On Button Click in Flutter

I am using the below code, where I have a ListView that had a switch. I want to implement something like when I click on the RaisedButton - it will reload the ListView and all the values of switch.value should be changed to either true or false. The user can either change the value of the switch from items in the ListView or from the button click. I do not have an idea on how I should change the value or all the switches in the ListView.

 return Column(
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width / 2,
          height: 100,
          padding: EdgeInsets.all(20),
          child: RaisedButton(
              onPressed: () {
              },
              child: Text(
                BTN_START_TRIP,
                style: new TextStyle(
                  fontSize: 20.0,
                ),
              ),
              textColor: buttonFontColor,
              color: buttonColor,
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(15.0))
          ),
        ),
        Expanded(
          child: ListView.builder(

            padding: EdgeInsets.all(3.0),
            // Let the ListView know how many items it needs to build.
            itemCount: snapshot.data.results.length,
            // Provide a builder function. This is where the magic happens.
            // Convert each item into a widget based on the type of item it is.
            itemBuilder: (context, index){

              return Container(
                height: 120,
                child: Card(
                  elevation: 10,
                  child: InkWell(
                    splashColor: Colors.blue.withAlpha(30),
                    onTap: () {
                      print(snapshot.data.results[index].original_title);
                    },
                    child: Container(
                      height: 120,
                      child: Row(
                          children: <Widget>[
                            Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Container(
                                  padding: EdgeInsets.fromLTRB(20, 0, 5, 0),
                                  width: MediaQuery.of(context).size.width -90,
                                  child: Align(
                                    alignment: Alignment.topLeft,
                                    child: Text(snapshot.data.results[index].original_title,
                                        textAlign: TextAlign.left,
                                        style: TextStyle(fontSize: defaultTitleFontsize, color: defaultFontColor),
                                        maxLines: 5),
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.fromLTRB(20, 0, 5, 0),
                                  child:  Align(
                                    alignment: Alignment.topLeft,
                                    child: Text(snapshot.data.results[index].original_language,textAlign: TextAlign.left,style: TextStyle(fontSize: defaultsubTitleFontsize, color: defaultFontColor)),
                                  ),
                                ),
                              ],
                            ),
                            Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                crossAxisAlignment: CrossAxisAlignment.end,
                              children: <Widget>[
                                Container(
                                  child: Switch(
                                      value: false,
                                      onChanged: (value){
                                        setState(() {
                                          print(value);
                                        });
                                      }
                                  ),
                                ),
                              ],
                            ),
                          ]
                      ),

                    ),
                  ),
                ),
              );
            },
          ),
        )
      ],
    );

Upvotes: 0

Views: 3291

Answers (1)

N0000B
N0000B

Reputation: 449

You'll need to have a variable to decide if the switch should be on or off. And during a certain event (click of button e.g) set the variable to appropriate value & re-trigger the build (re-painting of the UI) by calling setState. You'll need to have the above logic part of a stateful widget to accomplish that.

Upvotes: 1

Related Questions