➜ Implementación Pantalla Categoria con Sqflite
Implementación de la pantalla Categoria para mostrar datos de la BD | Usaremos el widget GridView para mostrar las categorías de los productos en la pantalla.
Usaremos el widget GridView para mostrar las categorías de los productos en la pantalla.
- Vamos a usar el Widget GridView
- Usaremos una consulta a la base de datos para inflar dicho widget con FutureBuilder
- Aplicaremos Column para mostrar la imagen, el nombre, el precio
@override
Widget build(BuildContext context) {
return Scaffold(
key: _globalKey,
appBar: AppBar(title: Text("STORE"),
),
backgroundColor: Colors.orangeAccent,
body: Container(
child: FutureBuilder(
future: BD.getCategoria("1"),
builder: (context,datos){
if(datos.hasData){
return GridView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width/(MediaQuery.of(context).size.height/1.5)
),
itemCount: datos.data.length == null? 0 : datos.data.length ,
itemBuilder: (c,i){
print(i.toString());
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: <Widget>[
Expanded(
child: CachedNetworkImage(
imageUrl: "http://arequipalocal.com/img/categorias/"+datos.data[i].urlfoto,
),
),
RaisedButton(
onPressed: (){
print(datos.data[i].toString());
Navigator.push(context,
MaterialPageRoute(
builder: (context) => PantallaProductos(datos.data[i])
)
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
color: Colors.red,
textColor: Colors.white,
child: Text(datos.data[i].nombre),
)
],
),
);
}
);
}else{
return Center( child: Text("DATOS VACIOS"),);
}
},
),
),
);
1760 visitas
Capítulo 44 – Implementación de la pantalla Productos »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar¡Qué aprenderás?
tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner
