Skip to content

Commit bd44399

Browse files
authored
Add Badge example (flutter#148053)
### Demo screenshot ![Screenshot 2024-05-09 at 18 47 21](https://github.com/flutter/flutter/assets/104349824/9ca4c89f-0d0a-48b2-8149-3fae73f54212) ### Related issue Fixes flutter#144336
1 parent a5e0c2f commit bd44399

File tree

3 files changed

+84
-0
lines changed

3 files changed

+84
-0
lines changed
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
7+
/// Flutter code sample for [Badge].
8+
9+
void main() => runApp(const BadgeExampleApp());
10+
11+
class BadgeExampleApp extends StatelessWidget {
12+
const BadgeExampleApp({super.key});
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return MaterialApp(
17+
home: Scaffold(
18+
appBar: AppBar(title: const Text('Badge Sample')),
19+
body: const BadgeExample(),
20+
),
21+
);
22+
}
23+
}
24+
25+
class BadgeExample extends StatelessWidget {
26+
const BadgeExample({super.key});
27+
28+
@override
29+
Widget build(BuildContext context) {
30+
return Center(
31+
child: Column(
32+
mainAxisAlignment: MainAxisAlignment.center,
33+
children: <Widget>[
34+
IconButton(
35+
icon: const Badge(
36+
label: Text('Your label'),
37+
backgroundColor: Colors.blueAccent,
38+
child: Icon(Icons.receipt),
39+
),
40+
onPressed: () {},
41+
),
42+
const SizedBox(height: 20),
43+
IconButton(
44+
icon: Badge.count(
45+
count: 9999,
46+
child: const Icon(Icons.notifications),
47+
),
48+
onPressed: () {},
49+
),
50+
],
51+
),
52+
);
53+
}
54+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter_api_samples/material/badge/badge.0.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Verify Badges have label and count', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.BadgeExampleApp(),
13+
);
14+
// Verify that two Badge(s) are present
15+
expect(find.byType(Badge), findsNWidgets(2));
16+
17+
// Verify that Badge.count displays label 999+ when count is greater than 999
18+
expect(find.text('999+'), findsOneWidget);
19+
20+
// Verify that Badge displays custom label
21+
expect(find.text('Your label'), findsOneWidget);
22+
});
23+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ import 'theme.dart';
2424
/// or a button's icon, as in [TextButton.icon]. The badge's default
2525
/// configuration is intended to work well with a default sized (24)
2626
/// [Icon].
27+
///
28+
/// {@tool dartpad}
29+
/// This example shows how to create a [Badge] with label and count
30+
/// wrapped on an icon in an [IconButton].
31+
///
32+
/// ** See code in examples/api/lib/material/badge/badge.0.dart **
33+
/// {@end-tool}
2734
class Badge extends StatelessWidget {
2835
/// Create a Badge that stacks [label] on top of [child].
2936
///

0 commit comments

Comments
 (0)