Flutter Windows app blur effect animation issue

Question

When I try to run below code in windows and chrome, the blur effect is different. Images are attached below.

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  }) : super();

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: CurrencyCard(
          lgColors: const [
            Colors.green,
            Colors.black54,
          ],
          icon: Icons.add,
          percent: '35',
          price: '232,40',
          theme: Theme.of(context),
          iconBgColor: Colors.green,
          showChart: false,
          shadowColor: Color.alphaBlend(Colors.green, Colors.amber),
        ),
      ),
    );
  }
}

class CurrencyCard extends StatefulWidget {
  final Color iconBgColor, shadowColor;

  const CurrencyCard({
    super.key,
    required this.lgColors,
    required this.iconBgColor,
    required this.icon,
    required this.percent,
    required this.price,
    required this.theme,
    required this.shadowColor,
    this.showChart = true,
  });

  final List<Color> lgColors;
  final IconData icon;

  final String price, percent;
  final ThemeData theme;

  final bool showChart;

  @override
  State<CurrencyCard> createState() => _CurrencyCardState();
}

class _CurrencyCardState extends State<CurrencyCard> {
  double elevation = 16;
  var angle = 0.0;

  var position = const Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onHover: (event) => setState(() {
        elevation = 48;
        angle = 0.1;
        position = event.localPosition.translate(-54, -54);
      }),
      onExit: (event) => setState(() {
        elevation = 16;
        angle = 0;
      }),
      child: Transform(
        transform: Matrix4.rotationZ(angle),
        filterQuality: FilterQuality.high,
        alignment: Alignment.bottomLeft,
        child: Card(
          elevation: elevation,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(32),
          ),
          shadowColor: widget.shadowColor,
          child: Container(
            width: MediaQuery.sizeOf(context).width * 0.4,
            height: MediaQuery.sizeOf(context).height * 0.3,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(32),
              gradient: SweepGradient(
                colors: widget.lgColors,
                center: Alignment.topRight,
                stops: const [0.2, 0.3],
              ),
            ),
            child: Stack(
              children: [
                /// blur effect on top of card wherever mouse goes
                if (elevation == 48)
                  Positioned(
                    left: position.dx,
                    top: position.dy,
                    child: BackdropFilter(
                      filter: ImageFilter.blur(
                        sigmaX: 10,
                        sigmaY: 10,
                      ),
                      child: ImageFiltered(
                        imageFilter: ImageFilter.blur(
                          sigmaX: 10,
                          sigmaY: 10,
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                            color: widget.iconBgColor,
                            shape: BoxShape.circle,
                          ),
                          width: 40,
                          height: 40,
                        ),
                      ),
                    ),
                  ),

                /// Card rest of the contents
                Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(24),
                              color: widget.iconBgColor,
                            ),
                            padding: const EdgeInsets.all(8),
                            child: Icon(
                              widget.icon,
                              size: 40,
                              color: Colors.black,
                            ),
                          ),
                          const Icon(Icons.add),
                        ],
                      ),
                      const SizedBox(height: 32),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          RichText(
                            text: TextSpan(
                              text: '\$${widget.price}\n',
                              style:
                                  widget.theme.textTheme.displaySmall?.copyWith(
                                fontWeight: FontWeight.bold,
                              ),
                              children: [
                                TextSpan(
                                  text: '${widget.percent}% This week',
                                  style: widget.theme.textTheme.bodyLarge
                                      ?.copyWith(color: Colors.white38),
                                )
                              ],
                            ),
                          ),
                          if (widget.showChart)
                            Padding(
                              padding: const EdgeInsets.only(right: 32.0),
                              child: Icon(
                                Icons.show_chart_outlined,
                                size: 54,
                                color: widget.iconBgColor,
                              ),
                            )
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

• see the output at (https://dartpad.dev/?id=e75b493dae1287757c5e1d77a0dc73f1)

Below are the app running in windows and chrome

Browser App Debug output

Windows app debug output

Blur effect is good in chrome. It should be solved in windows. Windows effect is very weird.