Flutter : setState() is not working properly

Question

I'm making a new stateful widget that would show a listview according to the option selected, which are ONE and TWO here. The value of index changes once the GestureDetector is tapped, fontsize and color of the text changes. but, the Container with pages[index] does not rebuild

I don't know what is wrong since, one of the container in the column rebuilds and the other doesn't.

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MatchStatsState();
  }
}

class MatchStatsState extends State<MatchStats>{
  List<Widget> pages = [
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        BattingStatsView(CskBatting),
        BowlingStatsView(cskBowling),
      ],
    ),
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        BattingStatsView(kxipBatting),
        BowlingStatsView(kxipBowling)
      ],
    ),   
  ];
  Color activeColor = Colors.yellow;
  Color inactiveColor = Colors.white;
  num activeFontSize = 20.0;
  num inactiveFontSize = 15.0;
  int index = 0;

  @override
  Widget build(BuildContext context) {


    // TODO: implement build
    return Container(
      height: MediaQuery.of(context).size.height*0.4,
      width: MediaQuery.of(context).size.width*0.95,
      child: Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height*0.05,
            width: MediaQuery.of(context).size.width*0.95,
            child: Row(
              children: <Widget>[
                GestureDetector(
                    onTap: (){
                      setState(() {
                        index = 0;
                      });
                    },
                    child: Container(
                    width: MediaQuery.of(context).size.width*0.45,
                    child: Text("ONE",style: TextStyle(color: index == 0?activeColor:inactiveColor,fontSize: index == 0? activeFontSize: inactiveFontSize)),
                  ),
                ),
                GestureDetector(
                    onTap: (){
                      setState(() {
                        index = 1;
                      });
                    },
                    child: Container(
                    width: MediaQuery.of(context).size.width*0.45,
                    child: Text("TWO",style: TextStyle(color: index == 1?activeColor:inactiveColor, fontSize: index == 1? activeFontSize: inactiveFontSize)),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height*0.35,
            width: MediaQuery.of(context).size.width*0.95,
            child: pages[index]
          ),
        ]
      )
    );
  }
}

I want the second container in the column to rebuild when the value of index changes, how could I achieve that?

Did you add the initState() in the State class?

Andre
– Andre

2019-04-08 14:57:35 +00:00
Commented Apr 8, 2019 at 14:57 — Andre
– Andre, Commented Apr 8, 2019 at 14:57

Andre · Accepted Answer · 2019-04-08 15:34:14Z

1

Try with this:

create a method that return a List Widget like this:

List<Widget> buildPages() {
    return [
      ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          BattingStatsView(CskBatting),
          BowlingStatsView(cskBowling),
        ],
      ),
      ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          BattingStatsView(kxipBatting),
          BowlingStatsView(kxipBowling)
        ],
      ),
    ];
  }

Widget getProperWidget(int index) {
    return buildPages()[index];
  }

Than your column container:

Container(
            height: MediaQuery.of(context).size.height*0.35,
            width: MediaQuery.of(context).size.width*0.95,
            child: getproperWidget(index)
          ),

Remember to override the initState.

edited Apr 8, 2019 at 15:34

answered Apr 8, 2019 at 15:04

Andre

7,7689 gold badges51 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Naveen Over a year ago

I tried it with this code, I did the override on initState, I initialized index in initState, but unfortunately I get the same results.

Andre Over a year ago

I've updated the code, try with that. You have force somehow the rebuild of the widget, only in that way the container will rebuild itself. Seems that in your code the widget does not rebuild

Naveen Over a year ago

Exactly! How could I force the rebuild? getProperWidget() is giving the same results as before

Andre Over a year ago

what you have try to force, is refresh of the list. Try to return to the inital code, where you saved the list as property and in the setState() { pages = List.from(pages) }

kaarimtareek · Accepted Answer · 2019-08-04 23:01:36Z

1

I think the cause of this issue is the element tree doesn't recognize the change that has been done in the widget tree , so you can add Key to the container which holds pages[index] or you can do something like this :

    Widget getWidget(int index){
  return Container(
    child:pages[index],
  );
}

instead of using Container in the widget tree, use a function that will be called every time the ui re renders . I hope that can help

answered Aug 4, 2019 at 23:01

kaarimtareek

4963 silver badges13 bronze badges

Collectives™ on Stack Overflow

Flutter : setState() is not working properly

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest