如何在flutter应用程序中创建玻璃小部件？

Question

我需要在颤振中制作玻璃卡视图小部件（如图）。 它的模式不使用包。但如果没有解决方案，如果有一个包，也感谢您介绍该包。

Answer 1

尝试使用

glassmorphism

配套也可参考

glassmorphism_ui

Answer 2

您可以使用GLASS套件。

这个套件是

Null safety

，也支持

ANDROID IOS LINUX MACOS WEB WINDOWS

平台。

Answer 3

class GlassMorphismExample extends StatelessWidget {
  const GlassMorphismExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Center(
        child: GlassMorphism(
          child: Container(
            alignment: Alignment.center,  
            width: MediaQuery.of(context).size.width * 0.8,
            height: MediaQuery.of(context).size.height * 0.8,
            child: const Text(
              "Glass Morphism",
              style: TextStyle(fontSize: 35),
            ),
          ),
          end: 0.5,
          start: 0.3,
        ),
      ),
    );
  }
}

class GlassMorphism extends StatelessWidget {
  final Widget child;
  final double start;
  final double end;
  const GlassMorphism({
    Key? key,
    required this.child,
    required this.start,
    required this.end,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.white.withOpacity(start),
                Colors.white.withOpacity(end),
              ],
              begin: AlignmentDirectional.topStart,
              end: AlignmentDirectional.bottomEnd,
            ),
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            border: Border.all(
              width: 1.5,
              color: Colors.white.withOpacity(0.2),
            ),
          ),
          child: child,
        ),
      ),
    );
  }
}

结果

Answer 4

谢谢大家。我写了自己的包来回答我的问题。 https://pub.dev/packages/flutter_glass

Answer 5

您可以使用内置的

BackdropFilter

Widget，并将

ImageFilter.blur

作为子级来获得相同的玻璃效果