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 del Curso Flutter y Laravel Tienda Delivery
¿Cómo implementar la Pantalla de Productos en Flutter?
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(
...
builder: (context, datos) {
if (datos.hasData) {
return ListView.builder(
....
itemCount:
datos.data.length == null ? 0 : datos.data.length,
itemBuilder: (c, i) {
return Column(
children: <Widget>[
....
Container(
child: FutureBuilder(
....
builder: (ccontext, ddatos) {
if (ddatos.hasData) {
return GridView.builder(
.....
itemBuilder: (cc,ii){
return Container(
....
child: Column(
children: <Widget>[
GestureDetector(
.....
],
),
);
});
} else {
return CircularProgressIndicator();
}
}),
)
],
);
});
} else {
return CircularProgressIndicator();
}
},
),
)
],
),
),
);
}
}
165 visitas
© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021