Re-implemented bottom navigation bar w/ successful page changes.

mobile/app/lib/main.dart

@@ -1,21 +1,91 @@
 import 'package:app/pages/settings_widget.dart';
+import 'package:app/pages/conversations_list_widget.dart';
 import 'package:flutter/material.dart';
-import 'theme.dart';
+import 'package:provider/provider.dart';
 
+import 'package:app/theme.dart';
+
+// my_state.dart (Provider for selected index)
+final _selectedIndex = ValueNotifier<int>(0);
+
+class MyState with ChangeNotifier {
+  int get selectedIndex => _selectedIndex.value;
+
+  set selectedIndex(int value) {
+    _selectedIndex.value = value;
+    notifyListeners();
+  }
+}
+
+// This function creates a BottomNavigationBarItem for each page
+BottomNavigationBarItem _buildNavigationItem(int index) {
+  String label = "";
+  IconData iconData = Icons.error;
+  switch (index) {
+    case 0:
+      label = 'Home';
+      iconData = Icons.home;
+      break;
+    case 1:
+      label = 'Settings';
+      iconData = Icons.settings;
+      break;
+  }
+  return BottomNavigationBarItem(
+    icon: Icon(iconData),
+    label: label,
+  );
+}
+
+// main.dart
 void main() {
-  runApp(const MyApp());
+  runApp(
+    ChangeNotifierProvider<MyState>(
+      create: (_) => MyState(),
+      child: MyApp(),
+    ),
+  );
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({super.key});
+  MyApp({super.key});
+
+  // This list holds the pages to navigate between
+  final List<Widget> _pages = [
+    // Replace with the widget for your first page (e.g., HomeScreen())
+    const Center(child: ConversationsListWidget()),
+    // Replace with the widget for your second page (e.g., SettingsPage())
+    const Center(child: SettingsWidget()),
+  ];
 
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
+    int selectedIndex = Provider.of<MyState>(context).selectedIndex;
 
-    return const MaterialApp(
+    return MaterialApp(
-      title: 'Flutter Demo',
+      title: 'App',
-      home: SettingsWidget(),
+      home: Scaffold(
+        backgroundColor: AppTheme.secondaryBackground,
+        appBar: AppBar(
+            backgroundColor: AppTheme.secondaryBackground,
+            automaticallyImplyLeading: false,
+            title: const Text(
+              'App',
+              style: AppTheme.headlineLarge,
+            ),
+            actions: const [],
+            centerTitle: false,
+            elevation: 0,
+          ),
+        body: _pages[Provider.of<MyState>(context, listen: false).selectedIndex],
+        bottomNavigationBar: BottomNavigationBar(
+          // Set the number of items to the length of the pages list
+          items: List.generate(_pages.length, (index) => _buildNavigationItem(index)),
+          currentIndex: selectedIndex,
+          onTap: (index) => Provider.of<MyState>(context, listen: false).selectedIndex = index, // Update using Provider
+        ),
+      ),
     );
   }
 }

mobile/app/lib/pages/conversations_list_widget.dart

@@ -1,5 +1,3 @@
-import 'dart:nativewrappers/_internal/vm/lib/internal_patch.dart';
-
 import '/components/conversation_options/conversation_options_widget.dart';
 import 'package:flutterflow_ui/flutterflow_ui.dart';
 import 'package:flutter/material.dart';
