FLUTTER UI Selection box (with Container and SetState) selected but nothing happen

Question

Halo,

I have problem with my Selected Container, it changed on main page when selected, but didn't change when selected in bottomsheet. here's the video link :

https://youtube.com/shorts/hzPNNQB6Gws?feature=share

here is the screenshoot :

This is how I call in bottomsheet :

bottomsheet: Container(
~~
~~
    child: OutlinedButton(
        child: Text("Buy Now"),
        onPressed: (){
          showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return bottomContainer(context);
              });
        },
    ),
)

here's the bottomContainer widget code :

Widget bottomContainer(BuildContext context) {
~~
~~
  return Wrap(
    spacing: 8.0,
    runSpacing: 4.0,
    children: <Widget> [
      ...List.generate(
        listVariant.length,
            (index) => selectedButton(
          index: index,
          text: listVariant[index],
        ),
      ),
    ],
  ),
~~
~~
}

and here's selectedButton widget full code :

Widget selectedButton({required String text, required int index}) {
  return InkWell(
    splashColor: Colors.cyanAccent,
    onTap: () {
      setState(() {
        _selectedVariant = index;
        print('$index, $text');

      });
    },
    child: Container(
        height: 36,
        width: text.length.toDouble() *9,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(10)),
          border: Border.all(
            width: 1.5,
            color: const Color.fromRGBO(78, 125, 150, 1),
          ),
          color: index == _selectedVariant
              ? const Color.fromRGBO(78, 125, 150, 0.5)
              : Colors.white,
        ),
        child: Center(
          child: Text(text,
            textAlign: TextAlign.center,
            style: const TextStyle(
                color: Color.fromRGBO(78, 125, 150, 1),
                fontSize: 13,
                fontWeight: FontWeight.w700
            ),
          ),
        )
    ),
  );
}

IDK where's the problem because you can see in video that it was working on body, but didn't work in bottomsheet widget.

*All of this code was in one class state

Answer 1

The reason this is happening is that you try to update your main page not your showModalBottomSheet, first change your selectedButton to this:

Widget selectedButton({required String text, required int index, required Function() onTap}) {
  return InkWell(
    splashColor: Colors.cyanAccent,
    onTap: onTap,
    child: ...
  );
}

then change your bottomContainer to this:

Widget bottomContainer(BuildContext context, void Function(void Function()) innerSetState) {
~~
~~
  return Wrap(
    spacing: 8.0,
    runSpacing: 4.0,
    children: <Widget> [
      ...List.generate(
        listVariant.length,
            (index) => selectedButton(
          onTap:(){
             innerSetState(() {
                _selectedVariant = index;
             });
          },
          index: index,
          text: listVariant[index],
        ),
      ),
    ],
  ),
~~
~~
}

then change your showModalBottomSheet to this:

onPressed: (){
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (context, innerSetState) {
            return bottomContainer(context, innerSetState);
          },
        ),
      });
},

Note: when you try to call selectedButton from your main page remember to pass these function to it:

selectedButton(
   onTap:(){
     setState(() {
       _selectedVariant = index;
     });   
   },
   ...
)