Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData #114560

HansMuller · 2022-11-03T01:09:57Z

Adds support for large and small badge decorations per the Material 3 spec: https://m3.material.io/components/badges/overview.

Badges are typically added above an Icon widget that's part of a button or navigation item. For example:

  BottomNavigationBarItem(
    icon: Badge(
      label: Text('1'),
      child: Icon(Icons.business),
    ),
    label: 'Business',
  ),

A "small" badge, displayed as tiny filled circle, doesn't specify a label:

  BottomNavigationBarItem(
    icon: Badge(
      child: Icon(Icons.home),
    ),
    label: 'Home',
  ),

Fixes #114032

darrenaustin

LGTM. Nice. Very clean.

Given that a main use case is showing counts, would it make sense to have a named constructor that took care of translating an int to a string converting anything over 999 to "999+"? Something like:

  Badge.count(int count, {
    super.key,
    this.backgroundColor,
    this.foregroundColor,
    this.smallSize,
    this.largeSize,
    this.textStyle,
    this.padding,
    this.alignment,
    this.child,
  }) : label = Text(count > 999 ? '999+' : count.toString());

Which makes this case easier without removing the flexibility of having anything in the label.

darrenaustin · 2022-11-03T16:31:19Z

dev/tools/gen_defaults/lib/badge_template.dart

+  );
+
+  final BuildContext context;
+


Probably not that important, but you could add:

late final ThemeData _theme = Theme.of(context); late final ColorScheme _colors = _theme.colorScheme;

and then in the constructor of the template add

const BadgeTemplate(super.blockName, super.fileName, super.tokens, { super.colorSchemePrefix = '_colors.', });

Which might make the color lookups slightly more efficient.

darrenaustin · 2022-11-03T16:33:10Z

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

+  /// also override [largeSize], [padding], and [alignment].
+  final TextStyle? textStyle;
+
+


Super nit: extra line here an below.

HansMuller · 2022-11-03T18:42:34Z

Given that a main use case is showing counts, would it make sense to have a named constructor that took care of translating an int to a string converting anything over 999 to "999+"? Something like:
  Badge.count(int count, {
...
  }) : label = Text(count > 999 ? '999+' : count.toString());
Which makes this case easier without removing the flexibility of having anything in the label.

That's a good idea. I will leave it for a follow-on PR.

rydmike · 2022-11-07T03:06:00Z

Nice little new widget @HansMuller, love it! 😀

I like the simple count idea too @darrenaustin.

Here is another small usability suggestion.

Given that for widgets that may have a badge under certain conditions, that you typically may not want to show any kind of badge at all on its child when this condition is not met, it would be very convenient to have such a condition in the constructor.

Where it preferably does not build a badge at all around the child if the condition to show a badge is not true. The condition could default to true, to match already made API.

Sure you can add your own custom little ifwrapper or do ternaries where one child, typically an Icon, has the badge and the other one not, but both are a tiny nuisance for a widget that often should wrap another widget, but sometimes do nothing or not even be there. Considering this, a convenience like this would be appreciated and useful.

Tooltip is a similar case, that can be silenced by setting it to an empty string, where it shows nothing, and not an empty tooltip bubble. Here we cannot really use that approach, but using a condition instead could be a simple approach.

A minor observation about the generated M3 theme defaults.

It looks up Theme.of(context) nicely once, stores it in a late final _theme and uses that to access the needed two colorScheme colors, but then ignores the _theme it has for the textStyle and finds the inherited Theme.of(context) a 2nd time for that.
Minor, but why not use the _theme it already looked up?

Is this a common thing with generated M3 themes? Yes still minor, but it may add up. Perhaps something to double check generally too.

