How to use BLoC pattern via flutter_bloc library?-CodePudding

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();
                    },
                  ),
                ),
              )
          );
        })
    );
  }
}

CodePudding user response：

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)) );
   ...
  }
}