Merge pull request #72 from PDG-NUTRI/68-ajouter-la-bar-de-navigation

68 ajouter la bar de navigation

lib/router/router.dart

@@ -2,21 +2,36 @@ import 'package:auto_route/auto_route.dart';
 import 'package:pdg_app/screens/chat.dart';
 import 'package:pdg_app/screens/diary.dart';
 import 'package:pdg_app/screens/login.dart';
+import 'package:pdg_app/screens/profile.dart';
 import 'package:pdg_app/screens/register.dart';
 
+import '../screens/home.dart';
+
 @MaterialAutoRouter(
   // replaceInRouteName: 'Page,Route',
   routes: <AutoRoute>[
     AutoRoute(
-      path: '/diary',
-      page: DiaryScreen,
-      initial: true,
-      children: [],
-    ),
-    AutoRoute(
-      page: ChatScreen,
-      path: '/chat',
+      path: '/home',
+      page: HomeScreen,
       initial: true,
+      children: [
+        RedirectRoute(
+          path: '',
+          redirectTo: 'diary',
+        ),
+        AutoRoute(
+          page: ChatScreen,
+          path: 'chat',
+        ),
+        AutoRoute(
+          page: DiaryScreen,
+          path: 'diary',
+        ),
+        AutoRoute(
+          page: ProfileScreen,
+          path: 'my',
+        )
+      ],
     ),
     AutoRoute(
       page: LoginScreen,
@@ -28,7 +43,7 @@ import 'package:pdg_app/screens/register.dart';
     ),
     RedirectRoute(
       path: '*',
-      redirectTo: '/diary',
+      redirectTo: '/home/diary',
     ),
   ],
 )

lib/router/router.gr.dart

@@ -11,80 +11,118 @@
 // ignore_for_file: type=lint
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:auto_route/auto_route.dart' as _i5;
-import 'package:flutter/material.dart' as _i6;
+import 'package:auto_route/auto_route.dart' as _i7;
+import 'package:flutter/material.dart' as _i8;
 
-import '../screens/chat.dart' as _i2;
-import '../screens/diary.dart' as _i1;
-import '../screens/login.dart' as _i3;
-import '../screens/register.dart' as _i4;
+import '../screens/chat.dart' as _i4;
+import '../screens/diary.dart' as _i5;
+import '../screens/home.dart' as _i1;
+import '../screens/login.dart' as _i2;
+import '../screens/profile.dart' as _i6;
+import '../screens/register.dart' as _i3;
 
