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
The reason this is happening is that you try to update your main page not your
showModalBottomSheet
, first change yourselectedButton
to this:then change your
bottomContainer
to this:then change your
showModalBottomSheet
to this:Note: when you try to call
selectedButton
from your main page remember to pass these function to it: