I have an app that has a bottomNavigationBar() wrapped in a clipRRect() but the content doesn't show behind it. The same behaviour also happens with transparent SliverAppBar()s in NestedScrollView()s. How can I achieve this?
Edit: Here is an example of the SliverAppBar() problem. The shadow is being hidden by the app bar.
you can try this:
Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
and give a little padding to the top and bottom of you body content for overlapping at the very top and bottom.
Related
What I'm trying to achieve:
Picture 1: View should be scrollable and the NoData container should fill up the remaining space.
SliverFillRemaining just scrolls under the SliverAppBar which is not wanted - it should stop at the top which seems not to be possible.
Picture 2: You should be able to scroll away the SliverAppBar, Background, TabBar, etc and view the No Data in full like there never was a SliverAppBar there (at least the expanded portion of it).
Picture 3: Now there's ONE content - I still want the view to behave the same.
Currently this just means the screens looks like Picture #1 with a Row inserted. Eh? Ugly.
Picture 4: Now there's many rows of content - the view should scroll away the SliverAppBar and continue with the scroll view.
But this is not what it looks like. If there's no "body" in the Widget the SliverAppBar just sits there. Adding a secondary scrolling view for the Rows just means it scrolls by itself while the SliverAppBar still just sits there. Using a SliverFillRemaining scrolls below the SliverAppBar even though there's just one row of content? That's not the remaining space? That's remaining space + AppBar - which is more than what's remaining.
In this case the SliverAppBar consists of this:
SliverAppBar(
expandedHeight: 512,
collapsedHeight: kToolbarHeight,
toolbarHeight: kToolbarHeight,
pinned: true,
floating: false,
snap: false,
elevation: 0,
backgroundColor: theme.primaryColor,
leading: CloseButton(onPressed: onBackButton),
title: Text("Title"),
automaticallyImplyLeading: false,
stretch: true,
flexibleSpace: const FlexibleSpaceBar(
background: getBackground(), // Background Image with some "Info" in it
),
bottom: getBottom(), // TabBar
)
I've tried calculating the screen size remaining once the "SliverAppBar" is scrolled away but then there's the scrolling issue that it won't scroll both views at the same time. Regardless of primary: true/false, shrinkWrap: true/false. Also adding this "calculated" Container to a SliverFillRemaining is just plain ignored. I can set it to any size it still ignores the height set.
But the biggest question is - why would anyone want a SliverAppBar that's not always "scroll away-able" (for lack of a better term). If there's no content in the screen it just looks weird. I at least want the screen excluding the SliverAppBar to always take up the space of the screen with scrolling intact.
Is SliverListDelegate the only alternative? But Row, Row, Row in Picture #4 may not be the only scenario this applies to. In that case it doesn't feel correct to add a ListBuilder everytime you want to add a few Widgets. If I know there will be 4 widgets I'm not sure why I need a ListBuilder for that. But if I'm scrolling 200 items I agree.
In short, most solutions for this seems like hacks as of now.
Suggestions?
I'm using the persisten_bottom_nav_bar package to handle the bottom navigation in our app. The issue I'm having is that when I call FocusScope.of(context).unfocus(); to get rid of the keyboard, the navigation bar goes dark for a second. Has anyone figure out how to fix this issue?
So I implemented the package incorrectly, I fixed it by changing the parameters to the ones below. The main issue was hideNavigationBarWhenKeyboardShows which was basically rendering the bottomAppBar every-time the keyboard closed.
PersistentTabView(
resizeToAvoidBottomInset: false,
hideNavigationBarWhenKeyboardShows: false
Tip: Add resizeToAvoidBottomInset: false to any screens with textFields to prevent a small white spacing in between the keyboard and the scaffold
Scaffold(
resizeToAvoidBottomInset: false,
I have a transparent app bar that hides some of my content, because the content starts behind the app bar:
My Scaffold looks like this:
return Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
appBar: getAppBar(),
body: generateMainBody(context),
);
If I would set extendBodyBehindAppBar to false it would work, however, the appbar would not be transparent anymore (when scrolling the area that is not part of that cool shape would be black and not transparent like in the screenshot).
I thought of adding some top padding to just move the cut content down a little bit but surely there has to be a better solution?
In your generateMainBody function, wrap your current return with padding and change the padding padding: const EdgeInsets.only(top: 8.0),. You can increase or decrease the '8.0' to best suit your app.
Since the only solution seems to be some kind of padding I settled with this:
SizedBox(height: MainAppBar.appBarHeight)
I simply added an empty SizedBox that has the height of the AppBar to the top of my content.
i need your help because i am customizing my AppBar in flutter and i'd like to know if there is a way to decide what to show on the leading part: in my homepage i'd like to see a logo, but if i navigate to other screens i'd like to see the back button. So my question is: is there a way to write an AppBar class where, maybe with a statement, the device show the logo or the back button(seeing the navigation history)?
I hope you understand and thanks.
Sure, that's very simple:
In your home screen, pass your logo (can be any Widget) to the AppBar's leading argument.
On the other screens, pass nothing and set automaticallyImplyLeading: true - the AppBar will create a back button automatically.
Alternatively, if you only use one AppBar for the whole app, use this snippet:
AppBar(
leading: ModalRoute.of(context).settings.name == "MY_HOME_SCREEN_ROUTE" ? MyLogoWidget : null,
automaticallyImplyLeading: true,
...
);
I suggest you read this article to have different types of appbar:
https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f
I created a Scaffold widget with appBar and drawer.
As I open the drawer, there is a shadow over the Scaffold's body widget. I'd like to either remove the shadow, make it not so "strong" or change the shade slightly.
I checked the docs and I didn't find any way to achieve this through public API.
Is there any way to remove the drawer menu's "drop shadow" on the body?
The elevation option is something different, even if I set it to 0, the overlay shadow on top of the body is still present.
This issue's description's screenshots might help clarify what I want.
If you want to get rid of the shadow over the Scaffold body then you have to change the Scaffold's drawerScrimColor's value to Colors.transparent.
Have you tried setting the drawer's elevation to elevation: 0.0?
check this
drawerTheme:
DrawerThemeData(scrimColor: Colors.transparent, elevation: 0.5),