Add Badge example (#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 https://github.com/flutter/flutter/issues/144336
This commit is contained in:
huycozy 2024-05-09 23:47:16 +07:00 committed by GitHub
parent a5e0c2ffe7
commit bd44399865
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 84 additions and 0 deletions

View File

@ -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: () {},
),
],
),
);
}
}

View File

@ -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);
});
}

View File

@ -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].
///