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.
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
Descarga el código fuente del proyecto
USD 37.00 67.00
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022