Finished Project

ResoCoder · Sep 14, 2021 · 1d55579 · 1d55579
1 parent 66e1a2e
commit 1d55579
Show file tree

Hide file tree

Showing 10 changed files with 637 additions and 18 deletions.
diff --git a/lib/home_page.dart b/lib/home_page.dart
@@ -0,0 +1,62 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/routes/router.gr.dart';
+import 'package:salomon_bottom_bar/salomon_bottom_bar.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return AutoTabsScaffold(
+      appBarBuilder: (_, tabsRouter) => AppBar(
+        backgroundColor: Colors.indigo,
+        title: const Text('FlutterBottomNav'),
+        centerTitle: true,
+        leading: const AutoBackButton(),
+      ),
+      backgroundColor: Colors.indigo,
+      routes: const [
+        PostsRouter(),
+        UsersRouter(),
+        SettingsRouter(),
+      ],
+      bottomNavigationBuilder: (_, tabsRouter) {
+        return SalomonBottomBar(
+          margin: const EdgeInsets.symmetric(
+            horizontal: 20,
+            vertical: 40,
+          ),
+          currentIndex: tabsRouter.activeIndex,
+          onTap: tabsRouter.setActiveIndex,
+          items: [
+            SalomonBottomBarItem(
+              selectedColor: Colors.amberAccent,
+              icon: const Icon(
+                Icons.post_add,
+                size: 30,
+              ),
+              title: const Text('Posts'),
+            ),
+            SalomonBottomBarItem(
+              selectedColor: Colors.blue[200],
+              icon: const Icon(
+                Icons.person,
+                size: 30,
+              ),
+              title: const Text('Users'),
+            ),
+            SalomonBottomBarItem(
+              selectedColor: Colors.pinkAccent[100],
+              icon: const Icon(
+                Icons.settings,
+                size: 30,
+              ),
+              title: const Text('Settings'),
+            )
+          ],
+        );
+      },
+    );
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/posts/posts_page.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/routes/router.gr.dart';
 
 void main() => runApp(const AppWidget());
 
@@ -8,10 +8,12 @@ class AppWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
+    final _appRouter = AppRouter();
+    return MaterialApp.router(
       debugShowCheckedModeBanner: false,
       title: 'Bottom Nav Bar with Nested Routing',
-      home: PostsPage(),
+      routerDelegate: _appRouter.delegate(),
+      routeInformationParser: _appRouter.defaultRouteParser(),
     );
   }
 }
diff --git a/lib/posts/posts_page.dart b/lib/posts/posts_page.dart
@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:auto_route/auto_route.dart';
 import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/data/app_data.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/routes/router.gr.dart';
 import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/widgets.dart';
 
-
 class PostsPage extends StatelessWidget {
   PostsPage({Key? key}) : super(key: key);
   final posts = Post.posts;
@@ -13,17 +14,21 @@ class PostsPage extends StatelessWidget {
         padding: const EdgeInsets.symmetric(
           horizontal: 20,
         ),
-child: Column(
-  mainAxisAlignment: MainAxisAlignment.center,
-  children: [
-    for (int i = 0; i < posts.length; i++)
-      PostTile(
-        tileColor: posts[i].color,
-        postTitle: posts[i].title,
-        onTileTap: (){},
-      ),
-  ],
-),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            for (int i = 0; i < posts.length; i++)
+              PostTile(
+                tileColor: posts[i].color,
+                postTitle: posts[i].title,
+                onTileTap: () => context.router.push(
+                  SinglePostRoute(
+                    postId: posts[i].id,
+                  ),
+                ),
+              ),
+          ],
+        ),
       ),
     );
   }

diff --git a/lib/posts/single_post_page.dart b/lib/posts/single_post_page.dart
@@ -1,11 +1,12 @@
+import 'package:auto_route/annotations.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/data/app_data.dart';
 
 class SinglePostPage extends StatelessWidget {
   final int postId;
   const SinglePostPage({
     Key? key,
-    required this.postId,
+    @PathParam() required this.postId,
   }) : super(key: key);
 
   @override

diff --git a/lib/routes/router.dart b/lib/routes/router.dart
@@ -0,0 +1,51 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/home_page.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/posts/posts_page.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/posts/single_post_page.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/settings/settings_page.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/users/user_profile_page.dart';
+import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/users/users_page.dart';
+
+@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,
+      )
+    ]),
+  ],
+)
+class $AppRouter {}
diff --git a/lib/routes/router.gr.dart b/lib/routes/router.gr.dart
diff --git a/lib/users/user_profile_page.dart b/lib/users/user_profile_page.dart
@@ -1,3 +1,4 @@
+import 'package:auto_route/annotations.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/data/app_data.dart';
 import 'package:flutter_bottom_navigation_with_nested_routing_tutorial/widgets.dart';
@@ -6,7 +7,7 @@ class UserProfilePage extends StatelessWidget {
   final int userId;
   const UserProfilePage({
     Key? key,
-    required this.userId,
+    @PathParam() required this.userId,
   }) : super(key: key);
 
   @override