Lección 9: Mostrar la carta
En nuestra pantalla Carta debemos mostrar los productos del menu del restaurant que son tres:
- Platos
- Bebidas
- 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