How to stay away from Depress?
Auto Router မှာ Nested မဟုတ်ပဲ ရိုးရိုး Route တစ်ခုကို ဘယ်လိုသွားမလဲ?
Nested မှာ ဘယ်လို သွားလဲ အရင်ကြည့်မယ်။
Documentation မှာတော့ ဒီလို ပြတယ် https://pub.dev/packages/auto_route#navigating-between-screens
// get the scoped router by calling
AutoRouter.of(context)
// or using the extension
context.router
// adds a new entry to the pages stack
router.push(const BooksListRoute())
// or by using using paths
router.pushNamed('/books')
// removes last entry in stack and pushs provided route
// if last entry == provided route page will just be updated
router.replace(const BooksListRoute())
// or by using using paths
router.replaceNamed('/books')
// pops until provided route, if it already exists in stack
// else adds it to the stack (good for web Apps).
router.navigate(const BooksListRoute())
// or by using using paths
router.navigateNamed('/books')
// on Web it calls window.history.back();
// on Native it navigates you back
// to the previous location
router.navigateBack();
// adds a list of routes to the pages stack at once
router.pushAll([
BooksListRoute(),
BookDetailsRoute(id:1),
]);
// This's like providing a completely new stack as it rebuilds the stack
// with the list of passed routes
// entires might just update if alright exist
router.replaceAll([
LoginRoute()
]);
// pops the last page unless stack has 1 entry
context.router.pop();
// keeps poping routes until predicate is satisfied
context.router.popUntil((route) => route.name == 'HomeRoute');
// a simplifed version of the above line
context.router.popUntilRouteWithName('HomeRoute');
// pops all routes down to the root
context.router.popUntilRoot();
// removes the top most page in stack even if it's the last
// remove != pop, it doesn't respect WillPopScopes it just
// removes the entry.
context.router.removeLast();
// removes any route in stack that satisfis the predicate
// this works exactly like removing items from a regualar List
// <PageRouteInfo>[...].removeWhere((r)=>)
context.router.removeWhere((route) => );
// you can also use the common helper methods from context extension to navigate
context.pushRoute(const BooksListRoute());
context.replaceRoute(const BooksListRoute());
context.navigateTo(const BooksListRoute());
context.navigateNamedTo('/books');
context.navigateBack();
context.popRoute();
Yes, it’s really simple
@MaterialAutoRouter(
replaceInRouteName: 'Page,Route',
routes: [
AutoRoute(path: '/', page: HomePage, children: [
AutoRoute(
path: 'posts',
name: 'PostsRouter',
page: EmptyRouterPage,
children: [
AutoRoute(
path: '',
page: PostsPage,
),
AutoRoute(
path: ':postId',
page: SinglePostPage,
)
],
),
AutoRoute(
path: 'users',
name: 'UsersRouter',
page: EmptyRouterPage,
children: [
AutoRoute(
path: '',
page: UsersPage,
),
AutoRoute(
path: ':userId',
page: UserProfilePage,
),
],
),
AutoRoute(
path: 'settings',
name: 'SettingsRouter',
page: SettingsPage,
)
]),
AutoRoute(
path: '/deep-link-page',
page: DeepLinkPage,
),
],
)
class $AppRouter {}
DeepLinkPage
class DeepLinkPage extends StatelessWidget {
const DeepLinkPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Deep Link Page"),
),
body: Center(
child: Text("Deep Link Page"),
),
);
}
}
How to route
AutoRouter.of(context).push(const DeepLinkRoute());
Router တစ်ခုတည်း အောက်က child အချင်းချင်း ကူးချင်ရင်
context.router.push(UserProfileRoute(userId: users[i].id,),)
တစ်ခြား router အောက်က Child တစ်ခုကို သွားချင်ရင်
context.navigateTo(PostsRouter(children: SinglePostRoute(postId: id))).
Flutter Botton Navigation Bar နဲ့ ဘယ်လို ချိတ်လဲ?
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return AutoTabsScaffold(
/* ဒီမှာ app bar ကို သက်ဆိုင်ရာ tab အလိုက် build လို့ ရတာပဲ။ child တွေ ဆိုရင်တော့ မသိ */
appBarBuilder: (_, tabsRouter) => AppBar(
backgroundColor: Colors.indigo,
title: Text('FlutterBottomNav ${tabsRouter.activeIndex}'),
centerTitle: true,
leading: const AutoBackButton(),
),
backgroundColor: Colors.indigo,
/* သက်ဆိုင်ရာ route နဲ့ tab ကို တွဲပေးလိုက်တာ ဖြစ်မယ် */
/* အခု လိုတာက သီးခြား Page တစ်ခုကို ဘယ်လို သွားကြမလဲ */
routes: const [
PostsRouter(),
UsersRouter(),
SettingsRouter(),
],
bottomNavigationBuilder: (_, tabsRouter) {
/* အိုကေ၊ bottom navigation bar တော့ flutter က ပါတဲ့ ကောင်နဲ့ ပြောင်းလိုက်ပြီ ၊ */
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
/* ဒါက အမှန်ဆို int တွေ get / set လုပ်ပေးတာ ထင်တယ်၊ အခု Auto Router ပေးတဲ့ ကောင်တွေကို ခေါ်လိုက်တယ် */
currentIndex: tabsRouter.activeIndex,
onTap: tabsRouter.setActiveIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
],
);
},
);
}
}
Written on January 17, 2022