I am basically trying to make a filter, the easiest tool I've found that fits my needs is Togglebuttons. The problem is that the default borderRadius only applies to the items in the corners (first and last) as rounding the corners of the widget as a whole, not every item.
I would like to know how to achieve this style, and this is what I currently have achieved.
My code is:
ToggleButtons(
selectedColor: CustomColors.orangeDark,
color: CustomColors.white,
fillColor: CustomColors.white,
textStyle: CustomTextStyles.menuOption,
renderBorder: false,
isSelected: isSelected,
children: const [
OpcaoFiltro("PROMOÇÕES"),
OpcaoFiltro("LANCHES"),
OpcaoFiltro("COMBOS"),
OpcaoFiltro("BEBIDAS"),
],
with OpcaoFiltro() being:
class OpcaoFiltro extends StatelessWidget {
const OpcaoFiltro(this.text, {Key? key}) : super(key: key);
final String text;
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6),
child: Text(
text,
textAlign: TextAlign.center,
),
),
);
}
}
The ClipRRect makes it's child to have rounded corners, but the toggleButtons fillColor disregards that. Despite all my research I was not able to find an answer online. Any help is appreciated.