Inicio » Cursos » Flutter App Restaurant con Carrito

Curso Flutter App Restaurant con Carrito

Lección: 9 ➜ Mostrar la carta

Mostrar Carta platos, bebidas, postres | CURSO FLUTTER APP RESTAURANT CON CARRITO DE COMPRA [Part 9]

Lección 9: Mostrar la carta

En nuestra pantalla Carta debemos mostrar los productos del menu del restaurant que son tres:

  1. Platos
  2. Bebidas
  3. Postres

Implementamos un gridView para mostrar una columna de 2 elementos, recorremos la clase Items con platos, bebidas y postres.

Entonces ya podemos hacer uso de la clase Carta para esto veamos como:

Container(
                padding: EdgeInsets.all(10),
                child: GridView.builder(
                    itemCount: platos.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: MediaQuery.of(context).size.width /
                            (MediaQuery.of(context).size.height / 1.15),
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 2),
                    itemBuilder: (context, index) {
                      return Container(
                        margin: EdgeInsets.all(5),
                        padding: EdgeInsets.all(5),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(10),
                            boxShadow: [
                              BoxShadow(
                                  color: Color(0x000005cc),
                                  blurRadius: 30,
                                  offset: Offset(10, 10))
                            ]),
                        child: Column(
                          children: <Widget>[
                            Image.asset("assets/img/" + platos[index].imagen),
                            Text(
                              platos[index].nombre,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            Padding(
                              padding: EdgeInsets.only(top: 20),
                              child: Text(
                                "S/." + platos[index].precio.toString(),
                                style: TextStyle(fontSize: 16),
                              ),
                            ),
                            RaisedButton.icon(
                              onPressed: () {
                               
                              },
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(20.0))),
                              color: Colors.amberAccent,
                              textColor: Colors.red,
                              icon: Icon(Icons.add_shopping_cart),
                              label: Text("Agregar"),
                              elevation: 0,
                            )
                          ],
                        ),
                      );
                    }),
              ),

Vemos que esto puede estar bien para un tabbarview pero tenemos dos más, pues  se implementa de la misma manera pero cambiando la variable platos por postres y bebidas.


2410 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