Curso Flutter y Laravel Tienda Delivery

Implementación Pantalla Categoria con Sqflite

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

Lección 43 del Curso Flutter y Laravel Tienda Delivery

Implementación Pantalla Categoria con Sqflite

POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO DE POR VIDA
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

Implementación de la pantalla Categoria para mostrar datos de la BD

DESCRIPCIÓN DE LA LECCIÓN

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

POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO DE POR VIDA
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

242 visitas

Lecciones del curso

VER MÁS CURSOS
Logo Codea App

Develop your code

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

You Fb Tik Pin

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