How to create a glassmorphism / frosted glass Appbar in Flutter

7 min readJan 19, 2021

2020 was all about Neumorphism in UI Design and I have to admit it: I wasn’t a big fan of it. Something about it always looked off to me personally and it didn’t seem a good fit for UI design for me. But there’s plenty of people out there, who loved it and used it excessively so I guess I have a pretty lonely stand with my opinion.

2021 on the other hand seems to be the year of glassmorphism or should I say: The return of glassmorphism. It must have been around 2008 when I built a little personal website and wanted to put my content on something that looks like a “frosted glass plate”. Okay, okay, I admit it, I didn’t do a very good job back then and it probably looked a bit cheap but it proves that glassmorphism is not a new idea. As with most great trends: They come and they go and then they return.

I gave this effect a try and used it in my latest app, “Flutter Cheats”. The use case was perfect. My appbar had the same color as the content background and I fee that this sometimes looks a bit off so I decided that a glassmorphism look would be the perfect fit for my UI. The Implementation was relatively simple but there are still some stumbling blocks so I decided to document my solution for it in a blog post.

Glass-mor-what? Glassmorphism!

What is glassmorphism you ask? Probably not. If you’re reading this article, then you probably specifically searched for this term and know exactly what it is. But if you found this article just by browsing, here’s a really quick explanation:

Glassmorphism is a term used to describe UI elements, that look like they are made of frosted glass. You know, that type of glass is used in shower windows sometimes. You can’t look through it. You only see a blurred image of what’s behind it or some silhouettes.

Glassmorphism elements in UI design are usually used to make all elements underneath them blurred. it’s a nice alternative to working with opacity or to give your UI a modern and elegant look overall.

It’s a very subtle effect too. So subtle that I only started to notice it, after I used it for myself. If you keep your eyes open, you can find this effect, especially in appbars or navbars all over the place. Even Apple is using it in many places in their UIs and even on their website (as of January 2021).

What we’re building

We will implement the glassmorphism effect on a standard Flutter Appbar. For our example, I also created a ListView because I needed something scrollable (preferably with images) to show the effect. We won’t get into detail on how to build this ListView though. This article is all about the AppBar.

One thing that’s very convenient for us: Flutter comes with a built-in widget called “BackdropFilter”. It can be used to apply this exact effect to its underlying widgets. We will also use this widget to build the above example but it’s not quite as straightforward as it sounds.

If you’re only here for the final code and don’t need the step by step guide, here is the DartPad link, and here is the code:

Step by step

I will only go into detail about the appbar part of the code here. I assume that you have a running app, maybe a listview like my example above, and that you have a Scaffold that you want to equip with a glassmorphism appbar.

Step 1 — let’s create an AppBar

Let’s create a pure and simple AppBar first but give it a little twist: We’ll give the background color opacity of only 20%. That’s not the glass-effect yet but it’s getting us into the right direction and we will learn something about our scaffold in just a second:

Scaffold(
  appBar: AppBar(
    title: Text('Glassmorphism Appbar'),
    leading: Icon(Icons.chevron_left),
    elevation: 0.0,
    backgroundColor: Colors.black.withOpacity(0.2),  
  ),
  body: ...
)

And the result looks like this:

Waaaaiiiit a second… why can’t we see our listview items scroll behind the appbar? That’s because, by default, the top of the scaffold’s body ends at the bottom of the appbar. So how do we get it to scroll all the way to the top of the screen?

Step 2 — extendBodyBehindAppBar

Thankfully the Flutter team thought about that and there’s a really simple built-in solution for this. A scaffold has a property called extendBodyBehindAppBar. Set it to “true” and we get the desired result.

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    title: Text('Glassmorphism Appbar'),
    leading: Icon(Icons.chevron_left),
    elevation: 0.0,
    backgroundColor: Colors.black.withOpacity(0.2),  
  ),
  body: ...
)

Aaaand we’re back on track. That was easy, wasn’t it? And as I promised you: we learned something new about the scaffold (well, for me this was new at least).

