Lección 5 del Curso App Restaurant con Carrito

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

Tabs o secciones
Tabs o secciones

Implementar TabsController en Flutter para mostrar la carta Menú

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

¿Cómo crear secciones o tabs con TabsController en Flutter ?

Los tabs son una estructura que permite dividir el contenido de una aplicación para una mejor distribución u orden ofreciendo una mejor experiencia de usuario con la interactividad que proporciona. Para crear tabs usamos tabscontroller veamos los siguientes pasos:

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

 


COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

167 visitas

Logo Codea App

Develop your code

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020