How do I disable the chip selected icon in a Flutter Raw Chip?

Question

I wanted to create a TabBar with chips as Tabs like this:

The code is:

class TabChip extends StatefulWidget{

  final String chipTitle;

  TabChip(this.chipTitle) : assert(chipTitle != null);

  @override
  State<StatefulWidget> createState() {
    return _TabChipState();
  }
}

class _TabChipState extends State<TabChip>{

  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return RawChip(
      avatar: CircleAvatar(),
      label: Text(widget.chipTitle,
          style: TextStyle(
            color: isSelected ? Colors.white : Colors.red,
            fontWeight: FontWeight.bold
          ),),
      backgroundColor: isSelected ? Colors.red : Colors.white, // Switch colors if chip is selected
      shape: StadiumBorder(side: BorderSide(color: Colors.red, width: 2.0)),
      selectedColor: Colors.red,
      selected: isSelected,
      onPressed: (){
        setState(() {
          isSelected = isSelected ? false : true;
        });
      },
//      onSelected: (bool value){
//        setState(() {
//          isSelected = true;
//        });
//      },
    );
  }
}

Now, I have been able to use a RawChip Widget to create the basic outline of this but when the chip is selected, a tick icon is shown in the avatar.

I want to disable the Avatar.

I also want to add the functionality that a single tab is selected at a time.

How do I do that?

Jordan Davies · Accepted Answer · 2019-01-15T11:23:05.600

8

I think you should have a look at the ChoiceChip widget, it only allows a single selected option and doesn't have the tick mark.

class TabChips extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabChipsState();
}

class _TabChipsState extends State<TabChips> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(3, (index) {
          return ChoiceChip(
            selected: _selectedIndex == index,
            label: Text("$index"),
            onSelected: (selected) {
              if (selected) {
                setState(() {
                  _selectedIndex = index;
                });
              }
            },
          );
        },
      ),
    );
  }
}

edited Jan 15 '19 at 11:23

answered Jan 15 '19 at 11:17

Jordan Davies

9,925
6
40
51

I am using it in a TabBar. Will using a ChoiceChip give issues further down the line like will it be able to load the correct page on selection of a Tab? – Jan 15 '19 at 11:28
Oh, sorry missed that from the question. If it's going in a tab bar you probably don't want to use chips at all and you'd want to look at customising the appearance of the tabs. Something like [this](https://pub.dartlang.org/packages/bubble_tab_indicator) – Jordan Davies Jan 15 '19 at 11:56
I found that too. Now, I am working on understanding it and customizing it to my needs. Any help how I could add borders to the rectangle and change text color based on selected status like in the question image? – Jan 15 '19 at 12:14
1

Got it. Thanks for your help. – Jan 15 '19 at 12:21

score 5 · Answer 2 · answered Jan 15 '19 at 10:58

In Order to hide the selected tick Mark.

In your Code you need to add - showCheckmark: false in your - RawChip

    RawChip(
        showCheckmark: false,  // Add this Code
      //  avatar: CircleAvatar(),
        label: Text(widget.chipTitle,
          style: TextStyle(
              color: isSelected ? Colors.white : Colors.red,
              fontWeight: FontWeight.bold
          ),),
        backgroundColor: isSelected ? Colors.red : Colors.white, // Switch colors if chip is selected
        shape: StadiumBorder(side: BorderSide(color: Colors.red, width: 2.0)),
        selectedColor: Colors.red,
        selected: isSelected,
        onPressed: (){
          setState(() {
            isSelected = !isSelected;
          });
        },
//      onSelected: (bool value){
//        setState(() {
//          isSelected = true;
//        });
//      },
      ),

How do I disable the chip selected icon in a Flutter Raw Chip?

2 Answers2