Skip to content

Add Badge usage example #144336

@aran

Description

@aran

Steps to reproduce

In up-to-date Flutter, the following code should render a standard Material 3 badge indicator over the action icon:

    Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
          actions: [
            Badge.count(
              count: 3,
              child: IconButton(
                icon: const Icon(Icons.inbox),
                onPressed: () {},
              ),
            )
          ],
        ),
        body: const Center(
          child: Text(
            'Hello, Flutter!',
          ),
        ),
      )

Expected results

Per https://m3.material.io/components/badges/overview, the badge should render "Anchor badges inside the icon bounding box, at the upper trailing edge of the icon". It should render correctly (and without additional configuration) at least in the following contexts:

"Badges are most commonly used within other components, such as navigation bar, navigation rail, top app bars, and tabs."

Here is a screenshot from material guidelines:

Screenshot 2024-02-28 at 11 33 51 AM

Actual results

The badge is rendered too high and too far to the right of the icon.

Code sample

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
          actions: [
            Badge.count(
              count: 3,
              child: IconButton(
                icon: const Icon(Icons.inbox),
                onPressed: () {},
              ),
            )
          ],
        ),
        body: const Center(
          child: Text(
            'Hello, Flutter!',
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screenshot 2024-02-28 at 11 36 10 AM

Logs

Logs
N/A

Flutter Doctor output

Doctor output
N/A

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listd: examplesSample code and demosf: material designflutter/packages/flutter/material repository.found in release: 3.19Found to occur in 3.19found in release: 3.20Found to occur in 3.20frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions