How to use BLoC pattern via flutter_bloc library? - flutter

Question

I'm writting a small tamagotchi app using Flutter and now I'm learning how to use flutter_bloc lib.
When user tap on a pet image on a screen, it must redraw a CircularPercentIndicator widget, but it won't work. I'm trying to connect a view with a bloc using a BlocBuilder and BlocProvider classes, but it did not help.
After tapping a pet widget, animation is forwarded, but the state of saturationCount and CircularPercentIndicator hasn't been updated.
Here is my BLoC for pet feeding:
class PetFeedingBloc extends Bloc<SaturationEvent, SaturationState> {
PetFeedingBloc()
: super(const SaturationState(saturationCount: 40.0)) {
on<SaturationSmallIncrementEvent>((event, emit) => state.saturationCount + 15.0);
on<SaturationBigIncrementEvent>((event, emit) => state.saturationCount + 55.0);
on<SaturationDecrementEvent>((event, emit) => state.saturationCount - 2.0);
}
}
In SaturationBarWidget class I'm trying to connect a percent indicator in a widget with a BLoC, but it does not work. Here it is:
class SaturationBarWidget extends StatefulWidget {
const SaturationBarWidget({Key? key}) : super(key: key);
#override
State<SaturationBarWidget> createState() => SaturationBarWidgetState();
}
class SaturationBarWidgetState extends State<SaturationBarWidget> {
#override
void initState() {
Timer? timer;
timer = Timer.periodic(const Duration(milliseconds: 3000), (_) {
setState(() {
context.read<PetFeedingBloc>().add(SaturationDecrementEvent());
if (context.read<PetFeedingBloc>().state.saturationCount <= 0) {
timer?.cancel();
}
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return BlocBuilder<PetFeedingBloc, SaturationState>(builder: (context, state){
return CircularPercentIndicator(
radius: 50.0,
lineWidth: 20.0,
animateFromLastPercent: true,
percent: context.read<PetFeedingBloc>().state.saturationCount / 100,
center: const Icon(
Icons.emoji_emotions_outlined,
size: 50.0,
),
backgroundColor: Colors.blueGrey,
progressColor: Colors.blue,
);
});
}
}
And here it is my PetWidget class with image that need to be tapped:
class PetWidget extends StatefulWidget {
const PetWidget({Key? key}) : super(key: key);
#override
State<PetWidget> createState() => PetWidgetState();
}
class PetWidgetState extends State<PetWidget> with TickerProviderStateMixin {
late Animation<Offset> _animation;
late AnimationController _animationController;
static GlobalKey<SaturationBarWidgetState> key = GlobalKey();
bool reverse = true;
Image cat = Image.asset('images/cat.png');
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 4));
_animation = Tween<Offset>(begin: Offset.zero, end: const Offset(1, 0))
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.elasticIn));
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
//_animationController.forward();
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Center(child:
BlocBuilder<PetFeedingBloc, SaturationState>(builder: (context, state) {
return Center(
child: SizedBox(
width: 300,
height: 400,
child: SlideTransition(
position: _animation,
child: GestureDetector(
child: cat,
onDoubleTap: () {
context.read<PetFeedingBloc>().add(SaturationBigIncrementEvent());
_animationController.forward();
},
onTap: () {
context.read<PetFeedingBloc>().add(SaturationSmallIncrementEvent());
_animationController.forward();
},
),
),
)
);
})
);
}
}

Answer 1

I think you have to call the emit method in you
PetFeedingBloc
class PetFeedingBloc extends Bloc<SaturationEvent, SaturationState> {
PetFeedingBloc()
: super(const SaturationState(saturationCount: 40.0)) {
on<SaturationSmallIncrementEvent>((event, emit) => emit(SaturationState(saturationCount: state.saturationCount + 15.0)) );
...
}
}