Skip to content

About the value of FlexibleSpaceBar title bottom padding. #23864

Closed

Description

@Hanggi

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));
  }
}

image

Thank you.

Activity

  1. changed the title [-]About FlexibleSpaceBar title bottom value.[/-] [+]About the value of FlexibleSpaceBar title bottom padding.[/+] on Nov 2, 2018
  2. zoechi commented on Nov 3, 2018

    @zoechi
    Contributor

    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.

  3. added
    c: new featureNothing broken; request for a new capability
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    on Nov 3, 2018
  4. added this to the milestone on Nov 3, 2018
  5. Hanggi commented on Nov 6, 2018

    @Hanggi
    Author

    @zoechi Oh, I did what you said, I copied the file and rename the FlexibleSpaceBar as Custom FlexibleSpaceBar.
    image

    The error code said like this, it seems that no one call the createSettings() function.
    Where is it wrong?

  6. app-o-matix commented on Feb 7, 2019

    @app-o-matix

    I'm in need of this customization ability as well

  7. nhtlquan commented on Feb 10, 2020

    @nhtlquan

    @zoechi Oh, I did what you said, I copied the file and rename the FlexibleSpaceBar as Custom FlexibleSpaceBar.
    image

    The error code said like this, it seems that no one call the createSettings() function.
    Where is it wrong?

    You have fixed it?
    Please tutorial me!

  8. kitsupixel commented on Jul 24, 2020

    @kitsupixel

    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.

  9. github-actions commented on Aug 14, 2021

    @github-actions

    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 -v and a minimal reproduction of the issue.

  10. locked as resolved and limited conversation to collaborators on Aug 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: new featureNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packageswaiting for PR to land (fixed)A fix is in flight

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions