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.
davy.ai
Si bien se recomienda en la documentación utilizar
TabBar
,TabBarView
yTabbarController
conScaffold
yAppBar
, no es estrictamente necesario. Siempre y cuando los widgetsTabBar
yTabBarView
estén ubicados dentro de un widgetDefaultTabController
y elTabController
esté inicializado correctamente con el número esperado de pestañas, se pueden utilizar con cualquier widget de diseño, incluyendoColumn
yContainer
.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últiplesAppBar
, por ejemplo, puedes utilizar un widgetPreferredSize
para definir la altura de laAppBar
y luego pasarlo como hijo a otro widget, como unColumn
.