It doesn’t really look very nice though. The title of the appbar kinda mixes in too much with the text of the list tiles. If you would really wanna keep it at that effect, a good improvement would be, to up the opacity of the appbar’s background color. But we’re here to do something different anyway.

Step 3 — The PreferredSize widget

So a bit earlier I said, that Flutter has a widget called “BackdropFilter”, that’s applying exactly our desired effect to all widgets underneath it: That sounds pretty straightforward, doesn’t it? So let’s just wrap our AppBar in a BackdropWidget then and we’re done, right?

Whoops, doesn’t work. Flutter is not simply expecting any kind of widget in the appBar property, it specifically wants a “PreferredSized” widget. What’s that you ask? Well, there’s actually not much to find about the so-called “PreferredSizeWidget”. Here is a link for the official Flutter documentation of the widget.

It’s basically a widget that has one default size, that it should always stay at, if possible. It can make its parent widget aware of that size so the parent (in our case the scaffold) can lay out its children accordingly. At least that’s what I understand from the docs. If anyone has a better explanation, feel free to leave a comment and I’m happy to edit this section.

Our solution will be a bit hacky but here’s what we’re gonna do: We will wrap our AppBar in a BackdropFilter and then wrap that in a PreferredSize widget. We technically implement the PreferredSize widget twice here and that’s not exactly a best practice. If you want to have a really clean code, you would need to implement your own appbar here. Our solution works for our needs though.

Here’s what our scaffold looks like now:

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: PreferredSize(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      child: AppBar(
        title: Text('Glassmorphism Appbar'),
        leading: Icon(Icons.chevron_left),
        elevation: 0.0,
        backgroundColor: Colors.black.withOpacity(0.2),
      ),
    ),
    preferredSize: Size(
      double.infinity,
      56.0,
    ),
  ),
  body: Center(
    child: MyWidget(),
  ),
),

In our scaffold’s appBar property, we start with a “PrefferedSize” widget. It takes a child and a property called “preferredSize” that needs a “Size” widget as an input. The “Size” widget takes two positional parameters: The width and the height. our with is “double.infinity” because we want it to take up the whole width of the screen. The default appbar height in Flutter is (afaik) 56.0. Be aware that if you use this on a device that needs a safe-padding, you have to add this padding to the height (you can use “MediaQuery.of(context).padding.top”).

Now to our “BackdropFilter” widget. Apart from passing a child, we’re also passing a filter value. It takes a filter widget, in our case the “ImageFilter.blur”, that needs a “sigmaX” and “sigmaY” parameter. Both these parameters basically define how much the image underneath is blurred. Feel free to play around with those values and adjust them to your needs.

And there we go, here is our result:

Not… exactly what we expected, right? Don’t worry, we’ve all been there. I think that’s what happens to everyone using the BackdroFilter for the first time.

Step 4 — Clip it

There’s just one simple thing we need to do here: Wrap your backdrop filter in a “ClipRRect” widget. This widget is basically telling the backdrop filter to calm the f… down and stay within the constraints of its parent.

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: PreferredSize(
    child: ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: AppBar(
          title: Text('Glassmorphism Appbar'),
          leading: Icon(Icons.chevron_left),
          elevation: 0.0,
          backgroundColor: Colors.black.withOpacity(0.2),
        ),
      ), 
    ),
    preferredSize: Size(
      double.infinity,
      56.0,
    ),
  ),
  body: Center(
    child: MyWidget(),
  ),
),

And that’s it, we’re done!

It’s not too much of a pain, is it? We just need to know, what widgets can help us achieve this effect and where and how to use them.

I hope you learned something about how to use some widgets and create the famous glassmorphism-Effect in Flutter. If you find mistakes or want to tell me something else, feel free to use the comments!

What do you think? Should I create a flutter-package for a glassmorphism-Appbar?

I also created an app with some Flutter cheat sheets to help you on your journey to becoming a Flutter pro. Check it out at flutter-cheats.com

Thanks for reading!

Chris