flutterrive

How to detect clicks in a certain area of Flutter rive

I want to make star rating that return appropriate value (1 until 5 based on which star user click on).

But i cannot achieve that. Why it's only return zero.

SMINumber? _rating;

void _onRiveInit(Artboard artboard) {
   final controller = StateMachineController.fromArtboard(artboard, 'State Machine 1');
   artboard.addController(controller!);
   _rating = controller.findInput<double>('Rating') as SMINumber;
}

void _hitBump() => debugPrint("${_rating!.value}");

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: Center(
         child: GestureDetector(
            child: RiveAnimation.network(
               'https://public.rive.app/community/runtime-files/3145-6649-star-rating.riv',
               fit: BoxFit.cover,
               onInit: _onRiveInit,
            ),
            onTap: _hitBump,
         ),
      ),
   );
}

enter image description here

Solution

  • Add onStateChange and it will listen rive animation value.

    controller = StateMachineController.fromArtboard(
   artboard,
   'State Machine 1',
   onStateChange: (stateMachineName, animationName) {
      print(stateMachineName);
      print(animationName);
      print(_rating.value);
   },
);

    result:

    I/flutter ( 5800): State Machine 1
I/flutter ( 5800): 4_stars
I/flutter ( 5800): 4.0