Skip to content

Add badge widget #92257

@MCarlomagno

Description

@MCarlomagno

Use case/Problem

I couldn't find a native way to add badges to icons without doing some workaround with extra widgets. This seem to be allowed by the material design guidelines and they even show examples using it. Material design badging

I also found some open issues related with this topic, such as Add support for Badges on BottomNavigationBarItems.

Proposal

Extend Icon() API adding a badge like the follow example:

Icon.badge(
	Icons.settings, 
	badge: Badge(
		visible: true,
		type: BadgeType.numeric,
		maxValue: 20
		value: 10),
);

Where the type would be enum with values like:

enum BadgeType {
	numeric,
	boolean,
}

In case of boolean

the badge only would display the single point at the corner of the Icon as follows.

boolean_type

In case of numeric

the badge would show the given value (or the max value with the + suffix if the value surpasses it)
numeric_type
numeric_type_max

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.r: duplicateIssue is closed as a duplicate of an existing issue

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions