Inicio » Cursos » Flutter App Restaurant con Carrito

Curso Flutter App Restaurant con Carrito

Lección: 5 ➜ Tabs o secciones

Crear Tabs con el Widget TabsController, TabBar, TabBarView Flutter para la Carta | CURSO DE FLUTTER APP RESTAURANT CON CARRITO DE COMPRA [Parte 5]

Lección 5: Tabs o secciones

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(
               
              )
            ],
          ),

1588 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023