Create glass UI with flutter

Question

as title say I'd like to create a ui like this but I can't obtain the same result.

Right now I'm using this code:

 @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('images/greydrop.jpeg'),
          fit: BoxFit.cover,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Scaffold(
          backgroundColor: Colors.white.withOpacity(0.6),
          appBar: AppBar(...),
          body : ....

I'm using an image with different type of grey. My result is the follow :

Does this answer your question? [How do I do the "frosted glass" effect in Flutter?](https://stackoverflow.com/questions/43550853/how-do-i-do-the-frosted-glass-effect-in-flutter) — Md. Yeasin Sheikh, Mar 24 '22 at 13:52

score 1 · Accepted Answer · answered Mar 24 '22 at 14:47

1

As you are using a plain grey image you cannot see the distortion happening I guess.

Try using a colored background like THIS in the same code.

answered Mar 24 '22 at 14:47

Nagulan S

617
5
11

Create glass UI with flutter

1 Answers1