…ThemeData (flutter/flutter#114560)

…ThemeData (#114560)" This reverts commit a6da104.

* 5280135 ecd3c4857 Roll Fuchsia Mac SDK from sNXsQVxntMX8f42LE... to 9Jb1-3tRPQ2ZhpTQC... (flutter/engine#37363) (flutter/flutter#114772) * a6da104 Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (flutter/flutter#114560) * 19c5fc5 0cbdf464c Add Matrix::LookAt (flutter/engine#37361) (flutter/flutter#114786) * c551fe3 4e45cfb4a Roll Fuchsia Mac SDK from 9Jb1-3tRPQ2ZhpTQC... to 5XOj9l5e2wkSpMKT1... (flutter/engine#37369) (flutter/flutter#114789) * a54a46d 6b57fddd1 Bump github/codeql-action from 2.1.29 to 2.1.31 (flutter/engine#37374) (flutter/flutter#114798) * 3c9288c Increase minimum supported macOS version from 10.13 to 10.14 (flutter/flutter#114713) * a1289a4 891d4a357 Roll Skia from c3c31be8729b to 513f0fd34590 (2 revisions) (flutter/engine#37377) (flutter/flutter#114802)

HansMuller · 2022-11-07T16:14:19Z

I've had to revert this PR (#114819) because Badge collides with existing app class names.

@rydmike

Given that for widgets that may have a badge under certain conditions, that you typically may not want to show any kind of badge at all on its child when this condition is not met, it would be very convenient to have such a condition in the constructor.

That's a good suggestion. We could add an isLabelVisible flag.

It looks up Theme.of(context) nicely once, stores it in a late final _theme and uses that to access the needed two colorScheme colors, but then ignores the _theme it has for the textStyle and finds the inherited Theme.of(context) a 2nd time for that. Minor, but why not use the _theme it already looked up?

Good point, that was an oversight.

…ThemeData (#114560)" (#114819) This reverts commit a6da104.

rydmike · 2022-11-07T20:03:39Z

@HansMuller, I know it is not in the Material 3 design spec, but a very commonly used design with Badges is to have a margin (observed widths varies) around it, typically of effective background color, so that the Badge does not touch the icon. Such a margin could default to none, for the current Material 3 design, but be added to support slight design variations.

See current Twitter Android badges as an example:

EDIT: I know it is tricky one to pull of, as the needed background color to overlap on the icon varies with where the Badge is used. Typically on icons that may be on surfaces with various degree of elevation based tint. Maybe that is why it is not included in the M3 design. It is a good design though, it increases the legibility of the small Badge.

…ThemeData (flutter/flutter#114560)

* 5280135 ecd3c4857 Roll Fuchsia Mac SDK from sNXsQVxntMX8f42LE... to 9Jb1-3tRPQ2ZhpTQC... (flutter/engine#37363) (flutter/flutter#114772) * a6da104 Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (flutter/flutter#114560) * 19c5fc5 0cbdf464c Add Matrix::LookAt (flutter/engine#37361) (flutter/flutter#114786) * c551fe3 4e45cfb4a Roll Fuchsia Mac SDK from 9Jb1-3tRPQ2ZhpTQC... to 5XOj9l5e2wkSpMKT1... (flutter/engine#37369) (flutter/flutter#114789) * a54a46d 6b57fddd1 Bump github/codeql-action from 2.1.29 to 2.1.31 (flutter/engine#37374) (flutter/flutter#114798) * 3c9288c Increase minimum supported macOS version from 10.13 to 10.14 (flutter/flutter#114713) * a1289a4 891d4a357 Roll Skia from c3c31be8729b to 513f0fd34590 (2 revisions) (flutter/engine#37377) (flutter/flutter#114802) * 04d6fd2 Roll Plugins from a279b9d to 3ca3410 (4 revisions) (flutter/flutter#114813) * 151c831 92d9ad27f Roll Skia from 513f0fd34590 to da9fad017aee (2 revisions) (flutter/engine#37379) (flutter/flutter#114816) * d6a8e92 Revert "Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (#114560)" (flutter/flutter#114819) * 7de60bb 334549704 Roll buildroot to d13d64086f5e301bd0415eede895b34af220ef42 (flutter/engine#37380) (flutter/flutter#114821) * 496cf62 Delegate TestWindow.updateSemantics to the wrapped SingletonFlutterWindow (flutter/flutter#114733) * 497a528 Fix TextField/CupertinoTextField hint style overflow not work. (flutter/flutter#114335) * 7e36cf1 Mac Page Up / Page Down in text fields (flutter/flutter#105497) * 77c06c2 0075e10bc Move gclient var property to ci.yaml (flutter/engine#37351) (flutter/flutter#114828) * 378387b when getting xcworkspace, exclude hidden files (flutter/flutter#114099) * e901832 4e03d059d [Android] Speed up the method 'FlutterRenderer.getBitmap' (flutter/engine#37342) (flutter/flutter#114833) * 3cde69e Revert "Revert "Scribble mixin (#104128)" (#114647)" (flutter/flutter#114698) * e1adc96 feat: provide a way to set the initial child's alignment (flutter/flutter#114745) * fe5eb2d ee48c0392 Roll Fuchsia Mac SDK from 5XOj9l5e2wkSpMKT1... to sa5bVGimNo3JwLV27... (flutter/engine#37386) (flutter/flutter#114836) * 5628ebf [RawKeyboard] Allow inconsistent modifiers for Web (flutter/flutter#114499) * f1cdfa2 Use AppBar.systemOverlayStyle to style system navigation bar (flutter/flutter#104827) * e4e902d [flutter_tools] add compilation failure tests for new cases added in impellerc (flutter/flutter#114757) * 7640f31 a81a715ce Revert "Remove deprecated calls to updateSemantics in `PlatformDispatcher` (#36673)" (flutter/engine#37388) (flutter/flutter#114842) * 585d445 Roll Flutter Engine from a81a715ce6b2 to df602070ac4b (3 revisions) (flutter/flutter#114847) * 1ca2e0b Fix `CastError` in `StadiumBorder.lerpTo` and `StadiumBorder.lerpFrom` when using `BorderRadiusDirectional` (flutter/flutter#114826) * 2e85e74 004a30516 [fuchsia] embedding-flutter test (flutter/engine#37052) (flutter/flutter#114854) * 139b8f4 Roll Flutter Engine from 004a305166d5 to e7d7edab98ad (2 revisions) (flutter/flutter#114855) * 53e6876 Allow Flutter golden file tests to be flaky (flutter/flutter#114450) * a1432a9 Refactor fix_data.yaml (flutter/flutter#114192)

…ThemeData (#114560) (#115002) Requires G3Fix cl/486997831

* 5280135 ecd3c4857 Roll Fuchsia Mac SDK from sNXsQVxntMX8f42LE... to 9Jb1-3tRPQ2ZhpTQC... (flutter/engine#37363) (flutter/flutter#114772) * a6da104 Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (flutter/flutter#114560) * 19c5fc5 0cbdf464c Add Matrix::LookAt (flutter/engine#37361) (flutter/flutter#114786) * c551fe3 4e45cfb4a Roll Fuchsia Mac SDK from 9Jb1-3tRPQ2ZhpTQC... to 5XOj9l5e2wkSpMKT1... (flutter/engine#37369) (flutter/flutter#114789) * a54a46d 6b57fddd1 Bump github/codeql-action from 2.1.29 to 2.1.31 (flutter/engine#37374) (flutter/flutter#114798) * 3c9288c Increase minimum supported macOS version from 10.13 to 10.14 (flutter/flutter#114713) * a1289a4 891d4a357 Roll Skia from c3c31be8729b to 513f0fd34590 (2 revisions) (flutter/engine#37377) (flutter/flutter#114802)

flutter#114560)

…ThemeData (flutter#114560)" (flutter#114819) This reverts commit a6da104.

…ThemeData (flutter#114560) (flutter#115002) Requires G3Fix cl/486997831

flutter#114560)

…ThemeData (flutter#114560)" (flutter#114819) This reverts commit a6da104.

…ThemeData (flutter#114560) (flutter#115002) Requires G3Fix cl/486997831

* 5280135 ecd3c4857 Roll Fuchsia Mac SDK from sNXsQVxntMX8f42LE... to 9Jb1-3tRPQ2ZhpTQC... (flutter/engine#37363) (flutter/flutter#114772) * a6da104 Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (flutter/flutter#114560) * 19c5fc5 0cbdf464c Add Matrix::LookAt (flutter/engine#37361) (flutter/flutter#114786) * c551fe3 4e45cfb4a Roll Fuchsia Mac SDK from 9Jb1-3tRPQ2ZhpTQC... to 5XOj9l5e2wkSpMKT1... (flutter/engine#37369) (flutter/flutter#114789) * a54a46d 6b57fddd1 Bump github/codeql-action from 2.1.29 to 2.1.31 (flutter/engine#37374) (flutter/flutter#114798) * 3c9288c Increase minimum supported macOS version from 10.13 to 10.14 (flutter/flutter#114713) * a1289a4 891d4a357 Roll Skia from c3c31be8729b to 513f0fd34590 (2 revisions) (flutter/engine#37377) (flutter/flutter#114802)

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. c: contributor-productivity Team-specific productivity, code health, technical debt. labels Nov 3, 2022

HansMuller requested a review from darrenaustin November 3, 2022 01:12

HansMuller force-pushed the badge branch 2 times, most recently from 7afeefa to a27c918 Compare November 3, 2022 14:25

darrenaustin approved these changes Nov 3, 2022

View reviewed changes

Hans Muller added 8 commits November 3, 2022 11:51

merge

e7a6644

added tests

b2e1790

a little simplification

6b8bb23

fixed a LintO

a0c3f09

fixed a snippet fail

553ae8c

API doc typos

856fb98

removed maxWidth

b107b9d

updated per review feedback

1cad62b

HansMuller force-pushed the badge branch from a27c918 to 1cad62b Compare November 3, 2022 18:51

HansMuller added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 3, 2022

HansMuller merged commit a6da104 into flutter:master Nov 7, 2022

HansMuller deleted the badge branch November 7, 2022 01:21

engine-flutter-autoroll mentioned this pull request Nov 7, 2022

Roll Flutter from 5ea5a5330169 to a1289a41358d (7 revisions) flutter/plugins#6677

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Nov 7, 2022

a6da104 Adds support for the Material Badge widget, BadgeTheme, Badge…

aed6b36

…ThemeData (flutter/flutter#114560)

HansMuller pushed a commit that referenced this pull request Nov 7, 2022

Revert "Adds support for the Material Badge widget, BadgeTheme, Badge…

4c6c983

…ThemeData (#114560)" This reverts commit a6da104.

HansMuller mentioned this pull request Nov 7, 2022

Revert "Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData" #114819

Merged

HansMuller added a commit that referenced this pull request Nov 7, 2022

Revert "Adds support for the Material Badge widget, BadgeTheme, Badge…

d6a8e92

…ThemeData (#114560)" (#114819) This reverts commit a6da104.

engine-flutter-autoroll mentioned this pull request Nov 8, 2022

Roll Flutter from 5ea5a5330169 to a1432a9c5da2 (30 revisions) flutter/packages#2788

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 8, 2022

a6da104 Adds support for the Material Badge widget, BadgeTheme, Badge…

607ab0b

…ThemeData (flutter/flutter#114560)

HansMuller mentioned this pull request Nov 9, 2022

Reland: Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (#114560) #115002

Merged

HansMuller added a commit that referenced this pull request Nov 10, 2022

Reland: Adds support for the Material Badge widget, BadgeTheme, Badge…

5a60045

…ThemeData (#114560) (#115002) Requires G3Fix cl/486997831

This was referenced Nov 14, 2022

Added Badge.isLabelVisible flag #115292

Merged

Added Badge.count constructor #115297

Merged

jpnurmi mentioned this pull request Nov 15, 2022

Use material badge instead of pub package ubuntu/app-center#519

Closed

shogohida pushed a commit to shogohida/flutter that referenced this pull request Dec 7, 2022

Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (

d2ab813

flutter#114560)

shogohida pushed a commit to shogohida/flutter that referenced this pull request Dec 7, 2022

Revert "Adds support for the Material Badge widget, BadgeTheme, Badge…

bc09e3d

…ThemeData (flutter#114560)" (flutter#114819) This reverts commit a6da104.

shogohida pushed a commit to shogohida/flutter that referenced this pull request Dec 7, 2022

Reland: Adds support for the Material Badge widget, BadgeTheme, Badge…

4df1357

…ThemeData (flutter#114560) (flutter#115002) Requires G3Fix cl/486997831

huycozy mentioned this pull request Dec 21, 2022

Material widget Badge is missing #117451

Closed

robiness mentioned this pull request Jan 9, 2023

Flutter material introduced a Badge widget as well yako-dev/flutter_badges#96

Closed

This was referenced Jan 10, 2023

FileSystemException: FileSystemException: Cannot open file, path = '/data/user/0/org.openfoodfacts.scanner/cache/crop_... openfoodfacts/smooth-app#3533

Closed

Badge for pending tasks openfoodfacts/smooth-app#3565

Closed

gspencergoog pushed a commit to gspencergoog/flutter that referenced this pull request Jan 19, 2023

Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData (

2ef65fb

flutter#114560)

gspencergoog pushed a commit to gspencergoog/flutter that referenced this pull request Jan 19, 2023

Revert "Adds support for the Material Badge widget, BadgeTheme, Badge…

9d551f5

…ThemeData (flutter#114560)" (flutter#114819) This reverts commit a6da104.

gspencergoog pushed a commit to gspencergoog/flutter that referenced this pull request Jan 19, 2023

Reland: Adds support for the Material Badge widget, BadgeTheme, Badge…

1fbf070

…ThemeData (flutter#114560) (flutter#115002) Requires G3Fix cl/486997831

darshankawar mentioned this pull request Jan 30, 2023

Badge widget alignment doesn't work as intended #119324

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData #114560

Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData #114560

Uh oh!

HansMuller commented Nov 3, 2022 •

edited

Loading

Uh oh!

darrenaustin left a comment

Uh oh!

darrenaustin Nov 3, 2022

Uh oh!

darrenaustin Nov 3, 2022

Uh oh!

HansMuller commented Nov 3, 2022

Uh oh!

rydmike commented Nov 7, 2022

Uh oh!

HansMuller commented Nov 7, 2022

Uh oh!

rydmike commented Nov 7, 2022 •

edited

Loading

Uh oh!

Uh oh!

		/// also override [largeSize], [padding], and [alignment].
		final TextStyle? textStyle;

Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData #114560

Adds support for the Material Badge widget, BadgeTheme, BadgeThemeData #114560

Uh oh!

Conversation

HansMuller commented Nov 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

darrenaustin left a comment

Choose a reason for hiding this comment

Uh oh!

darrenaustin Nov 3, 2022

Choose a reason for hiding this comment

Uh oh!

darrenaustin Nov 3, 2022

Choose a reason for hiding this comment

Uh oh!

HansMuller commented Nov 3, 2022

Uh oh!

rydmike commented Nov 7, 2022

Uh oh!

HansMuller commented Nov 7, 2022

Uh oh!

rydmike commented Nov 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

HansMuller commented Nov 3, 2022 •

edited

Loading

rydmike commented Nov 7, 2022 •

edited

Loading