Fix `FlexibleSpaceBar` centered title position and title color #140883

TahaTesser · 2024-01-03T16:07:25Z

fixes Invisible SliverAppBar title in Material 3 light theme
fixes FlexibleSpaceBar title is misaligned without the leading widget

Previous attempt #138611

Description

fixes the FlexibleSpaceBar centered title position when there is a leading widget.
fixes the FlexibleSpaceBar title color for Material 3.
Added documentation when using a long FlexibleSpaceBar title and update its test.
Improved documentation of default title padding.

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
          child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading: Icon(Icons.favorite_rounded),
            flexibleSpace: FlexibleSpaceBar(
              title: ColoredBox(
                color: Color(0xffff0000),
                child: Text('SliverAppBar'),
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Before

After

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Piinks · 2024-01-05T19:19:14Z

packages/flutter/lib/src/material/flexible_space_bar.dart

Suggested change

/// If the length of the title is greater than the available space, set

/// this property to false, this aligns the title to the start of the

/// flexible space bar and applies [titlePadding] to the title.

/// If the length of the title is greater than the available space, set

/// this property to false. This aligns the title to the start of the

/// flexible space bar and applies [titlePadding] to the title.

Is there anyway we can do this automatically? Just curious since how much space is available versus how much space text will take up is really hard for developers to anticipate or know ahead of time.

It is hard automate without introducing a lot more complexity. it will require calculating the screen width, leading widget width, and the total width of the all the actions widgets. Available space could vary between different devices (mobile, tablet, desktop, web) as a result more or less space could be available for a long title.

Official guidelines actually recommend using the large app bar instead, when the title text is long.

I added above documentation to address #132030 concerns, for anyone trying to use regular app bar with a long title in Flutter, they can align the title to left which will provide a default titlePadding.

Ok thank you for explaining! I figured but wanted to double check. Thanks for adding to the docs about this scenario.

packages/flutter/lib/src/material/flexible_space_bar.dart

Piinks

LGTM! Thank you!

emersion · 2024-01-12T13:31:29Z

Thanks a lot for the fix!

flutter/flutter#140883)

flutter/flutter@9f2e681...7dc856a 2024-01-12 [email protected] Revert "Reverts "Run iOS staging tests with Xcode 15.2"" (flutter/flutter#141420) 2024-01-12 [email protected] Roll Packages from 0744fe6 to d74d687 (5 revisions) (flutter/flutter#141449) 2024-01-12 [email protected] Fix `FlexibleSpaceBar` centered title position and title color (flutter/flutter#140883) 2024-01-12 [email protected] Do not reset framework checkout before running customer tests (flutter/flutter#141013) 2024-01-12 [email protected] Increase delay for checking integration_ui_keyboard_resize test success (flutter/flutter#141301) 2024-01-12 [email protected] Add osx_sdk context for mac builds. (flutter/flutter#141422) 2024-01-12 [email protected] Roll Flutter Engine from ecdaed76f284 to 44a0a6ee4d39 (18 revisions) (flutter/flutter#141432) 2024-01-12 [email protected] Add support for Gradle Kotlin DSL (flutter/flutter#140744) 2024-01-12 [email protected] Fix typo (flutter/flutter#141426) 2024-01-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Run iOS staging tests with Xcode 15.2" (flutter/flutter#141412) 2024-01-11 [email protected] Run iOS staging tests with Xcode 15.2 (flutter/flutter#141392) 2024-01-11 [email protected] Fix `ListWheelScrollView` in an `AnimatedContainer` with zero height throw an error (flutter/flutter#141372) 2024-01-11 [email protected] make asset_test.dart tests not dependent on context (flutter/flutter#141331) 2024-01-11 [email protected] Expose 'enable' property to allow the user to disable the SearchBar (flutter/flutter#137388) 2024-01-11 [email protected] Add impeller key to skia gold client, Turn on a framework test shard that will run unit tests with --enable-impeller (flutter/flutter#141341) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jan 3, 2024

TahaTesser requested a review from Piinks January 3, 2024 16:07

Piinks reviewed Jan 5, 2024

View reviewed changes

TahaTesser force-pushed the fix_flexible_space_bar_title branch from a2edd79 to d6b48b5 Compare January 8, 2024 11:36

TahaTesser requested a review from Piinks January 8, 2024 11:38

TahaTesser added 2 commits January 9, 2024 10:29

Fix FlexibleSpaceBar centered title position and title color

f3f07af

Update docs

f6615b1

TahaTesser force-pushed the fix_flexible_space_bar_title branch from d6b48b5 to f6615b1 Compare January 9, 2024 08:29

Piinks approved these changes Jan 12, 2024

View reviewed changes

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 12, 2024

auto-submit bot merged commit e20d34c into flutter:master Jan 12, 2024

TahaTesser deleted the fix_flexible_space_bar_title branch January 12, 2024 13:29

engine-flutter-autoroll mentioned this pull request Jan 12, 2024

Roll Flutter from 9f2e681e7be6 to e20d34c38a9b (13 revisions) flutter/packages#5878

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 12, 2024

e20d34c Fix FlexibleSpaceBar centered title position and title color (

dd49cd8

flutter/flutter#140883)

engine-flutter-autoroll mentioned this pull request Jan 12, 2024

Roll Flutter from 9f2e681e7be6 to 52d2c1210994 (14 revisions) flutter/packages#5880

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 12, 2024

e20d34c Fix FlexibleSpaceBar centered title position and title color (

a69e214

flutter/flutter#140883)

engine-flutter-autoroll mentioned this pull request Jan 12, 2024

Roll Flutter from 9f2e681e7be6 to 7dc856ab8423 (15 revisions) flutter/packages#5882

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 12, 2024

e20d34c Fix FlexibleSpaceBar centered title position and title color (

90dfbc8

flutter/flutter#140883)

HansMuller mentioned this pull request Jan 19, 2024

Flutter Framework Team: Notable Commits #121415

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `FlexibleSpaceBar` centered title position and title color #140883

Fix `FlexibleSpaceBar` centered title position and title color #140883

Uh oh!

TahaTesser commented Jan 3, 2024 •

edited

Loading

Uh oh!

Piinks Jan 5, 2024

Uh oh!

Piinks Jan 5, 2024

Uh oh!

TahaTesser Jan 8, 2024 •

edited

Loading

Uh oh!

Piinks Jan 12, 2024

Uh oh!

Uh oh!

Uh oh!

Piinks left a comment

Uh oh!

emersion commented Jan 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-  /// If the length of the title is greater than the available space, set
-  /// this property to false, this aligns the title to the start of the
-  /// flexible space bar and applies [titlePadding] to the title.
+  /// If the length of the title is greater than the available space, set
+  /// this property to false. This aligns the title to the start of the
+  /// flexible space bar and applies [titlePadding] to the title.

Fix FlexibleSpaceBar centered title position and title color #140883

Fix FlexibleSpaceBar centered title position and title color #140883

Uh oh!

Conversation

TahaTesser commented Jan 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Code sample

Code sample

Before

After

Pre-launch Checklist

Uh oh!

Piinks Jan 5, 2024

Choose a reason for hiding this comment

Uh oh!

Piinks Jan 5, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jan 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Piinks Jan 12, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

emersion commented Jan 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix `FlexibleSpaceBar` centered title position and title color #140883

Fix `FlexibleSpaceBar` centered title position and title color #140883

TahaTesser commented Jan 3, 2024 •

edited

Loading

TahaTesser Jan 8, 2024 •

edited

Loading