Implementación Pantalla Categoria con Sqflite

Lección 43 del Curso Flutter y Laravel Tienda Delivery

Usaremos el widget GridView para mostrar las categorías de los productos en la pantalla.

Implementación Pantalla Categoria con Sqflite

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

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(
            ....
            builder: (context,datos){
              if(datos.hasData){
                return GridView.builder(
                   
                   ....
                    itemCount: datos.data.length == null? 0 : datos.data.length ,
                    itemBuilder: (c,i){
                      return Container(
                        ....
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              child: CachedNetworkImage(
                                imageUrl: "http://arequipalocal.com/img/categorias/"+datos.data[i].urlfoto,
                              ),
                            ),
                            RaisedButton(
                              onPressed: (){
                                ....
                              },
                              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"),);
              }
            },
          ),
        ),
      );
 

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

16 visitas

Lecciones del curso

27. Autenticación con JWT
28. Enviar Productos en JSON
29. Recibir pedidos en Laravel
VER MÁS CURSOS
Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020