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.

Flutter pestañas dentro de página/vista sin Scaffold.

¿Tengo que usar Tabbar, TabBarView y TabbarController sólo con Scaffold y AppBar?

Quiero que cada widget que muestre contenido tenga de 2 a 3 pestañas para cambiar una vista (así que quiero pestañas dentro de Column o Container). No quiero usar Scaffold para eso, porque mi aplicación está diseñada de tal manera que tendría que anidar Scaffold, lo cual no está recomendado por la documentación. Así que preparé algo como esto:

@immutable
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  final List<tab> _homeScreenTabs = const <tab>[
    Tab(text: 'Tab1', icon: Icon(Icons.camera)),
    Tab(text: 'Tab2', icon: Icon(Icons.camera)),
    Tab(text: 'Tab3', icon: Icon(Icons.camera)),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _homeScreenTabs.length,
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            TabBar(
              labelColor: Colors.blue,
              tabs: _homeScreenTabs,
            ),
            Expanded(
              child: TabBarView(
                children: _homeScreenTabs.map((Tab tab) {
                  final String label = tab.text?.toLowerCase() ?? "";
                  return Center(
                    child: Text(
                      'This is the home $label',
                      style:
                          const TextStyle(color: Colors.black87, fontSize: 18),
                    ),
                  );
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Funciona, pero la pregunta es: ¿es correcto usar TabBar de esa manera? La documentación solo menciona su uso dentro de Scaffold.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Si bien se recomienda en la documentación utilizar TabBar, TabBarView y TabbarController con Scaffold y AppBar, no es estrictamente necesario. Siempre y cuando los widgets TabBar y TabBarView estén ubicados dentro de un widget DefaultTabController y el TabController esté inicializado correctamente con el número esperado de pestañas, se pueden utilizar con cualquier widget de diseño, incluyendo Column y Container.

    Sin embargo, es importante tener en cuenta que no se recomienda anidar múltiples widgets Scaffold, ya que esto puede llevar a un comportamiento y errores inesperados. En situaciones en las que necesites mostrar múltiples AppBar, por ejemplo, puedes utilizar un widget PreferredSize para definir la altura de la AppBar y luego pasarlo como hijo a otro widget, como un Column.

Comments are closed.