migrate from named routes, add a custom fade navigation animation

andordavoti · Aug 12, 2023 · 264606e · 264606e
1 parent ed6fe7f
commit 264606e
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 79 deletions.
diff --git a/client/lib/components/app_drawer.dart b/client/lib/components/app_drawer.dart
@@ -8,7 +8,11 @@ import 'package:todoaholic/components/manage_custom_list_dialog.dart';
 import 'package:todoaholic/data/app_state_provider.dart';
 import 'package:todoaholic/data/custom_list.dart';
 import 'package:todoaholic/data/lists_dao.dart';
-import 'package:todoaholic/screens/routes.dart';
+import 'package:todoaholic/screens/home.dart';
+import 'package:todoaholic/screens/timeline_screen.dart';
+import 'package:todoaholic/utils/createRoute.dart';
+import '../screens/custom_list_screen.dart';
+import '../screens/user_profile_screen.dart';
 
 class AppDrawer extends StatelessWidget {
   const AppDrawer({Key? key}) : super(key: key);
@@ -70,7 +74,7 @@ class AppDrawer extends StatelessWidget {
               ),
               onTap: () {
                 HapticFeedback.selectionClick();
-                Navigator.pushReplacementNamed(context, Routes.home);
+                Navigator.of(context).push(createRoute(Home()));
               },
             ),
             ListTile(
@@ -82,7 +86,7 @@ class AppDrawer extends StatelessWidget {
               ),
               onTap: () {
                 HapticFeedback.selectionClick();
-                Navigator.pushReplacementNamed(context, Routes.timeline);
+                Navigator.of(context).push(createRoute(const TimelineScreen()));
               },
             ),
             ListTile(
@@ -94,7 +98,8 @@ class AppDrawer extends StatelessWidget {
               ),
               onTap: () {
                 HapticFeedback.selectionClick();
-                Navigator.pushReplacementNamed(context, Routes.profile);
+                Navigator.of(context)
+                    .push(createRoute(const UserProfileScreen()));
               },
             ),
             const Divider(),
@@ -205,7 +210,7 @@ class AppDrawer extends StatelessWidget {
           onTap: () {
             appState.setSelectedList(list);
             HapticFeedback.selectionClick();
-            Navigator.pushReplacementNamed(context, Routes.customList);
+            Navigator.of(context).push(createRoute(const CustomListScreen()));
           }),
     );
   }

diff --git a/client/lib/components/custom_lists.dart b/client/lib/components/custom_lists.dart
@@ -5,8 +5,8 @@ import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:todoaholic/data/app_state_provider.dart';
 import 'package:todoaholic/data/lists_dao.dart';
 import 'package:todoaholic/data/custom_list.dart';
-import 'package:todoaholic/screens/routes.dart';
-
+import 'package:todoaholic/screens/custom_list_screen.dart';
+import 'package:todoaholic/utils/createRoute.dart';
 import 'manage_custom_list_dialog.dart';
 
 class CustomLists extends StatelessWidget {
@@ -97,7 +97,7 @@ class CustomLists extends StatelessWidget {
           onTap: () {
             appState.setSelectedList(list);
             HapticFeedback.selectionClick();
-            Navigator.pushReplacementNamed(context, Routes.customList);
+            Navigator.of(context).push(createRoute(const CustomListScreen()));
           }),
     );
   }

