dartfluttermd-chip

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


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?


Solution

  • 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;
                    });
                  }
                },
              );
            },
          ),
        );
      }
    }