Description:

yana

YANA - Yet Another Navigation Approach #
YANA provides a convenient way to use declarative state-driven testable navigation. It is Navigator 2.0 without rough edges.
Declarative #
The declarative approach separates navigation from UI and business logic. No more Navigator.push and Navigator.pop in surprising places.
TreeNavNode buildNavigation(state) => firstOf<AppState>(
when: always,
pages: [
_loginFlow(),
_authedFlow(),
],
)(state);

_loginFlow() => anyOf<AppState>(
when: hasNoUser,
pages: [
materialPage(
when: always,
name: ScreenKeys.authorization,
builder: (_) => const LoginScreen(),
onPopPage: () => false,
)
],
);

_authedFlow() => anyOf<AppState>(
when: hasUser,
pages: [
materialPage(
when: always,
name: ScreenKeys.books,
builder: (_) => const BooksScreen(),
onPopPage: () => false,
),
materialPage(
when: hasSelectedBook,
name: ScreenKeys.bookDetails,
builder: (_) => const BookDetailsScreen(),
onPopPage: () => false,
),
],
);
copied to clipboard
State-driven #
Always predictable screens based on your state. Thanks to Navigator 2.0!
class AppRouterDelegate {
TreeNavNode _navNode;
StreamSubscription<AppState> _storeSubscription;

AppRouterDelegate(store) {
_storeSubscription = store.onChange.listen((event) {
_navNode = buildNavigation(store);
notifyListeners();
});
}

@override
Widget build(BuildContext context) {
final node = _navNode;
final pages = [...node.pages];

return Navigator(
key: navigatorKey,
pages: pages,
onPopPage: (route, result) {
if (node.onPopPage!(route, result)) {
return route.didPop(result);
}
return false;
},
);
}
}
copied to clipboard
Testable #
Simple unit tests guarantee that each state is translated to the expected navigation configuration. Check tests in demos for details.
var pages = buildNavigation(state).pages;

expect(pages, hasLength(1));
expect(pages[0].name, equals(ScreenKeys.authorization));

state.loggedIn = true;
pages = buildNavigation(state).pages;

expect(pages, hasLength(1));
expect(pages[0].name, equals(ScreenKeys.books));
copied to clipboard
Getting Started #

Add yana package to your pubspec.yaml
Define buildNavigation function
Create your AppRouterDelegate that triggers buildNavigation for required state changes
Done!

Check examples with redux and provider state management.
Advanced #
How to customize a presentation of a page? #
Check implementation popUpDialog for inspiration.
Status #

Production-ready. The library has been used in multiple applications since 2019.
You can expect breaking changes before the package reaches 1.0.0 based on community feedback.

License

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

Share

• Share on Facebook
• Share on Twitter