Implementación Pantalla Categoria con Sqflite | Curso Flutter y Laravel Tienda Delivery

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"),);
              }
            },
          ),
        ),
      );