SliverAppBar needs a custom widget area at the bottom of the layout
#129868
Comments
|
I just discovered |
|
Actually I just tried
I want to be able to simply add an extra widget area to the bottom of the |
|
Thanks for the report @lukehutch |
|
@darshankawar Sure, this is the UI I built using
Each of the tabs on the bottom switches to a different page with a different I want to be able to put filter controls on each of the 5 tab pages, that are relevant to that tab. Here I have two dropdown controls for the Social page.
I want to add these two comboboxes directly to the bottom of the |
|
Thanks for the update. |
|
This issue is assigned to @HansMuller but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks! |
|
This issue is assigned to @HansMuller but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks! |
|
This issue was assigned to @HansMuller but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed. |
|
@victorsanni to take a look from triage, thank you! |
The dynamically resizing feature is a duplicate of #18345. The problem with that is SliverAppBar uses SliverPersistentHeader under the hood, so it needs to know its max/min extents before build. But the child sizes are determined during build, and the max/min extents are dependent on the child size.
Under the hood, the SliverAppBar is wrapped with a column within which the bottom widget is inserted. My understanding is that gives the user full control as to the spacing available to the bottom widget? Overall, it's still not clear to me what this issue is asking for. Can you expand a little more on it? Thanks @lukehutch @martipello |
|
@victorsanni Thanks for looking into this. I forgot to mention I'm using a But based on what you're saying, I could have just added these to the |
As SliverAppBar.bottom. Consider this code sample where I add a Code sampleimport 'package:flutter/material.dart';
/// Flutter code sample for [FlexibleSpaceBar].
void main() => runApp(const MaterialApp(home: FlexibleSpaceBarExampleApp()));
class FlexibleSpaceBarExampleApp extends StatelessWidget {
const FlexibleSpaceBarExampleApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
SliverAppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(20),
child: FlutterLogo(),
),
stretch: true,
onStretchTrigger: () {
// Function callback for stretch
return Future<void>.value();
},
expandedHeight: 500.0,
flexibleSpace: FlexibleSpaceBar(
stretchModes: const <StretchMode>[
StretchMode.zoomBackground,
StretchMode.blurBackground,
StretchMode.fadeTitle,
],
centerTitle: true,
title: const Text('Flight Report'),
background: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
fit: BoxFit.cover,
),
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
A76C
begin: Alignment(0.0, 0.5),
end: Alignment.center,
colors: <Color>[
Color(0x60000000),
Color(0x00000000),
],
),
),
),
],
),
),
),
SliverList.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: Icon(Icons.wb_sunny),
title: Text('Day $index'),
subtitle: Text('sunny, h: 80, l: 65'),
);
},
),
],
),
);
}
}
Is this sort of what you're looking for here? If so, then I think this issue can be closed. |
|
Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. |
Is there an existing issue for this?
Use case
I want to add some custom dropdown controls below the title text in the
SliverAppBar. There is no clean way to do this currently.I have a
SliverAppBarthat contains aFlexibleSpaceBarwith a cover image, a drawer, and some title text.I tried adding these controls to the
FlexibleSpaceBar, by hijackingbackgroundwith aColumnwidget, but clearly the layout was not designed for this, and it's pretty much impossible to get the layout and animation right.I added a
SliverPersistentHeader, which does place the controls below theSliverAppBar, but there are several issues:SliverPersistentHeaderto appear as part of theSliverAppBar, not have their own hide/show semantics that are different from those of theSliverAppBar.SliverPersistentHeaderis bizarre at best -- I want this header to appear whenever theSliverAppBaris maximized and I drag down, at any position in the wrappingCustomScrollView. However,SliverPersistentHeaderseems to pin at an absolute position near the top of theCustomScrollView, so it only appears if I scroll theCustomScrollViewnearly to the top. Seefloatingbehavior ofSliverPersistentHeaderdoes not match that ofSliverAppBar#129869.SliverAppBarand theSliverPersistentHeader. This shows up as a faint white line occasionally, since both the app bar and the header have non-white backgrounds. See There is a half-pixel gap betweenSliverAppBarandSliverPersistentHeader#129870.Proposal
Please add a
SliverAppBar.footerfield that allows the user to add aWidgetto the bottom of theSliverAppBar.It would also be great if this footer were dyamically-sizeable, so that content could be added to or removed from it, and it would take only as much vertical space as necessary to wrap the content.
The text was updated successfully, but these errors were encountered: