Trabajar con pestañas

Trabajar con pestañas es un patrón común en apps que siguen las directrices de Material Design. Flutter incluye una forma conveniente de crear diseños de pestañas como parte de la librería material.

Esta receta crea un ejemplo con pestañas utilizando los siguientes pasos;

1. Crea un TabController.
2. Crear las pestañas.
3. Crear contenido para cada pestaña.

Para que las pestañas funcionen, necesitas mantener sincronizadas la pestaña seleccionada y las secciones de contenido. Este es el trabajo del TabController.

Ya sea que crees un TabController manualmente, o automáticamente usando un widget DefaultTabController.

Usar DefaultTabController es la opción más simple, ya que crea un TabController y lo hace disponible para todos los widgets descendientes.

return MaterialApp(
  home: DefaultTabController(length: 3, child: Scaffold()),
);

Cuando se selecciona una pestaña, esta necesita mostrar contenido. Puedes crear pestañas usando el widget TabBar. En este ejemplo, crea un TabBar con tres widgets Tab y colócalo dentro de un AppBar.

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        bottom: const TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
      ),
    ),
  ),
);

Por defecto, el TabBar busca hacia arriba en el árbol de widgets el DefaultTabController más cercano. Si estás creando manualmente un TabController, pásalo al TabBar.

Ahora que tienes pestañas, muestra el contenido cuando se seleccione una pestaña. Para este propósito, usa el widget TabBarView.

body: const TabBarView(
  children: [
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
),