Repository navigation
About the value of FlexibleSpaceBar title bottom padding. #23864
Copy link
Copy link
Closed
Labels
c: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packageswaiting for PR to land (fixed)A fix is in flightA fix is in flight
Description
I want to make a search bar in FlexibleSpaceBar title, and let it show a large search bar or scroll to a small search bar. but I found that the FlexibleSpaceBar title has a padding bottom for 16.0.
Is there a way to set the padding bottom to 0.0? Because I need the search bar occupy the all heights.
class _FlexibleSpaceBarState extends State<FlexibleSpaceBar> {
bool _getEffectiveCenterTitle(ThemeData theme) {
if (widget.centerTitle != null)
return widget.centerTitle;
assert(theme.platform != null);
switch (theme.platform) {
case TargetPlatform.android:
case TargetPlatform.fuchsia:
return false;
case TargetPlatform.iOS:
return true;
}
return null;
}
Alignment _getTitleAlignment(bool effectiveCenterTitle) {
if (effectiveCenterTitle)
return Alignment.bottomCenter;
final TextDirection textDirection = Directionality.of(context);
assert(textDirection != null);
switch (textDirection) {
case TextDirection.rtl:
return Alignment.bottomRight;
case TextDirection.ltr:
return Alignment.bottomLeft;
}
return null;
}
double _getCollapsePadding(double t, _FlexibleSpaceBarSettings settings) {
switch (widget.collapseMode) {
case CollapseMode.pin:
return -(settings.maxExtent - settings.currentExtent);
case CollapseMode.none:
return 0.0;
case CollapseMode.parallax:
final double deltaExtent = settings.maxExtent - settings.minExtent;
return -Tween<double>(begin: 0.0, end: deltaExtent / 4.0).transform(t);
}
return null;
}
@override
Widget build(BuildContext context) {
final _FlexibleSpaceBarSettings settings = context.inheritFromWidgetOfExactType(_FlexibleSpaceBarSettings);
assert(settings != null, 'A FlexibleSpaceBar must be wrapped in the widget returned by FlexibleSpaceBar.createSettings().');
final List<Widget> children = <Widget>[];
final double deltaExtent = settings.maxExtent - settings.minExtent;
// 0.0 -> Expanded
// 1.0 -> Collapsed to toolbar
final double t = (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent).clamp(0.0, 1.0);
// background image
if (widget.background != null) {
final double fadeStart = math.max(0.0, 1.0 - kToolbarHeight / deltaExtent);
const double fadeEnd = 1.0;
assert(fadeStart <= fadeEnd);
final double opacity = 1.0 - Interval(fadeStart, fadeEnd).transform(t);
if (opacity > 0.0) {
children.add(Positioned(
top: _getCollapsePadding(t, settings),
left: 0.0,
right: 0.0,
height: settings.maxExtent,
child: Opacity(
opacity: opacity,
child: widget.background
)
));
}
}
if (widget.title != null) {
Widget title;
switch (defaultTargetPlatform) {
case TargetPlatform.iOS:
title = widget.title;
break;
case TargetPlatform.fuchsia:
case TargetPlatform.android:
title = Semantics(
namesRoute: true,
child: widget.title,
);
}
final ThemeData theme = Theme.of(context);
final double opacity = settings.toolbarOpacity;
if (opacity > 0.0) {
TextStyle titleStyle = theme.primaryTextTheme.title;
titleStyle = titleStyle.copyWith(
color: titleStyle.color.withOpacity(opacity)
);
final bool effectiveCenterTitle = _getEffectiveCenterTitle(theme);
final double scaleValue = Tween<double>(begin: 1.5, end: 1.0).transform(t);
final Matrix4 scaleTransform = Matrix4.identity()
..scale(scaleValue, scaleValue, 1.0);
final Alignment titleAlignment = _getTitleAlignment(effectiveCenterTitle);
children.add(Container(
padding: EdgeInsetsDirectional.only(
start: effectiveCenterTitle ? 0.0 : 72.0,
bottom: 16.0 // here is the bottom padding,
),
child: Transform(
alignment: titleAlignment,
transform: scaleTransform,
child: Align(
alignment: titleAlignment,
child: DefaultTextStyle(
style: titleStyle,
child: title,
)
)
)
));
}
}
return ClipRect(child: Stack(children: children));
}
}Thank you.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
c: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packageswaiting for PR to land (fixed)A fix is in flightA fix is in flight

Activity
[-]About FlexibleSpaceBar title bottom value.[/-][+]About the value of FlexibleSpaceBar title bottom padding.[/+]zoechi commentedon Nov 3, 2018
Looks like https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/flexible_space_bar.dart#L216 which is hardcoded.
As a current workaround you could copy the code and create your own custom version of that widget.
Hanggi commentedon Nov 6, 2018
@zoechi Oh, I did what you said, I copied the file and rename the FlexibleSpaceBar as Custom FlexibleSpaceBar.

The error code said like this, it seems that no one call the createSettings() function.
Where is it wrong?
app-o-matix commentedon Feb 7, 2019
I'm in need of this customization ability as well
nhtlquan commentedon Feb 10, 2020
You have fixed it?
Please tutorial me!
kitsupixel commentedon Jul 24, 2020
If you did as I did and did a Search/Replace from FlexibleSpaceBar to CustomFlexibleSpaceBar.
Do a search/replace of CustomFlexibleSpaceBarSettings to FlexibleSpaceBarSettings
And remove the final class on the file "FlexibleSpaceBarSettings", this worked for me.
github-actions commentedon Aug 14, 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.