➜ Implementación de la pantalla Productos
¿Cómo implementar la Pantalla de Productos en Flutter? | Implementación Pantalla Productos organizados por subcategorias, para que el usuario vea los productos según la categoría elegida.
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.
- Se recibe el ID del producto enviado como parámetro desde la PantallaCategoria
- Se realiza una consulta para extraer las Subcategorias correspondientes a dicha categorìa
- 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();
}
},
),
)
],
),
),
);
}
}
1718 visitas
Capítulo 45 – Implementación Pantalla Producto »
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