diff --git a/client/lib/components/scaffold_wrapper.dart b/client/lib/components/scaffold_wrapper.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:todoaholic/components/app_drawer.dart';
-
 import '../constants.dart';
 
 class ScaffoldWrapper extends StatelessWidget {
@@ -26,8 +25,17 @@ class ScaffoldWrapper extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     double screenWidth = MediaQuery.of(context).size.width;
+    bool hideTrailingIcon = screenWidth < drawerBreakPoint ? false : true;
 
-    AppBar appBar = this.appBar ?? AppBar(title: Text(title), actions: actions);
+    AppBar appBar = this.appBar ??
+        AppBar(
+          title: Align(
+            alignment: Alignment.topCenter,
+            child: Text(title),
+          ),
+          actions: actions,
+          leading: hideTrailingIcon ? const SizedBox.shrink() : null,
+        );
 
     if (screenWidth < drawerBreakPoint) {
       return Scaffold(

diff --git a/client/lib/main.dart b/client/lib/main.dart
@@ -1,13 +1,13 @@
 import 'dart:io' show Platform;
 import 'package:flutter/material.dart';
+import 'package:todoaholic/screens/home.dart';
 import 'package:window_size/window_size.dart';
 
 import 'package:firebase_core/firebase_core.dart';
 import 'package:provider/provider.dart';
 import 'package:todoaholic/data/app_state_provider.dart';
 import 'package:todoaholic/data/lists_dao.dart';
 import 'package:todoaholic/data/todo_dao.dart';
-import 'package:todoaholic/screens/routes.dart';
 import 'package:todoaholic/utils/theme.dart';
 import 'data/custom_list_dao.dart';
 import 'firebase_options.dart';
@@ -55,8 +55,7 @@ class MyApp extends StatelessWidget {
         theme: AppTheme.light(),
         darkTheme: AppTheme.dark(),
         debugShowCheckedModeBanner: false,
-        initialRoute: Routes.home,
-        routes: Routes.appRoutes,
+        home: Home(),
       ),
     );
   }

diff --git a/client/lib/screens/auth_screen.dart b/client/lib/screens/auth_screen.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:firebase_ui_auth/firebase_ui_auth.dart';
-import 'package:todoaholic/screens/routes.dart';
+import 'package:todoaholic/utils/createRoute.dart';
+import 'home.dart';
 
 class AuthScreen extends StatelessWidget {
   const AuthScreen({Key? key}) : super(key: key);
@@ -10,7 +11,7 @@ class AuthScreen extends StatelessWidget {
     return SignInScreen(
       actions: [
         AuthStateChangeAction<SignedIn>((context, _) {
-          Navigator.of(context).pushReplacementNamed(Routes.home);
+          Navigator.of(context).push(createRoute(Home()));
         }),
       ],
       providers: [EmailAuthProvider()],

diff --git a/client/lib/screens/custom_list_screen.dart b/client/lib/screens/custom_list_screen.dart
@@ -2,15 +2,16 @@ import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
-import 'package:todoaholic/components/app_drawer.dart';
 import 'package:todoaholic/components/custom_todo_list.dart';
 import 'package:todoaholic/components/scaffold_wrapper.dart';
 import 'package:todoaholic/data/app_state_provider.dart';
 import 'package:todoaholic/data/todo_item_type.dart';
-import 'package:todoaholic/screens/routes.dart';
-
+import 'package:todoaholic/screens/timeline_screen.dart';
+import 'package:todoaholic/screens/user_profile_screen.dart';
+import 'package:todoaholic/utils/createRoute.dart';
 import '../components/manage_custom_list_dialog.dart';
 import 'auth_screen.dart';
+import 'home.dart';
 import 'manage_todo_screen.dart';
 
 class TasksIntent extends Intent {}
@@ -48,17 +49,17 @@ class CustomListScreen extends StatelessWidget {
                     child: Actions(
                       actions: {
                         TasksIntent: CallbackAction<TasksIntent>(
-                            onInvoke: (intent) =>
-                                Navigator.pushReplacementNamed(
-                                    context, Routes.home)),
+                          onInvoke: (intent) =>
+                              Navigator.of(context).push(createRoute(Home())),
+                        ),
                         TimelineIntent: CallbackAction<TimelineIntent>(
-                            onInvoke: (intent) =>
-                                Navigator.pushReplacementNamed(
-                                    context, Routes.timeline)),
+                          onInvoke: (intent) => Navigator.of(context)
+                              .push(createRoute(const TimelineScreen())),
+                        ),
                         ProfileIntent: CallbackAction<ProfileIntent>(
-                            onInvoke: (intent) =>
-                                Navigator.pushReplacementNamed(
-                                    context, Routes.profile)),
+                          onInvoke: (intent) => Navigator.of(context)
+                              .push(createRoute(const UserProfileScreen())),
+                        ),
                         AddTaskIntent: CallbackAction<AddTaskIntent>(
                             onInvoke: (intent) => Navigator.push(
                                   context,

diff --git a/client/lib/screens/home.dart b/client/lib/screens/home.dart
@@ -10,8 +10,10 @@ import 'package:todoaholic/data/app_state_provider.dart';
 import 'package:provider/provider.dart';
 import 'package:todoaholic/data/todo_dao.dart';
 import 'package:todoaholic/data/todo_item_type.dart';
-import 'package:todoaholic/screens/routes.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:todoaholic/screens/timeline_screen.dart';
+import 'package:todoaholic/screens/user_profile_screen.dart';
+import 'package:todoaholic/utils/createRoute.dart';
 
 import '../constants.dart';
 import 'auth_screen.dart';
@@ -45,6 +47,7 @@ class Home extends StatelessWidget {
     final todoDao = Provider.of<TodoDao>(context, listen: false);
 
     double screenWidth = MediaQuery.of(context).size.width;
+    bool hideTrailingIcon = screenWidth < drawerBreakPoint ? false : true;
     double dateNavLeftPadding = screenWidth < drawerBreakPoint ? 20 : 320;
 
     return StreamBuilder<User?>(
@@ -85,13 +88,13 @@ class Home extends StatelessWidget {
                         NextDayIntent: CallbackAction<NextDayIntent>(
                             onInvoke: (intent) => nextDay()),
                         TimelineIntent: CallbackAction<TimelineIntent>(
-                            onInvoke: (intent) =>
-                                Navigator.pushReplacementNamed(
-                                    context, Routes.timeline)),
+                          onInvoke: (intent) => Navigator.of(context)
+                              .push(createRoute(const TimelineScreen())),
+                        ),
                         ProfileIntent: CallbackAction<ProfileIntent>(
-                            onInvoke: (intent) =>
-                                Navigator.pushReplacementNamed(
-                                    context, Routes.profile)),
+                          onInvoke: (intent) => Navigator.of(context)
+                              .push(createRoute(const UserProfileScreen())),
+                        ),
                         AddTaskIntent: CallbackAction<AddTaskIntent>(
                             onInvoke: (intent) => Navigator.push(
                                   context,
@@ -149,6 +152,9 @@ class Home extends StatelessWidget {
                             ),
                           ),
                           appBar: AppBar(
+                            leading: hideTrailingIcon
+                                ? const SizedBox.shrink()
+                                : null,
                             title: Align(
                               alignment: Alignment.topCenter,
                               child: InkWell(

diff --git a/client/lib/screens/routes.dart b/client/lib/screens/routes.dart
diff --git a/client/lib/screens/timeline_screen.dart b/client/lib/screens/timeline_screen.dart
@@ -1,18 +1,19 @@
 import 'package:firebase_auth/firebase_auth.dart';
+import 'package:firebase_ui_auth/firebase_ui_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:provider/provider.dart';
-import 'package:todoaholic/components/app_drawer.dart';
-
 import 'package:todoaholic/components/past_todo_list.dart';
 import 'package:todoaholic/components/scaffold_wrapper.dart';
 import 'package:todoaholic/components/timeline_todo_list.dart';
 import 'package:todoaholic/data/todo_dao.dart';
 import 'package:todoaholic/data/todo_item_type.dart';
-import 'package:todoaholic/screens/routes.dart';
+import 'package:todoaholic/screens/user_profile_screen.dart';
+import 'package:todoaholic/utils/createRoute.dart';
 
 import 'auth_screen.dart';
+import 'home.dart';
 
 class TasksIntent extends Intent {}
 
@@ -40,28 +41,18 @@ class TimelineScreen extends StatelessWidget {
                   child: Actions(
                     actions: {
                       TasksIntent: CallbackAction<TasksIntent>(
-                          onInvoke: (intent) => Navigator.pushReplacementNamed(
-                              context, Routes.home)),
+                        onInvoke: (intent) =>
+                            Navigator.of(context).push(createRoute(Home())),
+                      ),
                       ProfileIntent: CallbackAction<ProfileIntent>(
-                          onInvoke: (intent) => Navigator.pushReplacementNamed(
-                              context, Routes.profile)),
+                        onInvoke: (intent) => Navigator.of(context)
+                            .push(createRoute(const UserProfileScreen())),
+                      ),
                     },
                     child: Focus(
                       autofocus: true,
                       child: ScaffoldWrapper(
                         title: "Timeline",
-                        appBar: AppBar(
-                          actions: const [
-                            IconButton(
-                              color: Colors.transparent,
-                              icon: SizedBox.shrink(),
-                              onPressed: null,
-                            )
-                          ],
-                          title: const Align(
-                              alignment: Alignment.topCenter,
-                              child: Text('Timeline')),
-                        ),
                         body: StreamBuilder<QuerySnapshot>(
                             stream: todoDao.getUndonePastStream(),
                             builder: (context, pastSnapshot) {

diff --git a/client/lib/screens/user_profile_screen.dart b/client/lib/screens/user_profile_screen.dart
@@ -7,13 +7,14 @@ import 'package:package_info_plus/package_info_plus.dart';
 import 'package:todoaholic/components/delete_account_dialog.dart';
 import 'package:todoaholic/components/scaffold_wrapper.dart';
 import 'package:todoaholic/components/verify_email_dialog.dart';
-import 'package:todoaholic/screens/routes.dart';
+import 'package:todoaholic/screens/timeline_screen.dart';
+import 'package:todoaholic/utils/createRoute.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:touchable_opacity/touchable_opacity.dart';
 import 'package:firebase_ui_auth/firebase_ui_auth.dart';
-
 import '../constants.dart';
 import 'auth_screen.dart';
+import 'home.dart';
 
 class TasksIntent extends Intent {}
 
@@ -68,11 +69,12 @@ class UserProfileScreenState extends State<UserProfileScreen> {
                   child: Actions(
                     actions: {
                       TasksIntent: CallbackAction<TasksIntent>(
-                          onInvoke: (intent) => Navigator.pushReplacementNamed(
-                              context, Routes.home)),
+                          onInvoke: (intent) =>
+                              Navigator.of(context).push(createRoute(Home()))),
                       TimelineIntent: CallbackAction<TimelineIntent>(
-                          onInvoke: (intent) => Navigator.pushReplacementNamed(
-                              context, Routes.timeline)),
+                        onInvoke: (intent) => Navigator.of(context)
+                            .push(createRoute(const TimelineScreen())),
+                      ),
                     },
                     child: Focus(
                         autofocus: true,

diff --git a/client/lib/utils/createRoute.dart b/client/lib/utils/createRoute.dart
@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+Route createRoute(Widget route) {
+  return PageRouteBuilder(
+    pageBuilder: (context, animation, secondaryAnimation) => route,
+    transitionsBuilder: (context, animation, secondaryAnimation, child) {
+      return FadeTransition(
+        opacity: animation,
+        child: child,
+      );
+    },
+  );
+}