tree_navigation

Description:

tree navigation

Tree Navigation #
A package for navigation based on the GoRouter.
Initialization #
Wrap MyApp into RouteProvider.
void main() async {
await init();
runApp(RouteProvider(child: const MyApp()));
}
copied to clipboard
Inside MyApp widget initialize tree navigation. routeTreeDefaultPageBuilder and
routeTreeDefaultShellPageBuilder are optional for init method. If you do not pass them then you must
pass builder or pageBuilder for every TreeRoute or TreeShellRoute.
Note that globalKeys should be sorted in order of level. The top most keys come earlier in the list.
GlobalKey<NavigatorState> topKey = GlobalKey<NavigatorState>();
GlobalKey<NavigatorState> shellKey = GlobalKey<NavigatorState>();

abstract class Routes {
static const RouteInfo home = RouteInfo(
path: '/',
name: 'home',
isShellRoute: false,
);
static const RouteInfo newPage = RouteInfo(
path: '/newPage',
name: 'newPage',
isShellRoute: false,
);

static const List<RouteInfo> allRoutes = [home, newPage];
}

initState(){
super.initState();
TreeNavigation.init(
globalKeyList: [topKey, shellKey],
routeInfoList: Routes.allRoutes,
routeTreeDefaultPageBuilder: (_, state, child) => MyCustomTransitionPage(
key: state.pageKey,
child: child,
transitionsBuilder: (_, animation, ___, widget) {
return FadeTransition(
opacity: animation,
child: widget,
);
},
),
routeTreeDefaultShellPageBuilder: (_, state, parent, child) => MyCustomTransitionPage(
key: state.pageKey,
child: parent(child),
transitionsBuilder: (_, animation, ___, widget) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
final tween = Tween(begin: begin, end: end);
final offsetAnimation = animation.drive(tween);

return SlideTransition(
position: offsetAnimation,
child: widget,
);
},
),
);
}
copied to clipboard
In build method of MyApp widget do as following:
@override
Widget build(BuildContext context) {
return TreeNavigation.makeMaterialApp(
navigatorKey: topKey,
globalKeyList: [topKey, shellKey],
routeInfoList: Routes.allRoutes,
routes: [
TreeRoute(
routeInfo: Routes.home,
pageWidget: const MyHomePage(
title: 'Home',
color: Colors.white,
),
),
TreeShellRoute(
navigatorKey: shellKey,
pageWidget: (child) => MyHomePage(title: 'Shell Route', color: Colors.blue, child: child,),
routes: [
TreeRoute(
routeInfo: Routes.newPage,
pageWidget: const MyHomePage(
title: 'Sub Shell',
color: Colors.pink,
),
),
],
),
],
);
}
copied to clipboard
Usage #
You can access current route by:
RouteProvider.of(context)?.name;
Navigate to a screen by:
final navigation = GetIt.instance<NavigationInterface>();
navigation.goNamed(Routes.home);
copied to clipboard
Open a dialog by:
await navigation.openDialog<String>(dialog: const MyDialog());
copied to clipboard
Open a bottomSheet by:
await navigation.openBottomSheet<String>(bottomSheet: const MyBottomSheet());
copied to clipboard
Show a text toast by (You can use this instead of snackbar):
navigation.showTextToast(text: 'this is a toast');
copied to clipboard
Pop a dialog, bottomsheet or a screen by:
navigation.pop();
copied to clipboard
Pop all dialogs by:
navigation.popAllDialogs();
copied to clipboard
Pop all bottomsheets by:
navigation.popAllBottomSheets();
copied to clipboard
Pop all dialogs and bottomsheets by:
navigation.popAllPopUps();
copied to clipboard
Pop until a condition is satisfied:
navigation.popUntilRoute(verifyCondition: (currentRoute) {
return currentRoute == Routes.home;
});
copied to clipboard
Pop until reaching a pop up:
navigation.popUntilPopUp(verifyCondition: (currentPopUpName) => popUpName == currentPopUpName);
copied to clipboard
Show an overlay widget:
final handler = navigation.showOverlay(
child: Container(
color: Colors.brown,
child: const Text('Other overlay'),
),
alignment: Alignment.topLeft,
);
copied to clipboard
Dispose an overlay widget:
handler.remove();
handler.dispose();
copied to clipboard
Get context by:
navigation.context;
copied to clipboard
Check if there is any open dialog by:
navigation.isDialogOpen();
copied to clipboard
Check if there is any open bottomsheets by:
navigation.isBottomSheetOpen();
copied to clipboard
Check if there is any open dialog or bottomsheets by:
navigation.isDialogOrBottomSheetOpen();
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter