Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale #125038

TahaTesser · 2023-04-18T14:52:03Z

code sample

import 'package:flutter/material.dart';

/// Flutter code sample for [SliverAppBar.medium].

void main() {
  runApp(const AppBarMediumApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 3.0),
        child: Material(
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar.medium(
                leading:
                    IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
                title: const Text('Medium App Bar'),
                actions: <Widget>[
                  IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
                ],
              ),
              // SliverAppBar.large(
              //   leading:
              //       IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
              //   title: const Text('Large App Bar'),
              //   actions: <Widget>[
              //     IconButton(
              //         icon: const Icon(Icons.more_vert), onPressed: () {}),
              //   ],
              // ),
              // Just some content big enough to have something to scroll.
              SliverToBoxAdapter(
                child: Card(
                  child: SizedBox(
                    height: 1200,
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(8, 100, 8, 100),
                      child: Text(
                        'Here be scrolling content...',
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Before

Medium App Bar - `textScaleFactor: 3.0`	Large App Bar - `textScaleFactor.30`

After

Medium App Bar - `textScaleFactor: 3.0`	Large App Bar - `textScaleFactor.30`

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

Interesting! I did not know _kMaxTitleTextScaleFactor existed.
Is this in the spec? I see there is a TODO comment about documenting this that refers to #58769

Can you add some mention of this text scale limit to the AppBar docs?

TahaTesser · 2023-04-18T20:21:48Z

Is this in the spec? I see there is a TODO comment about documenting this that refers to #58769

It's not but the scale factor is relatively the same regular app bar when compared with the native.

(which also updates the position of the title so it doesn't cut off, which took me quite a while to figure out by testing native a lot)

Can you add some mention of this text scale limit to the AppBar docs?

Sure. :)

TahaTesser · 2023-04-18T20:28:35Z

@Piinks
I need to make a similar PR for NavigationRail.
I noticed the same lack of information there. The accessibility pages have no information about the text scale e.g https://m3.material.io/components/top-app-bar/accessibility.
I've to rely on existing scaling values in Flutter or test the native side myself to compare.

Piinks

LGTM

Piinks · 2023-04-24T23:41:49Z

packages/flutter/test/material/app_bar_test.dart

There is a strange indentation here

Oh I see, It looks like the comment is aligned withe the end of the todo colon. Not necessary, but I don't see why not. :)

I copied this comment from another class. It looks strange for sure. Fixed.

packages/flutter/test/material/app_bar_test.dart

…lutter/flutter#125038)

Roll Flutter from c9004ff to 66fa4c5 (68 revisions) flutter/flutter@c9004ff...66fa4c5 2023-04-26 [email protected] Remove web compile benchmarks that specify an attached device (flutter/flutter#125559) 2023-04-26 [email protected] Roll Flutter Engine from f75908135e10 to f125a54f5a57 (1 revision) (flutter/flutter#125560) 2023-04-26 [email protected] Roll Flutter Engine from c9db1587f207 to f75908135e10 (1 revision) (flutter/flutter#125558) 2023-04-26 [email protected] Roll Flutter Engine from 58a5a1e3f2c1 to c9db1587f207 (1 revision) (flutter/flutter#125555) 2023-04-26 [email protected] Roll Flutter Engine from 321f8015b9c2 to 58a5a1e3f2c1 (1 revision) (flutter/flutter#125552) 2023-04-26 [email protected] Roll Flutter Engine from 87f5f4e939cf to 321f8015b9c2 (1 revision) (flutter/flutter#125549) 2023-04-26 [email protected] Update prefer_final_parameters comment (flutter/flutter#125465) 2023-04-26 [email protected] Roll Flutter Engine from 706c023df44b to 87f5f4e939cf (1 revision) (flutter/flutter#125539) 2023-04-26 [email protected] Roll Flutter Engine from 7b385abd18a2 to 706c023df44b (1 revision) (flutter/flutter#125536) 2023-04-26 [email protected] Roll Flutter Engine from 610c57781b47 to 7b385abd18a2 (1 revision) (flutter/flutter#125533) 2023-04-26 [email protected] Roll Flutter Engine from b3cbf0678487 to 610c57781b47 (1 revision) (flutter/flutter#125531) 2023-04-26 [email protected] Add hostonly web compile size benchmarks (flutter/flutter#125518) 2023-04-26 [email protected] Roll Flutter Engine from 34ece7a4abac to b3cbf0678487 (6 revisions) (flutter/flutter#125529) 2023-04-25 [email protected] Handle dollar signs properly when generating localizations (flutter/flutter#125514) 2023-04-25 [email protected] Roll Flutter Engine from 6d798393a15a to 34ece7a4abac (1 revision) (flutter/flutter#125516) 2023-04-25 [email protected] Roll Flutter Engine from 469e5b409686 to 6d798393a15a (2 revisions) (flutter/flutter#125513) 2023-04-25 [email protected] Adds selected semantics flag to radio button for Apple devices (flutter/flutter#125499) 2023-04-25 [email protected] Roll Flutter Engine from 0e236982086b to 469e5b409686 (1 revision) (flutter/flutter#125510) 2023-04-25 [email protected] Relabel JSFunction as JSExportedDartFunction (flutter/flutter#125453) 2023-04-25 [email protected] Roll Flutter Engine from 60c4e61416cd to 0e236982086b (2 revisions) (flutter/flutter#125504) 2023-04-25 [email protected] iOS TextField spell check style (flutter/flutter#125432) 2023-04-25 [email protected] Roll Flutter Engine from 308bce499087 to 60c4e61416cd (1 revision) (flutter/flutter#125490) 2023-04-25 [email protected] Roll Flutter Engine from 54ddef68b124 to 308bce499087 (1 revision) (flutter/flutter#125485) 2023-04-25 [email protected] Roll Flutter Engine from 307416f43b5a to 54ddef68b124 (1 revision) (flutter/flutter#125481) 2023-04-25 [email protected] Roll Flutter Engine from 232810b36671 to 307416f43b5a (1 revision) (flutter/flutter#125475) 2023-04-25 [email protected] Roll Flutter Engine from 1c4b6c0cb862 to 232810b36671 (2 revisions) (flutter/flutter#125472) 2023-04-25 [email protected] Roll Flutter Engine from a26a479e86b3 to 1c4b6c0cb862 (1 revision) (flutter/flutter#125463) 2023-04-25 [email protected] Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale (flutter/flutter#125038) 2023-04-25 [email protected] Roll Flutter Engine from 3f4116c225e8 to a26a479e86b3 (1 revision) (flutter/flutter#125459) 2023-04-25 [email protected] Roll Flutter Engine from 64882f4b7371 to 3f4116c225e8 (2 revisions) (flutter/flutter#125458) 2023-04-25 [email protected] Roll Flutter Engine from 8fe8e94c02fc to 64882f4b7371 (1 revision) (flutter/flutter#125454) 2023-04-25 [email protected] Roll Flutter Engine from 5fbde6c0fc57 to 8fe8e94c02fc (10 revisions) (flutter/flutter#125452) 2023-04-24 [email protected] Add Sliders to `macrobenchmarks` (flutter/flutter#125296) 2023-04-24 [email protected] [date_picker] [date_range_picker] add properties to change switch-to icons (flutter/flutter#124881) 2023-04-24 [email protected] Sliver Constrained Cross Axis (flutter/flutter#125239) 2023-04-24 [email protected] tool: Move cdKey to CustomDimensionsEnum (flutter/flutter#125335) 2023-04-24 [email protected] Add `borderRadius` to LinearProgressIndicator (flutter/flutter#123517) 2023-04-24 [email protected] Fix JS types in _test_http_request.dart (flutter/flutter#125220) 2023-04-24 [email protected] Fix `OutlinedButton`, `TextButton`, and `IconButton` throw exception when passing only one cursor to `styleFrom` (flutter/flutter#125204) 2023-04-24 [email protected] Swap some iOS TESTOWNERS (flutter/flutter#125340) 2023-04-24 [email protected] Fix iOS touch drag behavior (flutter/flutter#125169) 2023-04-24 [email protected] Mark module_test_ios flaky (flutter/flutter#125426) 2023-04-24 [email protected] Implement url support for RouteInformation and didPushRouteInformation (flutter/flutter#119968) 2023-04-24 [email protected] [tool,web] Include more info URI on Wasm init failure (flutter/flutter#125312) 2023-04-24 [email protected] Do not run `windows_home_scroll_perf__timeline_summary` benchmark in presubmit (flutter/flutter#125343) 2023-04-24 [email protected] Tiny fix doc pointing to incorrect widget confusing the readers (flutter/flutter#125394) ...

I am trying to remove `textScaleFactor`-dependent logic from the framework since it's likely going to be deprecated, hopefully the original logic isn't from the material spec. I stole the sample code from #125038 and here are the screenshots (`textScaleFactor = 3.0`). Internal Tests: **no relevant test failures** | Medium | Large | | --------------- | --------------- | | ![flutter_01](https://github.com/flutter/flutter/assets/31859944/515226d9-716f-470a-b794-5fd14b957d36) | ![flutter_03](https://github.com/flutter/flutter/assets/31859944/475c421d-550e-4d02-be08-709b63b63011) |

Roll Flutter from c9004ff to 66fa4c5 (68 revisions) flutter/flutter@c9004ff...66fa4c5 2023-04-26 [email protected] Remove web compile benchmarks that specify an attached device (flutter/flutter#125559) 2023-04-26 [email protected] Roll Flutter Engine from f75908135e10 to f125a54f5a57 (1 revision) (flutter/flutter#125560) 2023-04-26 [email protected] Roll Flutter Engine from c9db1587f207 to f75908135e10 (1 revision) (flutter/flutter#125558) 2023-04-26 [email protected] Roll Flutter Engine from 58a5a1e3f2c1 to c9db1587f207 (1 revision) (flutter/flutter#125555) 2023-04-26 [email protected] Roll Flutter Engine from 321f8015b9c2 to 58a5a1e3f2c1 (1 revision) (flutter/flutter#125552) 2023-04-26 [email protected] Roll Flutter Engine from 87f5f4e939cf to 321f8015b9c2 (1 revision) (flutter/flutter#125549) 2023-04-26 [email protected] Update prefer_final_parameters comment (flutter/flutter#125465) 2023-04-26 [email protected] Roll Flutter Engine from 706c023df44b to 87f5f4e939cf (1 revision) (flutter/flutter#125539) 2023-04-26 [email protected] Roll Flutter Engine from 7b385abd18a2 to 706c023df44b (1 revision) (flutter/flutter#125536) 2023-04-26 [email protected] Roll Flutter Engine from 610c57781b47 to 7b385abd18a2 (1 revision) (flutter/flutter#125533) 2023-04-26 [email protected] Roll Flutter Engine from b3cbf0678487 to 610c57781b47 (1 revision) (flutter/flutter#125531) 2023-04-26 [email protected] Add hostonly web compile size benchmarks (flutter/flutter#125518) 2023-04-26 [email protected] Roll Flutter Engine from 34ece7a4abac to b3cbf0678487 (6 revisions) (flutter/flutter#125529) 2023-04-25 [email protected] Handle dollar signs properly when generating localizations (flutter/flutter#125514) 2023-04-25 [email protected] Roll Flutter Engine from 6d798393a15a to 34ece7a4abac (1 revision) (flutter/flutter#125516) 2023-04-25 [email protected] Roll Flutter Engine from 469e5b409686 to 6d798393a15a (2 revisions) (flutter/flutter#125513) 2023-04-25 [email protected] Adds selected semantics flag to radio button for Apple devices (flutter/flutter#125499) 2023-04-25 [email protected] Roll Flutter Engine from 0e236982086b to 469e5b409686 (1 revision) (flutter/flutter#125510) 2023-04-25 [email protected] Relabel JSFunction as JSExportedDartFunction (flutter/flutter#125453) 2023-04-25 [email protected] Roll Flutter Engine from 60c4e61416cd to 0e236982086b (2 revisions) (flutter/flutter#125504) 2023-04-25 [email protected] iOS TextField spell check style (flutter/flutter#125432) 2023-04-25 [email protected] Roll Flutter Engine from 308bce499087 to 60c4e61416cd (1 revision) (flutter/flutter#125490) 2023-04-25 [email protected] Roll Flutter Engine from 54ddef68b124 to 308bce499087 (1 revision) (flutter/flutter#125485) 2023-04-25 [email protected] Roll Flutter Engine from 307416f43b5a to 54ddef68b124 (1 revision) (flutter/flutter#125481) 2023-04-25 [email protected] Roll Flutter Engine from 232810b36671 to 307416f43b5a (1 revision) (flutter/flutter#125475) 2023-04-25 [email protected] Roll Flutter Engine from 1c4b6c0cb862 to 232810b36671 (2 revisions) (flutter/flutter#125472) 2023-04-25 [email protected] Roll Flutter Engine from a26a479e86b3 to 1c4b6c0cb862 (1 revision) (flutter/flutter#125463) 2023-04-25 [email protected] Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale (flutter/flutter#125038) 2023-04-25 [email protected] Roll Flutter Engine from 3f4116c225e8 to a26a479e86b3 (1 revision) (flutter/flutter#125459) 2023-04-25 [email protected] Roll Flutter Engine from 64882f4b7371 to 3f4116c225e8 (2 revisions) (flutter/flutter#125458) 2023-04-25 [email protected] Roll Flutter Engine from 8fe8e94c02fc to 64882f4b7371 (1 revision) (flutter/flutter#125454) 2023-04-25 [email protected] Roll Flutter Engine from 5fbde6c0fc57 to 8fe8e94c02fc (10 revisions) (flutter/flutter#125452) 2023-04-24 [email protected] Add Sliders to `macrobenchmarks` (flutter/flutter#125296) 2023-04-24 [email protected] [date_picker] [date_range_picker] add properties to change switch-to icons (flutter/flutter#124881) 2023-04-24 [email protected] Sliver Constrained Cross Axis (flutter/flutter#125239) 2023-04-24 [email protected] tool: Move cdKey to CustomDimensionsEnum (flutter/flutter#125335) 2023-04-24 [email protected] Add `borderRadius` to LinearProgressIndicator (flutter/flutter#123517) 2023-04-24 [email protected] Fix JS types in _test_http_request.dart (flutter/flutter#125220) 2023-04-24 [email protected] Fix `OutlinedButton`, `TextButton`, and `IconButton` throw exception when passing only one cursor to `styleFrom` (flutter/flutter#125204) 2023-04-24 [email protected] Swap some iOS TESTOWNERS (flutter/flutter#125340) 2023-04-24 [email protected] Fix iOS touch drag behavior (flutter/flutter#125169) 2023-04-24 [email protected] Mark module_test_ios flaky (flutter/flutter#125426) 2023-04-24 [email protected] Implement url support for RouteInformation and didPushRouteInformation (flutter/flutter#119968) 2023-04-24 [email protected] [tool,web] Include more info URI on Wasm init failure (flutter/flutter#125312) 2023-04-24 [email protected] Do not run `windows_home_scroll_perf__timeline_summary` benchmark in presubmit (flutter/flutter#125343) 2023-04-24 [email protected] Tiny fix doc pointing to incorrect widget confusing the readers (flutter/flutter#125394) ...

TahaTesser requested a review from Piinks April 18, 2023 14:55

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Apr 18, 2023

Piinks reviewed Apr 18, 2023

View reviewed changes

TahaTesser force-pushed the app_bar_medium_large_text_scale branch from 85b5a81 to cd32f3e Compare April 18, 2023 20:24

TahaTesser requested a review from Piinks April 18, 2023 20:28

Piinks force-pushed the app_bar_medium_large_text_scale branch from 8186009 to 5931018 Compare April 19, 2023 22:27

TahaTesser force-pushed the app_bar_medium_large_text_scale branch from d606413 to 3b23d1a Compare April 21, 2023 07:12

Piinks approved these changes Apr 24, 2023

View reviewed changes

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 24, 2023

TahaTesser added 5 commits April 25, 2023 10:21

Fix SliverAppBar.medium & SliverAppBar.large text scale

d050e79

Add docs

d9fb0a3

Fix HTML error

208f625

update html value

ba44e39

Fix comment indent

c3706c0

TahaTesser force-pushed the app_bar_medium_large_text_scale branch from d9a0d51 to c3706c0 Compare April 25, 2023 07:45

auto-submit bot merged commit 6e1d4f9 into flutter:master Apr 25, 2023

TahaTesser deleted the app_bar_medium_large_text_scale branch April 25, 2023 08:28

engine-flutter-autoroll mentioned this pull request Apr 25, 2023

Roll Flutter from 3476b966524f to 932faedce2f8 (93 revisions) flutter/packages#3813

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 25, 2023

6e1d4f9 Fix SliverAppBar.medium & SliverAppBar.large text scale (f…

909c6ab

…lutter/flutter#125038)

engine-flutter-autoroll mentioned this pull request Apr 25, 2023

Roll Flutter from 3476b966524f to 8cd11e91fb7d (94 revisions) flutter/packages#3815

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 25, 2023

6e1d4f9 Fix SliverAppBar.medium & SliverAppBar.large text scale (f…

1a8d42e

…lutter/flutter#125038)

engine-flutter-autoroll mentioned this pull request Apr 25, 2023

Roll Flutter from c9004ff822cf to 8cd11e91fb7d (47 revisions) flutter/packages#3817

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 25, 2023

6e1d4f9 Fix SliverAppBar.medium & SliverAppBar.large text scale (f…

5f82827

…lutter/flutter#125038)

engine-flutter-autoroll mentioned this pull request Apr 26, 2023

Roll Flutter from c9004ff822cf to b0ae2e81bab5 (66 revisions) flutter/packages#3827

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 26, 2023

6e1d4f9 Fix SliverAppBar.medium & SliverAppBar.large text scale (f…

cc15950

…lutter/flutter#125038)

engine-flutter-autoroll mentioned this pull request Apr 26, 2023

Roll Flutter from c9004ff822cf to c9d7bed4216b (67 revisions) flutter/packages#3829

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 26, 2023

6e1d4f9 Fix SliverAppBar.medium & SliverAppBar.large text scale (f…

7d8f26d

…lutter/flutter#125038)

engine-flutter-autoroll mentioned this pull request Apr 26, 2023

Roll Flutter from c9004ff822cf to 66fa4c5d301c (68 revisions) flutter/packages#3830

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 26, 2023

6e1d4f9 Fix SliverAppBar.medium & SliverAppBar.large text scale (f…

8ffd4af

…lutter/flutter#125038)

HansMuller mentioned this pull request Apr 28, 2023

Flutter Framework Team: Notable Commits #121415

Closed

LongCatIsLooong mentioned this pull request Jun 2, 2023

Remove textScaleFactor dependent logic from AppBar #128112

Merged

8 tasks

TahaTesser mentioned this pull request Jun 14, 2023

The title in the sliver appbar is not properly centered if centerTitle is true when navigating to other routes #128809

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale #125038

Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale #125038

Uh oh!

TahaTesser commented Apr 18, 2023 •

edited

Loading

Uh oh!

Piinks left a comment

Uh oh!

TahaTesser commented Apr 18, 2023 •

edited

Loading

Uh oh!

TahaTesser commented Apr 18, 2023

Uh oh!

Piinks left a comment

Uh oh!

Piinks Apr 24, 2023

Uh oh!

Piinks Apr 24, 2023

Uh oh!

TahaTesser Apr 25, 2023

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix SliverAppBar.medium & SliverAppBar.large text scale #125038

Fix SliverAppBar.medium & SliverAppBar.large text scale #125038

Uh oh!

Conversation

TahaTesser commented Apr 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Pre-launch Checklist

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

TahaTesser commented Apr 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TahaTesser commented Apr 18, 2023

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks Apr 24, 2023

Choose a reason for hiding this comment

Uh oh!

Piinks Apr 24, 2023

Choose a reason for hiding this comment

Uh oh!

TahaTesser Apr 25, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale #125038

Fix `SliverAppBar.medium` & `SliverAppBar.large` text scale #125038

TahaTesser commented Apr 18, 2023 •

edited

Loading

TahaTesser commented Apr 18, 2023 •

edited

Loading