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.
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?
Is there any easy way to have a SliverAppBar be transparent when expanded and then take a color when collapsed when used in combination with a FlexibleSpaceBar?
I want to use the FlexibleSpaceBar so that my title will collapse when the sliver list is scrolled up and down
It seems right now the default behavior is the opposite. If you make the sliverAppBar transparent off the bat
SliverAppBar(
pinned: true,
expandedHeight: 100.0,
elevation: 0,
backgroundColor: Colors.transparent,
Then there is no way to control the background color when its collapsed. If you try to give a color here, then when its collapsed it successfully has a color but it cannot be made transparent when expanded.
Ok I ultimately solved this by keeping the SliverAppBar as transparent, and then placing a Container widget into it. Then using a scrollcontroller listener, I would animate the color of the containers background color as a scroll is happening.
It was a painful process, but it is working flawlessly
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.
I have no idea to figure out this problem in flutter. I want to know the size without app bar size and tab bar size(up).
I use variable "vertical_size" as
var vertical_size = (MediaQuery.of(context).size.height -
AppBar().preferredSize.height -
MediaQuery.of(context).padding.top);
but I didn't figure out the tab bar size. It's mean there are oversized in Iphone. (Android is okay in now...)
Do you have any idea to measure tabbar height using Mediaquery? Or is there any idea to measure the actual using area?
You can always figure out the free space in any place you want in your layout with LayoutBuilder
In case of full usable screen height, you can use MediaQuery, but aparat from appbar's height and top padding, remember about bottom padding. You need to substract it as well
Hi and welcome to StackOverflow.
It's not oversized in iOS. What happens is that the AppBar will have in consideration the safe area, hence, its heigh will be bigger/smaller based on the device it is running on.
If you want to get the height of the screen without the AppBar heigh, just do it as the following:
Widget build() {
AppBar appBar = AppBar();
double vertical_size = MediaQuery.of(context).size.height - appBar.preferredSize.height;
return Scaffold(
appBar: appBar,
body: // your widget
);
}
The AppBar's height will have in consideration the device's status bar and so on, so there's no need to remove the inset padding manually.
I've spent hours attempting to make an AppBar show a title having a particular height. From what I have read on SO etc., it can be done, however I cannot achieve it and I have spent many hours attempting to. I need to make the "title:" and "actions:" have a height of about 70 or thereabouts.
From what I can determine from various tests that I have performed, when the size of the AppBar exceeds a certain size, any excess size automatically goes to the "bottom:" which in the case of my app is the TabBar.
I tested a PreferredSize for that AppBar in another test where there was no "bottom:" and no TabBar, and the space allocated to the AppBar in the program was sufficient to display the large title, but only part of the title having a large font showed. The remainder of the space that was allocated to the AppBar in that case was just blank and showed below the display of the title.
In another program that I have written, I have set the AppBar height to 35 and that works without a problem. So it appears that setting the AppBar height to a low value works for the title, but setting it to a large value does not.
I would appreciate a solution to this problem because the need for this is integral to my program and I have spent a lot of time attempting to solve the problem.
You can use toolbarHeight:
AppBar(
toolbarHeight: 100,
)
This problem appears to be solved by AppBar "flexibleSpace:".
The AppBar title and actions are part of the AppBar toolbar. The problem appears to be that the height of the AppBar can be changed, and that allows the height of the toolbar to be reduced, but the height of the AppBar toolbar cannot be increased beyond a height of 56. Any increase in the height of the AppBar beyond 56 does not allow the height of the toolbar to be increased beyond 56.
This is the subject of issues #7330 and #23373 for Flutter on Github. It would be great if these issues could be solved by allowing an increase in the AppBar toolbar height beyond 56. Currently the only way to solve this appears to be to write a custom AppBar and the standard AppBar has some good features.
Just try this pseudocode
Text('your text here', style:TextStyle(height:70.0));
You can use preferredSize widget to give custom height in appBar
appBar: PreferredSize(
preferredSize: Size.fromHeight(50.0),
child: AppBar(
.............
)
),