feat: overhaul navigation (#23)

* chore: init nav view with `PageView`

* chore: add assets for sub view app bars

* feat: init sub view app bar

lib/src/contributors/views/contributors_view.dart

@@ -4,6 +4,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 import 'package:noticeboard/src/contributors/controllers/contributors_controller.dart';
+import 'package:noticeboard/src/navigation/components/sub_view_app_bar.dart';
 
 class ContributorsView extends ConsumerWidget {
   const ContributorsView({super.key});
@@ -14,9 +15,9 @@ class ContributorsView extends ConsumerWidget {
     final contributors = ref.watch(contributorsProvider);
 
     return Scaffold(
-      appBar: AppBar(
-        centerTitle: true,
-        title: Text('Contributors'),
+      appBar: PreferredSize(
+        child: SubViewAppBar(),
+        preferredSize: Size(double.infinity, 65.0),
       ),
       body: contributors.when(
         data: (data) => ListView.builder(

lib/src/navigation/components/keep_alive_page.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+class KeepAlivePage extends StatefulWidget {
+  KeepAlivePage({
+    Key? key,
+    required this.child,
+  }) : super(key: key);
+
+  final Widget child;
+
+  @override
+  _KeepAlivePageState createState() => _KeepAlivePageState();
+}
+
+class _KeepAlivePageState extends State<KeepAlivePage>
+    with AutomaticKeepAliveClientMixin {
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+
+    return widget.child;
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}

lib/src/navigation/components/sub_view_app_bar.dart

@@ -0,0 +1,31 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+class SubViewAppBar extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return ClipRRect(
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
+        child: Padding(
+          padding: const EdgeInsets.all(6.0),
+          child: AppBar(
+            backgroundColor: colorScheme.background.withOpacity(0.6),
+            title: Image.asset(
+              colorScheme.brightness == Brightness.dark
+                  ? 'assets/noticeboard/logo-square-dark.png'
+                  : 'assets/noticeboard/logo-square-light.png',
+              width: 42,
+            ),
+            centerTitle: true,
+            elevation: 0.0,
+            scrolledUnderElevation: 0.0,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/navigation/views/navigation_view.dart

@@ -3,6 +3,7 @@ import 'dart:ui';
 import 'package:flutter/material.dart';
 
 import 'package:noticeboard/src/contributors/views/contributors_view.dart';
+import 'package:noticeboard/src/navigation/components/keep_alive_page.dart';
 import 'package:noticeboard/src/notices/views/events_view.dart';
 
 class NavigationView extends StatefulWidget {
@@ -14,15 +15,16 @@ class NavigationView extends StatefulWidget {
 
 class _NavigationViewState extends State<NavigationView> {
   final List<Widget> _views = <Widget>[
-    const EventsView(),
+    KeepAlivePage(child: const EventsView()),
     const Center(
-      child: Text('Notices View'),
+      child: Text('Profile View'),
     ),
     const Center(
-      child: Text('Profile View'),
+      child: Text('Notices View'),
     ),
   ];
-  int _selectedIndex = 0;
+  PageController _pageController = PageController(initialPage: 1);
+  int _selectedIndex = 1;
 
   @override
   Widget build(BuildContext context) {
@@ -45,7 +47,6 @@ class _NavigationViewState extends State<NavigationView> {
                       : 'assets/noticeboard/logo-light.png',
                   width: 160,
                 ),
-                centerTitle: true,
                 actions: [
                   IconButton(
                     onPressed: () {
@@ -67,8 +68,15 @@ class _NavigationViewState extends State<NavigationView> {
         ),
         preferredSize: const Size(double.infinity, 65.0),
       ),
-      body: IndexedStack(
-        index: _selectedIndex,
+      body: PageView(
+        physics: const PageScrollPhysics(),
+        scrollDirection: Axis.horizontal,
+        controller: _pageController,
+        onPageChanged: ((index) {
+          setState(() {
+            _selectedIndex = index;
+          });
+        }),
         children: _views,
       ),
       bottomNavigationBar: ClipRRect(
@@ -77,26 +85,24 @@ class _NavigationViewState extends State<NavigationView> {
           child: NavigationBar(
             selectedIndex: _selectedIndex,
             onDestinationSelected: ((index) {
-              setState(() {
-                _selectedIndex = index;
-              });
+              _pageController.jumpToPage(index);
             }),
             destinations: <NavigationDestination>[
               NavigationDestination(
                 icon: Icon(Icons.explore_outlined),
                 label: 'Events',
                 selectedIcon: Icon(Icons.explore),
               ),
+              NavigationDestination(
+                icon: Icon(Icons.home_outlined),
+                label: 'Home',
+                selectedIcon: Icon(Icons.home),
+              ),
               NavigationDestination(
                 icon: Icon(Icons.calendar_month_outlined),
                 label: 'Notices',
                 selectedIcon: Icon(Icons.calendar_month_rounded),
               ),
-              NavigationDestination(
-                icon: Icon(Icons.person_outline_outlined),
-                label: 'Profile',
-                selectedIcon: Icon(Icons.person),
-              )
             ],
             elevation: 0.0,
             backgroundColor: colorScheme.background.withOpacity(0.6),

pubspec.yaml

@@ -63,6 +63,8 @@ flutter:
     - assets/launcher-icon.png
     - assets/noticeboard/logo-light.png
     - assets/noticeboard/logo-dark.png
+    - assets/noticeboard/logo-square-light.png
+    - assets/noticeboard/logo-square-dark.png
     - assets/mitblr.club/logo-light.png
     - assets/mitblr.club/logo-dark.png
     - assets/mitblr.club/logo-ghost.png