Flutter compass rotation is laggy due to stream values abrupt change when phone is rotated

Question

Flutter compass is giving very laggy performance on real device with transform.rotate. Is there any better animation for this purpose to smoothen out the rotation of compass widget.

My code is as below

  class _AnimationRotationState extends State<AnimationRotation>
    with SingleTickerProviderStateMixin {
    final double angleMinus = pi / 4.1;
    double _changing = 0.0;
    Stream<QiblahDirection> qiblahStream = FlutterQiblah.qiblahStream;

    @override
    void initState() {
       super.initState();
    _qiblahStream();
    }
 
    void _qiblahStream() {
    qiblahStream.listen((event) {
      setState(() {
        var value = event.qiblah;
        _changing = -2 * pi * (value / 360);
      });
    });
   }


  @override
  void dispose() {
    // qiblahStream.
    super.dispose();
  }

@override
  Widget build(BuildContext context) {   
    return Stack(clipBehavior: Clip.hardEdge, children: [     
     Transform.rotate(
        angle: _changing,
        child: Transform.rotate(
          angle: 0.00,
          child: Image.asset("assets/compass.png"),
        ),
      ),

Answer 1

That's because you are using a setState way, you can use an AnimatedBuilder above the animated part which is above the Transform widget and pass the animation controller, so when ever the animation controller is forwarded only the part that need to be animated will be rebuilt.