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