Curso Flutter App Restaurant con Carrito
Capitulo 5 ➜ Tabs o secciones
Implementar TabsController en Flutter para mostrar la carta Menú
Crear Tabs con el Widget TabsController, TabBar, TabBarView Flutter para la Carta | CURSO DE FLUTTER APP RESTAURANT CON CARRITO DE COMPRA [Parte 5]
Para crear tabs usamos tabscontroller veamos
Primero debemos modificar el Scaffold encapsulandolo con TabsController
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(...);
);
}
En la sección AppBar de nuestro Scaffold
appBar: AppBar(
title: Text("CARTA"),
backgroundColor: Colors.amber,
elevation: 0,
bottom: TabBar(
labelColor: Colors.red,
indicatorColor: Colors.red,
indicatorSize: TabBarIndicatorSize.label,
tabs: <Widget>[
new Tab(
child: Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Text("PLATOS"),
),
),
new Tab(
child: Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Text("BEBIDAS"),
),
),
new Tab(
child: Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Text("POSTRES"),
),
)
],
),
),
Luego en nuestra sección body
body: TabBarView(
children: <Widget>[
Container(
),
Container(
),
Container(
)
],
),
1667 visitas
Sigue con el curso: Capítulo 6 – Modelo Carta
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar
