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.


1889 visitas

Curso Flutter App Restaurant con Carrito

Curso Flutter App Restaurant con Carrito

Descarga el código fuente del proyecto

USD 17.00 27.00


COMPRAR CURSO

Codea App
Codea App FullStack

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

You Fb Tik Pin

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