@@ -43,65 +41,7 @@ class _ConversationsListWidgetState extends State<ConversationsListWidget> {
       onTap: () => _model.unfocusNode.canRequestFocus
           ? FocusScope.of(context).requestFocus(_model.unfocusNode)
           : FocusScope.of(context).unfocus(),
-      child: Scaffold(
+      child: SafeArea(
-        key: scaffoldKey,
-        backgroundColor: AppTheme.secondaryBackground,
-        floatingActionButton: InkWell(
-          splashColor: Colors.transparent,
-          focusColor: Colors.transparent,
-          hoverColor: Colors.transparent,
-          highlightColor: Colors.transparent,
-          onLongPress: () async {
-            await showModalBottomSheet(
-              isScrollControlled: true,
-              backgroundColor: Colors.transparent,
-              enableDrag: false,
-              context: context,
-              builder: (context) {
-                return GestureDetector(
-                  onTap: () => _model.unfocusNode.canRequestFocus
-                      ? FocusScope.of(context).requestFocus(_model.unfocusNode)
-                      : FocusScope.of(context).unfocus(),
-                  child: Padding(
-                    padding: MediaQuery.viewInsetsOf(context),
-                    child: const ConversationOptionsWidget(),
-                  ),
-                );
-              },
-            ).then((value) => safeSetState(() {}));
-
-            // TODO
-            //context.pushNamed('Conversation');
-          },
-          child: FloatingActionButton(
-            // TODO
-            // onPressed: () async {
-            //   context.pushNamed('Conversation');
-            // },
-            onPressed: () {
-              print("fab pressed");
-            },
-            backgroundColor: AppTheme.primary,
-            elevation: 8,
-            child: const Icon(
-              Icons.add,
-              color: AppTheme.info,
-              size: 24,
-            ),
-          ),
-        ),
-        appBar: AppBar(
-          backgroundColor: AppTheme.secondaryBackground,
-          automaticallyImplyLeading: false,
-          title: const Text(
-            'My Chats',
-            style: AppTheme.headlineLarge,
-          ),
-          actions: const [],
-          centerTitle: false,
-          elevation: 0,
-        ),
-        body: SafeArea(
         top: true,
             child: Column(
               mainAxisSize: MainAxisSize.max,
@@ -142,15 +82,13 @@ class _ConversationsListWidgetState extends State<ConversationsListWidget> {
                                   width: 100,
                                   height: 100,
                                   decoration: const BoxDecoration(
-                                  color: AppTheme
+                                    color: AppTheme.secondaryBackground,
-                                      .secondaryBackground,
                                   ),
                                   child: const Align(
                                     alignment: AlignmentDirectional(0, 0),
                                     child: Icon(
                                       Icons.settings_outlined,
-                                    color: AppTheme
+                                      color: AppTheme.secondaryText,
-                                        .secondaryText,
                                       size: 48,
                                     ),
                                   ),
@@ -166,8 +104,7 @@ class _ConversationsListWidgetState extends State<ConversationsListWidget> {
                                             MediaQuery.sizeOf(context).width,
                                       ),
                                       decoration: const BoxDecoration(
-                                      color: AppTheme
+                                        color: AppTheme.secondaryBackground,
-                                          .secondaryBackground,
                                         shape: BoxShape.rectangle,
                                       ),
                                       child: const Column(
@@ -214,13 +151,11 @@ class _ConversationsListWidgetState extends State<ConversationsListWidget> {
                                   width: 100,
                                   height: 100,
                                   decoration: const BoxDecoration(
-                                  color: AppTheme
+                                    color: AppTheme.secondaryBackground,
-                                      .secondaryBackground,
                                   ),
                                   child: const Icon(
                                     Icons.chevron_right_rounded,
-                                  color: AppTheme
+                                    color: AppTheme.secondaryText,
-                                      .secondaryText,
                                     size: 48,
                                   ),
                                 ),
@@ -234,7 +169,67 @@ class _ConversationsListWidgetState extends State<ConversationsListWidget> {
                 ),
               ],
             ),
-        ),
+      // child: Scaffold(
+      //   key: scaffoldKey,
+      //   backgroundColor: AppTheme.secondaryBackground,
+      //   floatingActionButton: InkWell(
+      //     splashColor: Colors.transparent,
+      //     focusColor: Colors.transparent,
+      //     hoverColor: Colors.transparent,
+      //     highlightColor: Colors.transparent,
+      //     onLongPress: () async {
+      //       await showModalBottomSheet(
+      //         isScrollControlled: true,
+      //         backgroundColor: Colors.transparent,
+      //         enableDrag: false,
+      //         context: context,
+      //         builder: (context) {
+      //           return GestureDetector(
+      //             onTap: () => _model.unfocusNode.canRequestFocus
+      //                 ? FocusScope.of(context).requestFocus(_model.unfocusNode)
+      //                 : FocusScope.of(context).unfocus(),
+      //             child: Padding(
+      //               padding: MediaQuery.viewInsetsOf(context),
+      //               child: const ConversationOptionsWidget(),
+      //             ),
+      //           );
+      //         },
+      //       ).then((value) => safeSetState(() {}));
+      //
+      //       // TODO
+      //       //context.pushNamed('Conversation');
+      //     },
+      //     child: FloatingActionButton(
+      //       // TODO
+      //       // onPressed: () async {
+      //       //   context.pushNamed('Conversation');
+      //       // },
+      //       onPressed: () {
+      //         print("fab pressed");
+      //       },
+      //       backgroundColor: AppTheme.primaryBackground,
+      //       elevation: 8,
+      //       child: const Icon(
+      //         Icons.add,
+      //         color: AppTheme.info,
+      //         size: 24,
+      //       ),
+      //     ),
+      //   ),
+      //   appBar: AppBar(
+      //     backgroundColor: AppTheme.secondaryBackground,
+      //     automaticallyImplyLeading: false,
+      //     title: const Text(
+      //       'My Chats',
+      //       style: AppTheme.headlineLarge,
+      //     ),
+      //     actions: const [],
+      //     centerTitle: false,
+      //     elevation: 0,
+      //   ),
+      //   body: SafeArea(
+      //
+      //   ),
       ),
     );
   }

mobile/app/lib/theme.dart

@@ -4,13 +4,13 @@ class AppTheme {
   static const primary = Colors.deepPurple;
   static const secondary = Colors.deepPurpleAccent;
   static const tertiary = Colors.white;
-  static const alternate = Colors.purple;
+  static const alternate = Colors.deepPurple;
 
   static const accent1 = Colors.amber;
   static const accent4 = Colors.amber;
 
-  static const primaryBackground = Colors.purple;
+  static const primaryBackground = Colors.deepPurpleAccent;
-  static const secondaryBackground = Colors.purpleAccent;
+  static const secondaryBackground = Colors.deepPurple;
 
   static const primaryTextColor = Colors.white;
   static const primaryText = TextStyle(color: primaryTextColor, fontSize: 12);

mobile/app/pubspec.lock

@@ -314,10 +314,10 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      sha256: "9e8c3858111da373efc5aa341de011d9bd23e2c5c5e0c62bccf32438e192d7b1"
+      sha256: "3f41d009ba7172d5ff9be5f6e6e6abb4300e263aab8866d2a0842ed2a70f8f0c"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.2"
+    version: "4.0.0"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
@@ -548,10 +548,10 @@ packages:
     dependency: transitive
     description:
       name: lints
-      sha256: cbf8d4b858bb0134ef3ef87841abdf8d63bfc255c266b7bf6b39daa1085c4290
+      sha256: "976c774dd944a42e83e2467f4cc670daef7eed6295b10b36ae8c85bcbf828235"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.0"
+    version: "4.0.0"
   mapbox_search:
     dependency: transitive
     description:

mobile/app/pubspec.yaml

@@ -53,7 +53,7 @@ dev_dependencies:
   # activated in the `analysis_options.yaml` file located at the root of your
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
-  flutter_lints: ^3.0.0
+  flutter_lints: ^4.0.0
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec