Skip to content

Commit

Permalink
Add Badge example (#148053)
Browse files Browse the repository at this point in the history
### 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 #144336
  • Loading branch information
huycozy committed May 9, 2024
1 parent a5e0c2f commit bd44399
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 0 deletions.
54 changes: 54 additions & 0 deletions examples/api/lib/material/badge/badge.0.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

/// Flutter code sample for [Badge].
void main() => runApp(const BadgeExampleApp());

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

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Badge Sample')),
body: const BadgeExample(),
),
);
}
}

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

@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: const Badge(
label: Text('Your label'),
backgroundColor: Colors.blueAccent,
child: Icon(Icons.receipt),
),
onPressed: () {},
),
const SizedBox(height: 20),
IconButton(
icon: Badge.count(
count: 9999,
child: const Icon(Icons.notifications),
),
onPressed: () {},
),
],
),
);
}
}
23 changes: 23 additions & 0 deletions examples/api/test/material/badge/badge.0_test.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/badge/badge.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';

void main() {
testWidgets('Verify Badges have label and count', (WidgetTester tester) async {
await tester.pumpWidget(
const example.BadgeExampleApp(),
);
// Verify that two Badge(s) are present
expect(find.byType(Badge), findsNWidgets(2));

// Verify that Badge.count displays label 999+ when count is greater than 999
expect(find.text('999+'), findsOneWidget);

// Verify that Badge displays custom label
expect(find.text('Your label'), findsOneWidget);
});
}
7 changes: 7 additions & 0 deletions packages/flutter/lib/src/material/badge.dart
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@ import 'theme.dart';
/// or a button's icon, as in [TextButton.icon]. The badge's default
/// configuration is intended to work well with a default sized (24)
/// [Icon].
///
/// {@tool dartpad}
/// This example shows how to create a [Badge] with label and count
/// wrapped on an icon in an [IconButton].
///
/// ** See code in examples/api/lib/material/badge/badge.0.dart **
/// {@end-tool}
class Badge extends StatelessWidget {
/// Create a Badge that stacks [label] on top of [child].
///
Expand Down

0 comments on commit bd44399

Please sign in to comment.