Estoy usando un StatelesWidget con GridView.builder y el gestor de estado flutter bloc, al momento de ejecutar un evento(contador) en unos de los items del gribview no realiza la actualización en pantalla, se muestra recien los cambios en pantalla cuando hago un Hot Reaload. He modificado el BlocBuilder en varios puntos y obtengo el mismo resultado, no se si estoy implementado mal el gestor de estado, la unica opción que veo es usar un StatefulWidget para usar el setState y visualizar los cambios, aqui le dejo mis código y gracias por su tiempo.
class ProductListSreen extends StatelessWidget {
const ProductListSreen({super.key});
@override
Widget build(BuildContext context) {
final titleStyle = Theme.of(context).textTheme.titleLarge;
return BlocBuilder<ProductBloc, ProductState>(
builder: (context, state) {
if (state.listProduct.isEmpty) {
return const Center(child: CircularProgressIndicator());
}
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CategoryHorizontalListview( title: 'Categorias', titleStyle: titleStyle,),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
child: Text('Productos', style: titleStyle)
),
const SizedBox( height: 12),
Expanded(
child: GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.6,
crossAxisSpacing: 2,
),
itemCount: state.listProduct.length,
itemBuilder: (contex, i) =>
_crearItem(context, state.listProduct[i]),
),
),
],
);
},
);
}
Widget _crearItem(BuildContext context, ProductModel producto) {
return Stack(
children: [
Card(
elevation: 0,
color: Colors.transparent,
child: InkWell(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
SizedBox(
height: 80.0,
width: double.infinity,
child: (producto.image.isEmpty)
? Image.asset('assets/no-image.jpg')
: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: FadeInImage(
placeholder:
const AssetImage('assets/jar-loading.gif'),
height: 100.0,
width: double.infinity,
fit: BoxFit.cover,
image: NetworkImage(producto.image),
)
),
),
const SizedBox(height: 8),
SizedBox(
width: double.infinity,
child: Text(
'Bs. ${producto.price}',
style: const TextStyle( fontSize: 15, fontWeight: FontWeight.bold)
)
),
SizedBox(
width: double.infinity,
child: Text(
'${producto.title[0].toUpperCase()}${producto.title.substring(1)}',
style: const TextStyle(fontSize: 12)
)
),
SizedBox(
width: double.infinity,
child: Text(producto.description1,
style: const TextStyle(fontSize: 12)
)
),
Expanded(
child: SizedBox(
width: double.infinity,
child: Text(producto.description2,
style: const TextStyle(fontSize: 12)
)
),
),
],
),
),
onTap: () {
context.read<ProductBloc>().add(ProductoEvent(producto));
Navigator.pushNamed(context, 'product');
},
),
),
Positioned(
right: 7,
child: SizedBox(
width: 35,
height: 35,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
side: const BorderSide( width: 2, color: Color.fromARGB(255, 74, 224, 79)),
backgroundColor: Colors.transparent,
shape: const CircleBorder(),
padding: const EdgeInsets.all(2),
),
child: const Icon(Icons.add, color: Color.fromARGB(255, 74, 224, 79)),
onPressed: (){
context.read<ShoopingCartBloc>().add(AddProductEvent(producto, 1, true));
},
),
),
),
Visibility(
visible: true,
child: Positioned(
right: 7,
child: Container(
height: 38,
width: 108,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all( color: const Color.fromARGB(255, 74, 224, 79)),
borderRadius: BorderRadius.circular(5)
),
child: Stack(
children: [
Positioned(
top: -6,
right: -5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.remove_circle_outline, size: 30),
color: const Color.fromARGB(255, 74, 224, 79),
onPressed: (){
producto.quantity--;
context.read<ProductBloc>().add(QuantityUpdate(producto));
}
),
SizedBox(
width: 20,
child: Text( producto.quantity.toString(),
style: const TextStyle(fontSize: 15.0)
),
),
IconButton(
icon: const Icon(Icons.add_circle_outline, size: 30),
color: const Color.fromARGB(255, 74, 224, 79),
onPressed: (){
producto.quantity++;
context.read<ProductBloc>().add(QuantityUpdate(producto));
}
),
],
),
),
],
),
),
),
),
],
);
}
Este es ProductBloc:
class ProductBloc extends Bloc<ProductEvent, ProductState> {
final ProductProvider productProvider;
final CategoryProvider categoryProvider;
ProductBloc(this.productProvider, this.categoryProvider) : super(const
ProductState()) {
on<GetProductsEvent>( _onGetProducts);
on<ProductoEvent>( _onProducto);
on<QuantityUpdate>( _onQuantityUpdate);
on<OnSearchProduct>( _onSearchProduct);
on<OnTitleQuery>( _onTitleQuery);
on<OnResetQuery>( _onResetQuery);
on<OnUltimoQuery>( _onUltimoQuery);
}
void _onQuantityUpdate( QuantityUpdate event, Emitter emit){
emit(
state.copyWith(
listProduct: state.listProduct.map((e) => e.id == event.product.id? event.product
: e).toList()
)
);
}
}