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',
  },
];

I believe that your code is perfectly fine, It's a `color` I think, because of that you cannot tell the difference that Chip is selected and not selected. — ibhavikmakwana, Feb 26 '21 at 05:22
If that is not the case can you please share more code? where you are using this method. — ibhavikmakwana, Feb 26 '21 at 05:23
@ibhavikmakwana I have just add the full page code, I'd appreciate it if you could help me!! — Sarah ED, Feb 26 '21 at 10:04

score 4 · Accepted Answer · answered Feb 26 '21 at 13:48

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.

sorry, but where should I put the 'showModalBottomSheet( context: context, builder: (BuildContext context) { return YourBottomSheetWidget(); }, );' — Sarah ED, Feb 27 '21 at 03:16
because I tried to place it at the _feedback2 widget position inside the feedbackbutton class but it has red underline — Sarah ED, Feb 27 '21 at 03:18
eh never mind already got it!!! thank you so much, I appreciate your help alot — Sarah ED, Feb 27 '21 at 03:24

Choice Chip color not changing when selected

1 Answers1