Inicio » Cursos » Flutter App Restaurant con Carrito

Curso Flutter App Restaurant con Carrito

Capitulo 9 ➜ Mostrar la carta

Mostrar la carta

¿Cómo mostrar productos desde una clase en Flutter? App Restaurant

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

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.


2449 visitas

Sigue con el curso: Capítulo 10 – Implementación de Provider

Descarga el código del proyecto

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

Comprar

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