Choice Chip color not changing when selected

Question

I need help as I am at lost with this. Basically, I have 3 choice chips, and I have set their background color as well as their selected color differently in the sense that when not selected, they all of them should be grey and when selected, they should be the other color that I have specified... but in my UI, it doesn't update automatically... why?

here is my code

class FeedbackButton extends StatefulWidget {
  @override
  _FeedbackButtonState createState() => _FeedbackButtonState();
}

class _FeedbackButtonState extends State<FeedbackButton> {
  int selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 335.h,
      right: 37,
      child: Container(
          margin: EdgeInsets.symmetric(vertical: 5.h),
          height: 30.h,
          width: 106.w,
          decoration: BoxDecoration(
            color: Colors.yellow[700],
            boxShadow: [
              BoxShadow(
                offset: Offset(0, 5),
                blurRadius: 10,
                spreadRadius: -18,
              )
            ],
            borderRadius: BorderRadius.circular(10),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: FlatButton(
                onPressed: () {
                  _feedbackSheet2(context);
                },
                child: Row(
                  children: <Widget>[
                    Text(
                      "Update",
                      style: TextStyle(
                          fontFamily: 'Futura',
                          fontSize: 13.sp,
                          color: Colors.white),
                    ),
                    SizedBox(width: 6.w),
                    Icon(
                      Icons.arrow_circle_up_rounded,
                      color: Colors.white,
                      size: 20.sp,
                    )
                  ],
                )),
          )),
    );
  }

  _feedbackSheet2(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          Size size = MediaQuery.of(context).size;
          return Container(
            color: Color(0xFF737373),
            child: Container(
              height: 510.h,
              decoration: BoxDecoration(
                  color: Colors.amber[400],
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30))),
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  Positioned(
                      top: 20.h,
                      child: Row(
                        children: <Widget>[
                          Text("Update",
                              style: TextStyle(
                                  fontFamily: 'Futura',
                                  fontWeight: FontWeight.w600,
                                  fontSize: 17.sp,
                                  color: Colors.black87.withOpacity(0.4))),
                          SizedBox(width: 240.w),
                          Transform.rotate(
                            angle: -90 * math.pi / 180,
                            child: IconButton(
                              onPressed: () {
                                Navigator.pop(context);
                                print(
                                    "User choose to cancel experience update procedure");
                              },
                              icon: Icon(Icons.double_arrow_rounded,
                                  color: Colors.black87.withOpacity(0.4)),
                            ),
                          )
                        ],
                      )),
                  Positioned(
                      top: 70.h,
                      child: Container(
                          width: size.width * 0.8,
                          child: Text(
                            "Tell us how you feel regarding your last interaction with the account department:",
                            style: TextStyle(
                                fontFamily: 'Futura',
                                fontWeight: FontWeight.normal),
                            textAlign: TextAlign.center,
                          ))),
                  Positioned(
                      top: 130.h,
                      child: Container(
                          height: 50.h,
                          width: 350.w,
                          decoration: BoxDecoration(
                            color: Colors.black87.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(10),
                          ),
                          alignment: Alignment.center,
                          child: Wrap(
                              spacing: 15.0,
                              children: chipdata.asMap().entries.map((entry) {
                                int idx = entry.key;
                                return createChoiceChip(
                                  index: idx,
                                  label: entry.value['label'],
                                  avatar: entry.value['avatarpic'],
                                );
                              }).toList()))),
                  Positioned(
                      top: 210.h,
                      child: Container(
                          width: size.width * 0.8,
                          child: Text(
                            "In relation to your emotion, please select the reason(s) that may be the cause:",
                            style: TextStyle(
                              fontFamily: 'Futura',
                              fontWeight: FontWeight.normal,
                            ),
                            textAlign: TextAlign.center,
                          ))),
                  Positioned(
                    top: 400.h,
                    child: Container(
                      height: 40.h,
                      width: 140.w,
                      decoration: BoxDecoration(
                        color: Colors.blue[400].withOpacity(0.5),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: FlatButton(
                          onPressed: () {
                            //sendMail();
                            print("email is sending");
                            //Navigator.pop(context);
                          },
                          child: Text(
                            "send update",
                            style: TextStyle(
                                fontFamily: 'Futura',
                                color: Colors.black87,
                                fontSize: 16.sp),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                      top: 450.h,
                      child: SizedBox(
                          width: 210.w,
                          child: Text(
                            "We'll send an anonymous feedback to the account department.",
                            style: TextStyle(
                                fontFamily: 'Futura',
                                fontSize: 12.sp,
                                color: Colors.grey[900]),
                            textAlign: TextAlign.center,
                          )))
                  // make the feeling "dissatisfied, neutral, satisfied"
                ],
              ),
            ),
          );
        });
  }

  Widget createChoiceChip({int index, IconData avatar, String label}) {
    return ChoiceChip(
      avatar: Icon(avatar),
      label: Text(label),
      labelStyle: TextStyle(
          color: Colors.black87, fontFamily: 'Futura', fontSize: 13.sp),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      backgroundColor: Colors.grey[600].withOpacity(0.7),
      disabledColor: Colors.black,
      selected: selectedIndex == index,
      onSelected: (bool selected) {
        setState(() {
          selectedIndex = selected ? index : null;
          
        });
      },
    );
  }
}

below is my chip data file

final chipdata = [
  {   'avatarpic': Icons.sentiment_dissatisfied_rounded,
      'label': 'Dissatisfied',
  },
  {   'avatarpic': Icons.sentiment_neutral_rounded,
      'label': 'Neutral',
  },
  {   'avatarpic': Icons.sentiment_satisfied_rounded,
      'label': 'Satisfied',
  },
];

Answer 1

You need to convert your bottom sheet widget to a StatefulWidget.

Currently, your whole bottom sheet widget is inside the method and it does not have any state.

Also, Opening up a bottom sheet will build a new widget in the widget tree on top of the current one, so the change you do in the FeedbackButton will not have any effect on the bottom sheet builder.

So you need to design a widget like below.

showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return YourBottomSheetWidget();
      },
    );

class YourBottomSheetWidget extends StatefulWidget {
  @override
  _YourBottomSheetWidgetState createState() => _YourBottomSheetWidgetState();
}

class _YourBottomSheetWidgetState extends State<YourBottomSheetWidget> {


  @override
  Widget build(BuildContext context) {
  }

  Widget createChoiceChip({int index, IconData avatar, String label}) {
    return ChoiceChip(
      avatar: Icon(avatar),
      label: Text(label),
      labelStyle:
          TextStyle(color: Colors.black87, fontFamily: 'Futura', fontSize: 13),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      backgroundColor: Colors.grey[600].withOpacity(0.7),
      disabledColor: Colors.black,
      selected: selectedIndex == index,
      onSelected: (bool selected) {
        setState(() {
          selectedIndex = selected ? index : null;
        });
      },
    );
  }
}

Also, do try to create Classes instead of the methods to build a Widgets. Here's an explanation.