Inicio » Cursos » Flutter y Laravel Tienda Delivery

Implementación de la pantalla Productos | Curso Flutter y Laravel Tienda Delivery

Implementación Pantalla Productos organizados por subcategorias, para que el usuario vea los productos según la categoría elegida.

Lección 44: Implementación de la pantalla Productos

Implementación Pantalla Productos organizados por Subcategorias

En esta sección usaremos una combinación de Widgets Lisview y GridView para mostrar las subcategorias con sus correspondientes productos.

  1. Se recibe el ID del producto enviado como parámetro desde la PantallaCategoria
  2. Se realiza una consulta para extraer las Subcategorias correspondientes a dicha categorìa
  3. Se extrae y muestra los productos que sean conincidentes con la Subcategoria.
import 'dart:convert';

import 'package:arequipalocal/api/Api.dart';
import 'package:arequipalocal/basededatos/Bd.dart';
import 'package:arequipalocal/carrito/CarritoCompra.dart';
import 'package:arequipalocal/modelo/Categoria.dart';
import 'package:arequipalocal/pantalla/PantallaCarrito.dart';
import 'package:arequipalocal/pantalla/PantallaInicio.dart';
import 'package:arequipalocal/pantalla/PantallaProducto.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:provider/provider.dart';

class PantallaProductos extends StatefulWidget {
  PantallaProductos(this.categoria);
  Categoria categoria;
  @override
  _PantallaProductosState createState() =>
      _PantallaProductosState(this.categoria);
}

var BD = DBHelper();

class _PantallaProductosState extends State<PantallaProductos> {
  final GlobalKey<ScaffoldState> _globalKey = new GlobalKey<ScaffoldState>();

  _PantallaProductosState(this.categoria);
  Categoria categoria;

  @override
  Widget build(BuildContext context) {
      return Scaffold(
        key: _globalKey,
        appBar: AppBar(
            title: Text(categoria.nombre),
            
        ),
        backgroundColor: Colors.orangeAccent,
        body: Container(
          child: ListView(
            shrinkWrap: true,
            physics: ScrollPhysics(),
            children: <Widget>[
              Container(
                child: FutureBuilder(
                  future: BD.getSubcategoria(
                      "categorias_id =" + categoria.id.toString()),
                  builder: (context, datos) {
                    if (datos.hasData) {
                      return ListView.builder(
                          shrinkWrap: true,

                          itemCount:
                          datos.data.length == null ? 0 : datos.data.length,
                          itemBuilder: (c, i) {
                            return Column(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.only(top: 20,bottom: 10),
                                  child: Text(datos.data[i].nombre,style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),),
                                ),
                                Container(
                                  child: FutureBuilder(
                                      future: BD.getProducto(
                                          "subcategorias_id =" +
                                              datos.data[i].id.toString()),
                                      builder: (ccontext, ddatos) {
                                        if (ddatos.hasData) {
                                          return GridView.builder(
                                              shrinkWrap: true,
                                              itemCount: ddatos.data.length == null ? 0 : ddatos.data.length,
                                              gridDelegate:
                                              SliverGridDelegateWithFixedCrossAxisCount(
                                                  crossAxisCount: 2,
                                                  childAspectRatio:
                                                  MediaQuery.of(context)
                                                      .size
                                                      .width /
                                                      (MediaQuery.of(
                                                          context)
                                                          .size
                                                          .height /
                                                          1.3)),
                                              itemBuilder: (cc,ii){
                                                return Container(
                                                  padding: EdgeInsets.all(10),
                                                  margin: EdgeInsets.all(10),
                                                  decoration: BoxDecoration(
                                                      color: Colors.white,
                                                      borderRadius: BorderRadius.circular(10)
                                                  ),
                                                  child: Column(
                                                    children: <Widget>[
                                                      GestureDetector(
                                                        child: CachedNetworkImage(
                                                          imageUrl: "http://arequipalocal.com/img/productos/"+ddatos.data[ii].urlfoto,
                                                        ),
                                                        onTap: (){
                                                          Navigator.of(context).push(MaterialPageRoute(
                                                              builder: (BuildContext) =>PantallaProducto(ddatos.data[ii])
                                                          ));
                                                        },
                                                      ),
                                                      Text(ddatos.data[ii].nombre),
                                                      Text("USD " + ddatos.data[ii].precio.toString(), style: TextStyle(
                                                          fontWeight: FontWeight.w900, fontSize: 15
                                                      ),),
                                                      
                                                    ],
                                                  ),
                                                );
                                              });
                                        } else {
                                          return CircularProgressIndicator();
                                        }
                                      }),
                                )
                              ],
                            );
                          });
                    } else {
                      return CircularProgressIndicator();
                    }
                  },
                ),
              )
            ],
          ),
        ),
      );
   

  }

}

 


754 visitas

Curso Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Delivery

Descarga el código fuente del proyecto

USD 37.00 67.00


COMPRAR CURSO

Codea App
Codea App FullStack

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022