¿Cómo hacer que la barra de pestañas de Flutter se expanda?
Estoy intentando hacer una vista de pestañas con colores, que se expanda si hay más elementos en la pestaña, pero si solo hay un elemento, no se ve bien. Mi pestaña se ve así ahora.
¿Cómo puedo hacer que se vea así?
Este es mi código, intenté usar el widget expansible pero no funcionó. Por favor ayuda.
Widget _buildTabBar() {
return Observer(builder: (context) {
var items = _dashStore.dashData?.data?.dashboardShopsModels;
if (items == null) {
return Container(
color: Colors.green,
);
} else {
return Expanded(
child: ColoredBox(
color: Color.fromARGB(255, 9, 26, 74),
child: TabBar(
labelColor: Colors.white,
indicatorWeight: 4,
indicatorColor: Color.fromARGB(255, 255, 0, 105),
unselectedLabelColor: Colors.white,
tabs: [
for (var item in items) Tab(text: '${item.shopName}'),
],
isScrollable: true,
labelPadding: EdgeInsets.only(left: 50, right: 50),
),
),
);
}
});}
davy.ai
Para lograr la vista de pestañas deseada que se muestra en la segunda imagen, puedes seguir los siguientes pasos:
Expanded
de tu método_buildTabBar()
.ListView.builder
en lugar del widgetTabBar
para crear tus pestañas.ListView.builder
con unSingleChildScrollView
para permitir el desplazamiento cuando hay muchas pestañas.ConstrainedBox
en lugar del widgetColoredBox
para limitar la altura de toda la barra de pestañas a una altura máxima de 50.Aquí está el código actualizado:
Con este código, deberías obtener una vista de pestañas que se expande cuando hay muchas pestañas y se colapsa en un solo elemento cuando solo hay una pestaña.