My Text widget ui does not update even after using setstate-CodePudding

I am trying to display price based on the selected item from my picker , but my Text ui is not changing after onSelectedItemChanged Picker function is triggered even after using setState. The changes only reflect after i use the flutter hot reload.

//The price varaible is the variable that changes

 int price = 0;

              
// This is the widget displaying the price variable based on selected item
Text(price,
  style: TextStyle(
  color: Colors.white,
  fontFamily: 'Montserrat',
 fontSize: 15.0));

//This is the picker widget

 Widget buildPicker() {
    return SizedBox(
      height: 350,
      child: StatefulBuilder(builder: (context, setState) {
        return CupertinoPicker(
          scrollController: scrollController,
          itemExtent: 64,
          selectionOverlay: CupertinoPickerDefaultSelectionOverlay(
            background: CupertinoColors.activeBlue.withOpacity(0.2),
          ),
          children: List.generate(productController.data.length, (index) {
            final isSelected = this.index == index;
            final item = productController.data[index];
            final color =
                isSelected ? CupertinoColors.activeBlue : CupertinoColors.black;
            return Center(
              child: Text(
                item.size!,
                style: TextStyle(color: color, fontSize: 32),
              ),
            );
          }),
          onSelectedItemChanged: (index) {
            setState(() {
              this.index = index;
            final item = productController.data[index];
            price= item.price!;
            print(price);
         });
          },
        );
      }),
    );
  }

// The text widget displaying the price does not change unless i use the flutter hot reload before the changes reflect. Please what am i doing wrong here?

CodePudding user response：

StatefulBuilder rebuild your buildPicker, it didn't able to build whole context that's why value won't change. When you used hot reload then change the value.

You can solve this problem by using state management like Bloc, getx, provider and otherwise you can use inherited widget.

For more about -

State management https://docs.flutter.dev/development/data-and-backend/state-mgmt/options

Inherited widget Flutter: How to correctly use an Inherited Widget?

CodePudding user response：

If you check this line

StatefulBuilder(builder: (context, setState) here setState is referring to StatefulBuilder's state not class level state, that's why your page screen is not updating, I will suggest renaming this something so that it won't make us confuse and able to use class level setState.

This snippet will provide you the idea , check I'm renaming to use state level setState method.

            builder: (context) => StatefulBuilder(
              builder: (context, setStateSB) {
                //<- this will update ui inside dilaog
                        onSelectedItemChanged: (v) {
                          print(v);
                          setStateSB(() {
                            // for inner changes
                            price = v;
                          });

                          setState(() {
                            // using class level state
                            price = v;
                          });
                        },