Reputation: 1192

How to create glass widget in flutter app?

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.

Upvotes: 0

Answers (5)

kartik

Reputation: 191

You can use built-in BackdropFilter Widget with ImageFilter.blur as child to gain the same glass effect

Upvotes: 2

Esmaeil Ahmadipour

Reputation: 1192

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

Upvotes: 0

DiyorbekDev

Reputation: 774

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