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

Question

我需要在 flutter 中制作玻璃卡片视图小部件（如图像）。它的模式不使用包。但是如果没有解决办法，如果有包的话，也谢谢介绍那个包。

Answer 1

尝试使用glassmorphism package also refer 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

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

How to create glass widget in flutter app?

flutter

flutter-layout