firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Badge widget to NavigationBar and NavigationRail examples (#129834)

Browse Source 
fixes [Showcase `Badge` widget in `NavigationBar` and `NavigationRail` examples
](https://github.com/flutter/flutter/issues/129832)

| Preview | Preview | Preview |
| --------------- | --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/808c9577-c6b4-465f-b9fe-100d422dd408" /> | <img src="https://github.com/flutter/flutter/assets/48603081/c9b3ee03-56d7-4220-94cf-06e235631714" /> | <img src="https://github.com/flutter/flutter/assets/48603081/43fab47b-25e8-4412-92d2-6d4868e43ff8"  /> |
This commit is contained in:
Taha Tesser 2023-07-11 12:30:05 +03:00 committed by GitHub
parent eaf01a9a50
commit 476e2d5166
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
examples/api/lib/material/navigation_bar/navigation_bar.0.dart
View File

@ -13,7 +13,10 @@ class NavigationBarApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(home: NavigationExample());
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const NavigationExample(),
);
}
}
@ -29,6 +32,7 @@ class _NavigationExampleState extends State<NavigationExample> {
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return Scaffold(
bottomNavigationBar: NavigationBar(
onDestinationSelected: (int index) {
@ -36,7 +40,7 @@ class _NavigationExampleState extends State<NavigationExample> {
currentPageIndex = index;
});
},
indicatorColor: Colors.amber[800],
indicatorColor: Colors.amber,
selectedIndex: currentPageIndex,
destinations: const <Widget>[
NavigationDestination(
@ -45,31 +49,94 @@ class _NavigationExampleState extends State<NavigationExample> {
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.business),
label: 'Business',
icon: Badge(child: Icon(Icons.notifications_sharp)),
label: 'Notifications',
),
NavigationDestination(
selectedIcon: Icon(Icons.school),
icon: Icon(Icons.school_outlined),
label: 'School',
icon: Badge(
label: Text('2'),
child: Icon(Icons.messenger_sharp),
),
label: 'Messages',
),
],
),
body: <Widget>[
Container(
color: Colors.red,
alignment: Alignment.center,
child: const Text('Page 1'),
/// Home page
Card(
shadowColor: Colors.transparent,
margin: const EdgeInsets.all(8.0),
child: SizedBox.expand(
child: Center(
child: Text(
'Home page',
style: theme.textTheme.titleLarge,
),
),
),
),
Container(
color: Colors.green,
alignment: Alignment.center,
child: const Text('Page 2'),
/// Notifications page
const Padding(
padding: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Card(
child: ListTile(
leading: Icon(Icons.notifications_sharp),
title: Text('Notification 1'),
subtitle: Text('This is a notification'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.notifications_sharp),
title: Text('Notification 2'),
subtitle: Text('This is a notification'),
),
),
],
),
),
Container(
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Page 3'),
/// Messages page
ListView.builder(
reverse: true,
itemCount: 2,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(8.0),
),
child: Text(
'Hello',
style: theme.textTheme.bodyLarge!
.copyWith(color: theme.colorScheme.onPrimary),
),
),
);
}
return Align(
alignment: Alignment.centerLeft,
child: Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(8.0),
),
child: Text(
'Hi!',
style: theme.textTheme.bodyLarge!
.copyWith(color: theme.colorScheme.onPrimary),
),
),
);
},
),
][currentPageIndex],
);

16
examples/api/lib/material/navigation_rail/navigation_rail.1.dart
View File

@ -14,7 +14,7 @@ class NavigationRailExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
theme: ThemeData(useMaterial3: true),
home: const NavRailExample(),
);
}
@ -73,13 +73,19 @@ class _NavRailExampleState extends State<NavRailExample> {
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
icon: Badge(child: Icon(Icons.bookmark_border)),
selectedIcon: Badge(child: Icon(Icons.book)),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
icon: Badge(
label: Text('4'),
child: Icon(Icons.star_border),
),
selectedIcon: Badge(
label: Text('4'),
child: Icon(Icons.star),
),
label: Text('Third'),
),
],

34
examples/api/test/material/navigation_bar/navigation_bar.0_test.dart
View File

@ -17,20 +17,36 @@ void main() {
/// NavigationDestinations must be rendered
expect(find.text('Home'), findsOneWidget);
expect(find.text('Business'), findsOneWidget);
expect(find.text('School'), findsOneWidget);
expect(find.text('Notifications'), findsOneWidget);
expect(find.text('Messages'), findsOneWidget);
/// initial index must be zero
/// Test notification badge.
final Badge notificationBadge = tester.firstWidget(find.ancestor(
of: find.byIcon(Icons.notifications_sharp),
matching: find.byType(Badge),
));
expect(notificationBadge.label, null);
/// Test messages badge.
final Badge messagesBadge = tester.firstWidget(find.ancestor(
of: find.byIcon(Icons.messenger_sharp),
matching: find.byType(Badge),
));
expect(messagesBadge.label, isNotNull);
/// Initial index must be zero
expect(navigationBarWidget.selectedIndex, 0);
expect(find.text('Home page'), findsOneWidget);
/// switch to second tab
await tester.tap(find.text('Business'));
/// Switch to second tab
await tester.tap(find.text('Notifications'));
await tester.pumpAndSettle();
expect(find.text('Page 2'), findsOneWidget);
expect(find.text('This is a notification'), findsNWidgets(2));
/// switch to third tab
await tester.tap(find.text('School'));
/// Switch to third tab
await tester.tap(find.text('Messages'));
await tester.pumpAndSettle();
expect(find.text('Page 3'), findsOneWidget);
expect(find.text('Hi!'), findsOneWidget);
expect(find.text('Hello'), findsOneWidget);
});
}

20
examples/api/test/material/navigation_rail/navigation_rail.1_test.dart
View File

@ -94,4 +94,24 @@ void main() {
expect(find.byType(FloatingActionButton), findsOneWidget);
expect(find.byType(IconButton), findsOneWidget);
});
testWidgets('Destinations have badge', (WidgetTester tester) async {
await tester.pumpWidget(
const example.NavigationRailExampleApp(),
);
// Test badge wthout label.
final Badge notificationBadge = tester.firstWidget(find.ancestor(
of: find.byIcon(Icons.bookmark_border),
matching: find.byType(Badge),
));
expect(notificationBadge.label, null);
// Test badge with label.
final Badge messagesBadge = tester.firstWidget(find.ancestor(
of: find.byIcon(Icons.star_border),
matching: find.byType(Badge),
));
expect(messagesBadge.label, isNotNull);
});
}