是否可以在 Flutter 的自定义绘画中提供渐变模糊效果，如下图所示？

Question

我正在对下面的输出进行编码，我得到了我想要的设计，但无法在画布内获得模糊效果。

这是我试图构建的输出，

这就是我尝试过的

这是代码，

class MyCustomPainter extends CustomPainter {

@override



 void paint(Canvas canvas, Size size) {
    Paint paint0 = Paint()
      ..color = const Color.fromARGB(128,255,255,255)
    ..style = PaintingStyle.fill
    ..strokeWidth = 2.0;

Path path0 = Path();
path0.moveTo(size.width * 0.1500300, size.height * 0.1238500);
path0.cubicTo(
    size.width * 0.0037200,
    size.height * 0.1023500,
    size.width * 0.0522600,
    size.height * 0.7552500,
    size.width * 0.1500500,
    size.height * 0.8761750);
path0.cubicTo(
    size.width * 0.2767600,
    size.height * 0.8761750,
    size.width * 0.7234100,
    size.height * 0.8735500,
    size.width * 0.8501100,
    size.height * 0.8735500);
path0.cubicTo(
    size.width * 0.9464300,
    size.height * 0.7575750,
    size.width * 0.9946900,
    size.height * 0.0944750,
    size.width * 0.8496900,
    size.height * 0.1268750);
path0.cubicTo(
    size.width * 0.7230200,
    size.height * 0.1268750,
    size.width * 0.5303400,
    size.height * 0.1263500,
    size.width * 0.1500300,
    size.height * 0.1238500);
path0.close();
canvas.drawPath(path0, paint0);


}

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

提前致谢！

Answer 1

您无需为一切都可以通过小部件CustomPainter完成的事情而烦恼。ContainerBackdropFilter

代码示例

class BlurredBottomBar extends StatelessWidget {
  const BlurredBottomBar({
    super.key,
    required this.items,
    required this.currentIndex,
    required this.onItemTapped,
  });

  final int currentIndex;
  final void Function(int index) onItemTapped;
  final List<IconData> items;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final bottomNavigationBarTheme = theme.bottomNavigationBarTheme;

    return Container(
      margin: const EdgeInsets.all(12),
      padding: const EdgeInsets.all(12),
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.white,
          strokeAlign: BorderSide.strokeAlignOutside,
        ),
        borderRadius: const BorderRadius.vertical(
          top: Radius.circular(9),
          bottom: Radius.circular(36),
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            for (int i = 0; i < items.length; i++)
              IconButton(
                onPressed: () => onItemTapped(i),
                icon: Icon(
                  items[i],
                  color: i == currentIndex
                      ? bottomNavigationBarTheme.selectedItemColor
                      : bottomNavigationBarTheme.unselectedItemColor,
                ),
              ),
          ],
        ),
      ),
    );
  }
}

用法

Scaffold(
  extendBody: true,
  bottomNavigationBar: BlurredBottomBar(
    currentIndex: 0,
    items: const [
      Icons.home,
      Icons.grid_view,
      Icons.notifications_outlined,
      Icons.settings_outlined,
    ],
    onItemTapped: (index) {
      // ...
    },
  ),
  body: ...,
);

截屏

您可以在 zapp.run 上尝试完整的示例