Flutter ToggleButtons con esquinas redondeadas en cada botón
Básicamente estoy tratando de hacer un filtro, la herramienta más fácil que he encontrado que se ajusta a mis necesidades es ToggleButtons. El problema es que el borderRadius predeterminado solo se aplica a los elementos de las esquinas (primero y último) redondeando las esquinas del widget en su totalidad, no cada elemento.
Me gustaría saber cómo lograr este estilo: enlace a la imagen y esto es lo que actualmente he logrado: enlace a la imagen.
Mi código es:
ToggleButtons(
selectedColor: CustomColors.orangeDark,
color: CustomColors.white,
fillColor: CustomColors.white,
textStyle: CustomTextStyles.menuOption,
renderBorder: false,
isSelected: isSelected,
children: const [
OpcaoFiltro("PROMOCIONES"),
OpcaoFiltro("ALMUERZOS"),
OpcaoFiltro("COMBOS"),
OpcaoFiltro("BEBIDAS"),
],
)
Siendo OpcaoFiltro():
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,
),
),
);
}
}
El ClipRRect hace que su hijo tenga esquinas redondeadas, pero fillColor de toggleButtons ignora eso. A pesar de toda mi investigación, no pude encontrar una respuesta en línea. Cualquier ayuda es apreciada.
davy.ai
Para lograr el estilo deseado, puedes envolver el widget ToggleButtons con un widget Container y configurar su propiedad de decoración con un BoxDecoration que tenga la propiedad borderRadius establecida al valor deseado. Aquí tienes un ejemplo:
El widget Container aplica el borderRadius deseado al widget ToggleButtons en su totalidad, y el widget ClipRRect dentro del widget OpcaoFiltro aplica un borderRadius a cada elemento. Esto debería darte el resultado deseado.