-class AppRouter extends _i5.RootStackRouter {
-  AppRouter([_i6.GlobalKey<_i6.NavigatorState>? navigatorKey])
+class AppRouter extends _i7.RootStackRouter {
+  AppRouter([_i8.GlobalKey<_i8.NavigatorState>? navigatorKey])
       : super(navigatorKey);
 
   @override
-  final Map<String, _i5.PageFactory> pagesMap = {
-    DiaryScreenRoute.name: (routeData) {
-      return _i5.MaterialPageX<dynamic>(
-          routeData: routeData, child: const _i1.DiaryScreen());
-    },
-    ChatScreenRoute.name: (routeData) {
-      return _i5.MaterialPageX<dynamic>(
-          routeData: routeData, child: const _i2.ChatScreen());
+  final Map<String, _i7.PageFactory> pagesMap = {
+    HomeScreenRoute.name: (routeData) {
+      return _i7.MaterialPageX<dynamic>(
+          routeData: routeData, child: const _i1.HomeScreen());
     },
     LoginScreenRoute.name: (routeData) {
-      return _i5.MaterialPageX<dynamic>(
-          routeData: routeData, child: const _i3.LoginScreen());
+      return _i7.MaterialPageX<dynamic>(
+          routeData: routeData, child: const _i2.LoginScreen());
     },
     RegisterScreenRoute.name: (routeData) {
-      return _i5.MaterialPageX<dynamic>(
-          routeData: routeData, child: const _i4.RegisterScreen());
+      return _i7.MaterialPageX<dynamic>(
+          routeData: routeData, child: const _i3.RegisterScreen());
+    },
+    ChatScreenRoute.name: (routeData) {
+      return _i7.MaterialPageX<dynamic>(
+          routeData: routeData, child: const _i4.ChatScreen());
+    },
+    DiaryScreenRoute.name: (routeData) {
+      return _i7.MaterialPageX<dynamic>(
+          routeData: routeData, child: const _i5.DiaryScreen());
+    },
+    ProfileScreenRoute.name: (routeData) {
+      return _i7.MaterialPageX<dynamic>(
+          routeData: routeData, child: const _i6.ProfileScreen());
     }
   };
 
   @override
-  List<_i5.RouteConfig> get routes => [
-        _i5.RouteConfig('/#redirect',
-            path: '/', redirectTo: '/diary', fullMatch: true),
-        _i5.RouteConfig(DiaryScreenRoute.name, path: '/diary'),
-        _i5.RouteConfig(ChatScreenRoute.name, path: '/chat'),
-        _i5.RouteConfig(LoginScreenRoute.name, path: '/login'),
-        _i5.RouteConfig(RegisterScreenRoute.name, path: '/register'),
-        _i5.RouteConfig('*#redirect',
-            path: '*', redirectTo: '/diary', fullMatch: true)
+  List<_i7.RouteConfig> get routes => [
+        _i7.RouteConfig('/#redirect',
+            path: '/', redirectTo: '/home', fullMatch: true),
+        _i7.RouteConfig(HomeScreenRoute.name, path: '/home', children: [
+          _i7.RouteConfig('#redirect',
+              path: '',
+              parent: HomeScreenRoute.name,
+              redirectTo: 'diary',
+              fullMatch: true),
+          _i7.RouteConfig(ChatScreenRoute.name,
+              path: 'chat', parent: HomeScreenRoute.name),
+          _i7.RouteConfig(DiaryScreenRoute.name,
+              path: 'diary', parent: HomeScreenRoute.name),
+          _i7.RouteConfig(ProfileScreenRoute.name,
+              path: 'my', parent: HomeScreenRoute.name)
+        ]),
+        _i7.RouteConfig(LoginScreenRoute.name, path: '/login'),
+        _i7.RouteConfig(RegisterScreenRoute.name, path: '/register'),
+        _i7.RouteConfig('*#redirect',
+            path: '*', redirectTo: '/home/diary', fullMatch: true)
       ];
 }
 
 /// generated route for
-/// [_i1.DiaryScreen]
-class DiaryScreenRoute extends _i5.PageRouteInfo<void> {
-  const DiaryScreenRoute() : super(DiaryScreenRoute.name, path: '/diary');
-
-  static const String name = 'DiaryScreenRoute';
-}
+/// [_i1.HomeScreen]
+class HomeScreenRoute extends _i7.PageRouteInfo<void> {
+  const HomeScreenRoute({List<_i7.PageRouteInfo>? children})
+      : super(HomeScreenRoute.name, path: '/home', initialChildren: children);
 
-/// generated route for
-/// [_i2.ChatScreen]
-class ChatScreenRoute extends _i5.PageRouteInfo<void> {
-  const ChatScreenRoute() : super(ChatScreenRoute.name, path: '/chat');
-
-  static const String name = 'ChatScreenRoute';
+  static const String name = 'HomeScreenRoute';
 }
 
 /// generated route for
-/// [_i3.LoginScreen]
-class LoginScreenRoute extends _i5.PageRouteInfo<void> {
+/// [_i2.LoginScreen]
+class LoginScreenRoute extends _i7.PageRouteInfo<void> {
   const LoginScreenRoute() : super(LoginScreenRoute.name, path: '/login');
 
   static const String name = 'LoginScreenRoute';
 }
 
 /// generated route for
-/// [_i4.RegisterScreen]
-class RegisterScreenRoute extends _i5.PageRouteInfo<void> {
+/// [_i3.RegisterScreen]
+class RegisterScreenRoute extends _i7.PageRouteInfo<void> {
   const RegisterScreenRoute()
       : super(RegisterScreenRoute.name, path: '/register');
 
   static const String name = 'RegisterScreenRoute';
 }
+
+/// generated route for
+/// [_i4.ChatScreen]
+class ChatScreenRoute extends _i7.PageRouteInfo<void> {
+  const ChatScreenRoute() : super(ChatScreenRoute.name, path: 'chat');
+
+  static const String name = 'ChatScreenRoute';
+}
+
+/// generated route for
+/// [_i5.DiaryScreen]
+class DiaryScreenRoute extends _i7.PageRouteInfo<void> {
+  const DiaryScreenRoute() : super(DiaryScreenRoute.name, path: 'diary');
+
+  static const String name = 'DiaryScreenRoute';
+}
+
+/// generated route for
+/// [_i6.ProfileScreen]
+class ProfileScreenRoute extends _i7.PageRouteInfo<void> {
+  const ProfileScreenRoute() : super(ProfileScreenRoute.name, path: 'my');
+
+  static const String name = 'ProfileScreenRoute';
+}

lib/screens/home.dart

@@ -0,0 +1,34 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:pdg_app/router/router.gr.dart';
+
+import '../widgets/navbar.dart';
+
+class HomeScreen extends StatefulWidget {
+  const HomeScreen({Key? key}) : super(key: key);
+
+  @override
+  State<HomeScreen> createState() => _HomeScreenState();
+}
+
+class _HomeScreenState extends State<HomeScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return AutoTabsRouter(
+      routes: const [
+        ChatScreenRoute(),
+        DiaryScreenRoute(),
+        ProfileScreenRoute(),
+      ],
+      builder: (context, child, animation) {
+        return Scaffold(
+          body: FadeTransition(
+            opacity: animation,
+            child: child,
+          ),
+          bottomNavigationBar: const NavBar(),
+        );
+      },
+    );
+  }
+}

lib/screens/profile.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class ProfileScreen extends StatelessWidget {
+  const ProfileScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: Text("Profile"));
+  }
+}

lib/widgets/navbar.dart

@@ -0,0 +1,53 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:google_nav_bar/google_nav_bar.dart';
+
+class NavBar extends StatefulWidget {
+  const NavBar({Key? key}) : super(key: key);
+
+  @override
+  State<NavBar> createState() => _NavBarState();
+}
+
+class _NavBarState extends State<NavBar> {
+  int _selectedIndex = 1;
+
+  @override
+  Widget build(BuildContext context) {
+    final tabsRouter = AutoTabsRouter.of(context);
+
+    return GNav(
+      rippleColor: Theme.of(context).colorScheme.secondary,
+      hoverColor: Theme.of(context).colorScheme.secondary,
+      color: Theme.of(context).colorScheme.onSecondary,
+      activeColor: Theme.of(context).colorScheme.onSecondary,
+      duration: const Duration(milliseconds: 900),
+      tabBackgroundColor: Theme.of(context).colorScheme.secondary,
+      gap: 8,
+      padding: const EdgeInsets.symmetric(horizontal: 17, vertical: 15),
+      tabMargin: const EdgeInsets.symmetric(vertical: 15, horizontal: 25),
+      backgroundColor: Theme.of(context).colorScheme.surface,
+      tabs: const [
+        GButton(
+          icon: Icons.chat_bubble_outline,
+          text: "Chat",
+        ),
+        GButton(
+          icon: Icons.calendar_month_outlined,
+          text: "Diary",
+        ),
+        GButton(
+          icon: Icons.account_circle_outlined,
+          text: "Profile",
+        )
+      ],
+      selectedIndex: _selectedIndex,
+      onTabChange: (index) {
+        setState(() {
+          _selectedIndex = index;
+          tabsRouter.setActiveIndex(index);
+        });
+      },
+    );
+  }
+}

pubspec.lock

@@ -422,6 +422,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.1.1"
+  google_nav_bar:
+    dependency: "direct main"
+    description:
+      name: google_nav_bar
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.6"
   graphs:
     dependency: transitive
     description:

pubspec.yaml

@@ -44,6 +44,7 @@ dependencies:
   table_calendar: ^3.0.6
   intl: ^0.17.0
   uuid: ^3.0.6
+  google_nav_bar: ^5.0.6
 
 dev_dependencies:
   flutter_test:

widgetbook/widgetbook.dart

@@ -113,11 +113,14 @@ class HotReload extends StatelessWidget {
       ],
     );
 
-    var actionButton = WidgetbookComponent(name: 'Action button', useCases: [
-      WidgetbookUseCase(
-          name: 'Add',
-          builder: (context) => const ActionButton(icon: Icons.add))
-    ]);
+    var actionButton = WidgetbookComponent(
+      name: 'Action button',
+      useCases: [
+        WidgetbookUseCase(
+            name: 'Add',
+            builder: (context) => const ActionButton(icon: Icons.add))
+      ],
+    );
 
     var login = WidgetbookComponent(
       name: 'Login',