Inicio » Cursos » Flutter App Restaurant con Carrito

Mostrar la carta | Curso Flutter App Restaurant con Carrito

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.


2095 visitas

Cursos que pueden interesarte

Codea App Codea App

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2023