Skip to content

Commit

Permalink
Updated the nested navigation NavigationBar example (#137788)
Browse files Browse the repository at this point in the history 
Updated the NavigationBar API doc that describes
examples/api/lib/material/navigation_bar/navigation_bar.2.dart and made
some cosmetic changes to the example to improve its appearance in
Material 3. Also did a little gratuitous reformatting.

Fixes #136125
  • Loading branch information
@HansMuller
HansMuller authored Nov 3, 2023
1 parent dca1f9e commit 3479aab
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 47 deletions.
115 changes: 74 additions & 41 deletions examples/api/lib/material/navigation_bar/navigation_bar.2.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,33 +32,47 @@ class _HomeState extends State<Home> with TickerProviderStateMixin<Home> {
int selectedIndex = 0;

AnimationController buildFaderController() {
final AnimationController controller =
AnimationController(vsync: this, duration: const Duration(milliseconds: 200));
controller.addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.dismissed) {
setState(() {}); // Rebuild unselected destinations offstage.
}
});
final AnimationController controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
controller.addStatusListener(
(AnimationStatus status) {
if (status == AnimationStatus.dismissed) {
setState(() {}); // Rebuild unselected destinations offstage.
}
},
);
return controller;
}

@override
void initState() {
super.initState();
navigatorKeys =
List<GlobalKey<NavigatorState>>.generate(allDestinations.length, (int index) => GlobalKey()).toList();
destinationFaders =
List<AnimationController>.generate(allDestinations.length, (int index) => buildFaderController()).toList();

navigatorKeys = List<GlobalKey<NavigatorState>>.generate(
allDestinations.length,
(int index) => GlobalKey(),
).toList();

destinationFaders = List<AnimationController>.generate(
allDestinations.length,
(int index) => buildFaderController(),
).toList();
destinationFaders[selectedIndex].value = 1.0;
destinationViews = allDestinations.map((Destination destination) {
return FadeTransition(
opacity: destinationFaders[destination.index].drive(CurveTween(curve: Curves.fastOutSlowIn)),
child: DestinationView(
destination: destination,
navigatorKey: navigatorKeys[destination.index],
),
);
}).toList();

final CurveTween tween = CurveTween(curve: Curves.fastOutSlowIn);
destinationViews = allDestinations.map<Widget>(
(Destination destination) {
return FadeTransition(
opacity: destinationFaders[destination.index].drive(tween),
child: DestinationView(
destination: destination,
navigatorKey: navigatorKeys[destination.index],
),
);
},
).toList();
}

@override
Expand All @@ -81,20 +95,22 @@ class _HomeState extends State<Home> with TickerProviderStateMixin<Home> {
top: false,
child: Stack(
fit: StackFit.expand,
children: allDestinations.map((Destination destination) {
final int index = destination.index;
final Widget view = destinationViews[index];
if (index == selectedIndex) {
destinationFaders[index].forward();
return Offstage(offstage: false, child: view);
} else {
destinationFaders[index].reverse();
if (destinationFaders[index].isAnimating) {
return IgnorePointer(child: view);
children: allDestinations.map(
(Destination destination) {
final int index = destination.index;
final Widget view = destinationViews[index];
if (index == selectedIndex) {
destinationFaders[index].forward();
return Offstage(offstage: false, child: view);
} else {
destinationFaders[index].reverse();
if (destinationFaders[index].isAnimating) {
return IgnorePointer(child: view);
}
return Offstage(child: view);
}
return Offstage(child: view);
}
}).toList(),
},
).toList(),
),
),
bottomNavigationBar: NavigationBar(
Expand All @@ -104,12 +120,14 @@ class _HomeState extends State<Home> with TickerProviderStateMixin<Home> {
selectedIndex = index;
});
},
destinations: allDestinations.map((Destination destination) {
return NavigationDestination(
icon: Icon(destination.icon, color: destination.color),
label: destination.title,
);
}).toList(),
destinations: allDestinations.map<NavigationDestination>(
(Destination destination) {
return NavigationDestination(
icon: Icon(destination.icon, color: destination.color),
label: destination.title,
);
},
).toList(),
),
),
);
Expand Down Expand Up @@ -148,6 +166,7 @@ class RootPage extends StatelessWidget {
final TextStyle headlineSmall = Theme.of(context).textTheme.headlineSmall!;
final ButtonStyle buttonStyle = ElevatedButton.styleFrom(
backgroundColor: destination.color,
foregroundColor: Colors.white,
visualDensity: VisualDensity.comfortable,
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
textStyle: headlineSmall,
Expand All @@ -157,6 +176,7 @@ class RootPage extends StatelessWidget {
appBar: AppBar(
title: Text('${destination.title} RootPage - /'),
backgroundColor: destination.color,
foregroundColor: Colors.white,
),
backgroundColor: destination.color[50],
body: Center(
Expand Down Expand Up @@ -236,15 +256,23 @@ class ListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
const int itemCount = 50;
final ColorScheme colorScheme = Theme.of(context).colorScheme;
final ButtonStyle buttonStyle = OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(
color: colorScheme.onSurface.withOpacity(0.12),
),
),
foregroundColor: destination.color,
fixedSize: const Size.fromHeight(128),
fixedSize: const Size.fromHeight(64),
textStyle: Theme.of(context).textTheme.headlineSmall,
);
return Scaffold(
appBar: AppBar(
title: Text('${destination.title} ListPage - /list'),
backgroundColor: destination.color,
foregroundColor: Colors.white,
),
backgroundColor: destination.color[50],
body: SizedBox.expand(
Expand All @@ -256,7 +284,11 @@ class ListPage extends StatelessWidget {
child: OutlinedButton(
style: buttonStyle.copyWith(
backgroundColor: MaterialStatePropertyAll<Color>(
Color.lerp(destination.color[100], Colors.white, index / itemCount)!,
Color.lerp(
destination.color[100],
Colors.white,
index / itemCount
)!,
),
),
onPressed: () {
Expand Down Expand Up @@ -303,6 +335,7 @@ class _TextPageState extends State<TextPage> {
appBar: AppBar(
title: Text('${widget.destination.title} TextPage - /list/text'),
backgroundColor: widget.destination.color,
foregroundColor: Colors.white,
),
backgroundColor: widget.destination.color[50],
body: Container(
Expand Down
18 changes: 12 additions & 6 deletions packages/flutter/lib/src/material/navigation_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,18 @@ const double _kIndicatorWidth = 64;
/// {@end-tool}
///
/// {@tool dartpad}
/// This example shows a [NavigationBar] as it is used within a [Scaffold]
/// widget when there are nested navigators that provide local navigation. The
/// [NavigationBar] has four [NavigationDestination] widgets with different
/// color schemes. The [onDestinationSelected] callback changes the selected
/// item's index and displays a corresponding page with its own local navigator
/// in the body of a [Scaffold].
/// This example shows a [NavigationBar] within a main [Scaffold]
/// widget that's used to control the visibility of destination pages.
/// Each destination has its own scaffold and a nested navigator that
/// provides local navigation. The example's [NavigationBar] has four
/// [NavigationDestination] widgets with different color schemes. Its
/// [onDestinationSelected] callback changes the selected
/// destination's index and displays a corresponding page with its own
/// local navigator and scaffold - all within the body of the main
/// scaffold. The destination pages are organized in a [Stack] and
/// switching destinations fades out the current page and
/// fades in the new one. Destinations that aren't visible or animating
/// are kept [Offstage].
///
/// ** See code in examples/api/lib/material/navigation_bar/navigation_bar.2.dart **
/// {@end-tool}
Expand Down

0 comments on commit 3479aab

Please sign in to comment.