Repository navigation
Getting the body behind transparent Appbar #17088
Description
Is there a configuration in Scaffold class which can be utilized for the purpose of putting the body behind transparent Appbar?
Without this capability Scaffold becomes useless when having a transparent Appbar. I hope that the material guidelines don't discourage transparent appbar.
Reacted by Herc, royalGriffin22, Thibault Zanini, rasyeda, Michel Feinstein, Dzmitry Antonenka, xaenimax, Philip Giuliani, yap-studios, t1r and 2 more
Reacted by Jan Boon, Diego Velásquez, Cristian Esquivias, Royal Thomas, Georgian, Luke Pighetti, kntt lau, Tyler Holland, Nomi, Hugo Passos and 20 more
Activity
lukepighetti commentedon Jun 18, 2018
I would like to be able to make the appBar transparent and apply a blur. Thank you.
RyanAfrish7 commentedon Jun 18, 2018
I found a way to achieve this. Setup your Scaffold as follows.
Remove the appBar from the appBar slot of the Scaffold. Add the appBar into a Stack within the Scaffold's body. Add another Container to fill the screen to the Stack. Add all the components into that Container. That's it. You may now add background blur to the appBar and it works like a charm.
RyanAfrish7 commentedon Jun 18, 2018
Will add a snippet as soon as I find some time.
lukepighetti commentedon Jun 18, 2018
Does this break anything unintended?
zoechi commentedon Jun 19, 2018
@Hixie
Hixie commentedon Jun 19, 2018
If your body can scroll, then I recommend using
SliverAppBarand putting it inside the scrolling container. If it can't scroll, then I don't really understand what part of the body should be below the app bar, can you elaborate?lukepighetti commentedon Jun 19, 2018
Hi @Hixie , what you are recommending is contrary to standard rules of engagement for AppBar UI on iOS.
Hixie commentedon Jun 22, 2018
Can you describe these rules of engagement in more detail? I wasn't aware that this bug was specific to iOS.
Hixie commentedon Jun 22, 2018
cc @xster
xster commentedon Jun 22, 2018
@lukepighetti, is there a specific Material Design on iOS convention wrt transparency you're referring to?
lukepighetti commentedon Jun 23, 2018
This is a feature request, I suppose.
In the absence of a Cupertino layout, being able to adjust the AppBar transparency & blur and show the content behind it would allow it to appear more Cupertino without having to rewrite the base scaffold or whatever you want to call it. I would even argue that it could look nice on Android as well.
16 remaining items
herkulano commentedon Feb 27, 2019
@willlarche the new material gmail on android has a nice transparent AppBar.
TheChrisED commentedon Mar 26, 2019
I would argue this is also important for bottom app bars. While the designers may be undecided on whether transparent app bars should be in the Material Design spec, inset floating action buttons are part of Material Design. See this screenshot from material.io:
For this to work with a scrolling view, the bottom app bar needs to be on top of the body of the
Scaffold. I also cannot use aCupertinoTabScaffoldbecause the materialScaffoldwidget takes care of placing the floating action button, whichCupertinoTabScaffoldcannot do.This is a screenshot from my current project, where the body currently does not scroll behind the bottom app bar, therefore its notch just shows the canvas color:
willlarche commentedon Mar 26, 2019
@TheChrisED , you're right that this affects bottom rect components too.
BTW: The top one is bottom app bar but the bottom one is actually bottom nav!
Ahmadre commentedon May 16, 2019
I tried that solution, but breaks with safe-area, so: not the yellow of the egg...
damiantew commentedon May 31, 2019
<AppBar position="static" style={{ background: 'transparent', boxShadow: 'none'}}>
HansMuller commentedon Jun 28, 2019
Fixing this issue by making it possible to extend a Scaffold's body behind its AppBar seems reasonable.
Sadly, four months ago, I introduced a boolean Scaffold flag called extendBody. It means: extend the body behind the Scaffold's bottom navigation bar.
Rather than adding
extendUpperBody(or whatever) I think it would be best to change extendBody to an enum with three values. That's a breaking change ofcourse. Need some feedback from developers to see if that's OK.Hixie commentedon Jul 1, 2019
I dunno, I think extending down and extending up are orthogonal issues, it makes sense that they'd be separately controllable.
jonataslaw commentedon Jul 31, 2019
I need it
wsakka commentedon Aug 4, 2019
@HansMuller Not sure why you'd opt for the breaking change. I'd rather see it as extendBehindAppbar or something similar.
github-actions commentedon Aug 15, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.