How to create glass widget in flutter app?

Question

I need to make glass card view widget in the flutter (like image). Its mode without using the package. But if there is no solution, if there is a package for it, thank you for introducing that package as well.

Answer 1

thanks to all. I wrote my own package for answer of my question. https://pub.dev/packages/flutter_glass

Answer 2

Try to used glassmorphism package also refer glassmorphism_ui

Answer 3

You can use GLASS package.

This package is Null safety and also supports ANDROID IOS LINUX MACOS WEB WINDOWS platform.

Answer 4

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,
        ),
      ),
    );
  }
}

Result