es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo hacer que la barra de pestañas de Flutter se expanda?

10 Jun, 2023 Programación

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

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la vista de pestañas deseada que se muestra en la segunda imagen, puedes seguir los siguientes pasos:

    1. Elimina el widget Expanded de tu método _buildTabBar().
    2. Usa un ListView.builder en lugar del widget TabBar para crear tus pestañas.
    3. Envuelve tu widget ListView.builder con un SingleChildScrollView para permitir el desplazamiento cuando hay muchas pestañas.
    4. Usa el widget ConstrainedBox en lugar del widget ColoredBox para limitar la altura de toda la barra de pestañas a una altura máxima de 50.

    Aquí está el código actualizado:

    Widget _buildTabBar() {
    return Observer(builder: (context) {
      var items = _dashStore.dashData?.data?.dashboardShopsModels;
      if (items == null) {
        return Container(
          color: Colors.green,
        );
      } else {
        return ConstrainedBox(
          constraints: BoxConstraints(maxHeight: 50),
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                for (var item in items)
                  Padding(
                    padding: const EdgeInsets.only(left: 50, right: 50),
                    child: Text(
                      '${item.shopName}',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                  ),
              ],
            ),
          ),
        );
      }
    });
  }

    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.

Comments are closed.