Updated style; added cloud/edge switch to app bar

Author: Michael Wilkerson-Barker

ios/Podfile.lock

@@ -3,13 +3,16 @@ PODS:
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
-  - realm (1.0.3):
+  - realm (1.6.1):
+    - Flutter
+  - url_launcher_ios (0.0.1):
     - Flutter
 
 DEPENDENCIES:
   - Flutter (from `Flutter`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - realm (from `.symlinks/plugins/realm/ios`)
+  - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
 
 EXTERNAL SOURCES:
   Flutter:
@@ -18,12 +21,15 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
   realm:
     :path: ".symlinks/plugins/realm/ios"
+  url_launcher_ios:
+    :path: ".symlinks/plugins/url_launcher_ios/ios"
 
 SPEC CHECKSUMS:
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   path_provider_foundation: 37748e03f12783f9de2cb2c4eadfaa25fe6d4852
-  realm: 05551bcd9993706e7acf15163c9fb7d674fcf3b8
+  realm: 5d10ee70f2daf218914b0496649a2c7f2cbbf7a1
+  url_launcher_ios: 08a3dfac5fb39e8759aeb0abbd5d9480f30fc8b4
 
 PODFILE CHECKSUM: ef19549a9bc3046e7bb7d2fab4d021637c0c58a3
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.13.0

lib/components/app_bar.dart

@@ -6,7 +6,7 @@ import 'package:provider/provider.dart';
 import 'package:flutter_todo/realm/realm_services.dart';
 
 class TodoAppBar extends StatelessWidget implements PreferredSizeWidget {
-  TodoAppBar({Key? key}) : super(key: key);
+  const TodoAppBar({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -15,6 +15,13 @@ class TodoAppBar extends StatelessWidget implements PreferredSizeWidget {
       title: const Text('Realm Flutter To-Do'),
       automaticallyImplyLeading: false,
       actions: <Widget>[
+        IconButton(
+          icon: Icon(realmServices.useCloud
+              ? Icons.cloud_circle
+              : Icons.cloud_circle_outlined),
+          tooltip: 'Switch Edge/Cloud Connection',
+          onPressed: realmServices.offlineModeOn ? null : () async => await switchServer(context, realmServices),
+        ),
         IconButton(
           icon: Icon(realmServices.offlineModeOn
               ? Icons.wifi_off_rounded
@@ -38,6 +45,12 @@ class TodoAppBar extends StatelessWidget implements PreferredSizeWidget {
     Navigator.pushNamed(context, '/login');
   }
 
+  Future<void> switchServer(BuildContext context, RealmServices realmServices) async {
+    if (!await realmServices.cloudEdgeSwitch()) {
+      Navigator.pushNamed(context, '/login');
+    }
+  }
+
   @override
   Size get preferredSize => Size.fromHeight(kToolbarHeight);
 }

lib/components/create_item.dart

@@ -12,7 +12,7 @@ class CreateItemAction extends StatelessWidget {
         onPressed: () => showModalBottomSheet(
               isScrollControlled: true,
               context: context,
-              builder: (_) => Wrap(children: const [CreateItemForm()]),
+              builder: (_) => const Wrap(children: [CreateItemForm()]),
             ));
   }
 }
@@ -51,9 +51,11 @@ class _CreateItemFormState extends State<CreateItemForm> {
             mainAxisAlignment: MainAxisAlignment.center,
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              Text("Create a new item", style: theme.headline6),
+              Text("Create a new item", style: theme.titleLarge),
               TextFormField(
                 controller: _itemEditingController,
+                decoration: const InputDecoration(
+                    hintText: "Enter item text"),
                 validator: (value) => (value ?? "").isEmpty ? "Please enter some text" : null,
               ),
               Padding(

lib/components/modify_item.dart

@@ -47,7 +47,7 @@ class _ModifyItemFormState extends State<ModifyItemForm> {
               mainAxisAlignment: MainAxisAlignment.center,
               mainAxisSize: MainAxisSize.min,
               children: <Widget>[
-                Text("Update your item", style: myTextTheme.headline6),
+                Text("Update your item", style: myTextTheme.titleLarge),
                 TextFormField(
                   controller: _summaryController,
                   validator: (value) => (value ?? "").isEmpty ? "Please enter some text" : null,

lib/components/widgets.dart

@@ -50,13 +50,14 @@ Widget loginButton(BuildContext context,
 Widget templateButton(BuildContext context,
     {Color color = Colors.grey,
     String text = "button",
+    Color textColor = Colors.black,
     void Function()? onPressed}) {
   return Container(
-    margin: const EdgeInsets.symmetric(horizontal: 10),
+    margin: const EdgeInsets.symmetric(horizontal: 5),
     child: ElevatedButton(
-      style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color)),
+      style: ElevatedButton.styleFrom(backgroundColor: color, padding: const EdgeInsets.symmetric(horizontal: 20)),
       onPressed: onPressed,
-      child: Text(text),
+      child: Text(text, style: TextStyle(color: textColor)),
     ),
   );
 }
@@ -75,6 +76,7 @@ Widget okButton(BuildContext context, String text,
     context,
     color: forestGreenColor,
     text: text,
+    textColor: Colors.white,
     onPressed: onPressed,
   );
 }
@@ -84,6 +86,7 @@ Widget deleteButton(BuildContext context, {void Function()? onPressed}) {
     context,
     color: darkRedColor,
     text: "Delete",
+    textColor: Colors.white,
     onPressed: onPressed,
   );
 }
@@ -113,13 +116,15 @@ Widget styledFloatingAddButton(BuildContext context,
     {required void Function() onPressed}) {
   return Padding(
     padding: const EdgeInsets.only(bottom: 5),
-    child: FloatingActionButton(
-      elevation: 0,
-      backgroundColor: Colors.white,
-      onPressed: onPressed,
-      tooltip: 'Add',
-      child: Padding(
-        padding: const EdgeInsets.all(3),
+    child: Material(
+      borderRadius: BorderRadius.circular(30.0),
+      elevation: 5,
+      shadowColor: Colors.black,
+      child: FloatingActionButton(
+        elevation: 0,
+        backgroundColor: Colors.transparent,
+        onPressed: onPressed,
+        tooltip: 'Add',
         child: CircleAvatar(
           radius: 26,
           backgroundColor: Theme.of(context).primaryColor,

lib/main.dart

@@ -36,20 +36,21 @@ class App extends StatelessWidget {
   Widget build(BuildContext context) {
     final String atlasUrl =
         Provider.of<Config>(context, listen: false).atlasUrl;
-    print("To see your data in Atlas, follow this link:$atlasUrl");
+    print("To see your data in Atlas, follow this link: $atlasUrl");
 
     final currentUser =
         Provider.of<RealmServices?>(context, listen: false)?.currentUser;
 
-    return WillPopScope(
-      onWillPop: () async => false,
+    return PopScope(
+      canPop: false,
+      onPopInvoked: (didPop) {},
       child: MaterialApp(
         title: 'Realm Flutter Todo',
         theme: appThemeData(),
         initialRoute: currentUser != null ? '/' : '/login',
         routes: {
           '/': (context) => const HomePage(),
-          '/login': (context) => LogIn()
+          '/login': (context) => const LogIn(),
         },
       ),
     );

lib/realm/realm_services.dart

@@ -5,15 +5,21 @@ import 'package:flutter/material.dart';
 class RealmServices with ChangeNotifier {
   static const String queryAllName = "getAllItemsSubscription";
   static const String queryMyItemsName = "getMyItemsSubscription";
+  static const String cloudServer = "https://realm.mongodb.com";
+  static const String edgeServer = "http://172.16.101.112";
+  static const String email = "[email protected]";
+  static const String password = "testpass";
 
   bool showAll = false;
   bool offlineModeOn = false;
+  bool useCloud = true;
   bool isWaiting = false;
   late Realm realm;
   User? currentUser;
   App app;
 
   RealmServices(this.app) {
+    print("RealmServices()");
     if (app.currentUser != null || currentUser != app.currentUser) {
       currentUser ??= app.currentUser;
       realm = Realm(Configuration.flexibleSync(currentUser!, [Item.schema]));
@@ -42,19 +48,51 @@ class RealmServices with ChangeNotifier {
     offlineModeOn = !offlineModeOn;
     if (offlineModeOn) {
       realm.syncSession.pause();
+      print("OFFLINE");
     } else {
       try {
         isWaiting = true;
         notifyListeners();
         realm.syncSession.resume();
         await updateSubscriptions();
+        print("ONLINE with server base url: ${app.getBaseUrl()}");
       } finally {
         isWaiting = false;
       }
     }
     notifyListeners();
   }
 
+  Future<bool> cloudEdgeSwitch() async {
+    if (!offlineModeOn && !realm.isClosed) {
+      useCloud = !useCloud;
+      try {
+        isWaiting = true;
+        realm.syncSession.pause();
+        final serverUrl = useCloud ? cloudServer : edgeServer;
+        print("Updating base url to: $serverUrl");
+        await app.updateBaseUrl(Uri.parse(serverUrl));
+        User loggedInUser = await app.logIn(Credentials.emailPassword(email, password));
+        print("Using server base url: ${app.getBaseUrl()}");
+        if (app.currentUser == null && currentUser != loggedInUser) {
+          print("User is either null or not the same as the original user");
+          await close();
+          return false;
+        }
+        realm.syncSession.resume();
+      } catch (e) {
+        print("Error occurred while switching servers: $e");
+        await close();
+        return false;
+      } finally {
+        isWaiting = false;
+      }
+      notifyListeners();
+    }
+    print("Done switching servers");
+    return true;
+  }
+
   Future<void> switchSubscription(bool value) async {
     showAll = value;
     if (!offlineModeOn) {

lib/screens/homepage.dart

@@ -12,12 +12,12 @@ class HomePage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Provider.of<RealmServices?>(context, listen: false) == null
         ? Container()
-        : Scaffold(
+        : const Scaffold(
             appBar: TodoAppBar(),
-            body: const TodoList(),
+            body: TodoList(),
             floatingActionButtonLocation:
                 FloatingActionButtonLocation.endDocked,
-            floatingActionButton: const CreateItemAction(),
+            floatingActionButton: CreateItemAction(),
           );
   }
 }

lib/screens/log_in.dart

@@ -5,6 +5,8 @@ import 'package:flutter_todo/components/widgets.dart';
 import 'package:flutter_todo/realm/app_services.dart';
 
 class LogIn extends StatefulWidget {
+  const LogIn({super.key});
+
   @override
   _LogInState createState() => _LogInState();
 }

lib/theme.dart

@@ -2,23 +2,25 @@ import 'package:flutter/material.dart';
 
 appThemeData() {
   return ThemeData(
-          primarySwatch: forestGreenColor,
-          backgroundColor: mistColor,
-          colorScheme: ColorScheme.fromSwatch(primarySwatch: forestGreenColor),
-          errorColor: darkRedColor)
+          colorScheme: ColorScheme.fromSwatch(primarySwatch: forestGreenColor, backgroundColor: mistColor, errorColor: darkRedColor))
       .copyWith(
     textButtonTheme: TextButtonThemeData(
       style: TextButton.styleFrom(
-        foregroundColor: Colors.blue,
+        foregroundColor: Colors.white,
       ),
     ),
+    switchTheme: SwitchThemeData(
+      trackColor: MaterialStateProperty.all<Color>(forestGreenColor),
+      thumbColor: MaterialStateProperty.all<Color>(Colors.white),
+    ),
     checkboxTheme: CheckboxThemeData(
       checkColor: MaterialStateProperty.all(Colors.white),
       fillColor: MaterialStateProperty.all(forestGreenColor),
     ),
     elevatedButtonTheme: ElevatedButtonThemeData(
       style: ButtonStyle(
-        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
+        backgroundColor: MaterialStateProperty.all<Color>(forestGreenColor),
+        overlayColor: MaterialStateProperty.all<Color>(Colors.lightGreen),
         textStyle: MaterialStateProperty.all<TextStyle>(
             const TextStyle(color: Colors.white)),
       ),
@@ -29,7 +31,7 @@ appThemeData() {
 headerFooterBoxDecoration(BuildContext context, bool isHeader) {
   final theme = Theme.of(context);
   return BoxDecoration(
-    color: theme.backgroundColor,
+    color: theme.colorScheme.background,
     border: Border(
         top: isHeader
             ? BorderSide.none
@@ -44,22 +46,22 @@ errorBoxDecoration(BuildContext context) {
   final theme = Theme.of(context);
   return BoxDecoration(
       border: Border.all(color: Colors.black),
-      color: theme.backgroundColor,
+      color: theme.colorScheme.background,
       borderRadius: const BorderRadius.all(Radius.circular(8)));
 }
 
 infoBoxDecoration(BuildContext context) {
   final theme = Theme.of(context);
   return BoxDecoration(
       border: Border.all(color: Colors.black),
-      color: theme.backgroundColor,
+      color: theme.colorScheme.background,
       borderRadius: const BorderRadius.all(Radius.circular(8)));
 }
 
 errorTextStyle(BuildContext context, {bool bold = false}) {
   final theme = Theme.of(context);
   return TextStyle(
-      color: theme.errorColor,
+      color: theme.colorScheme.error,
       fontWeight: bold ? FontWeight.bold : FontWeight.normal);
 }
 
@@ -105,5 +107,5 @@ MaterialColor mistColor = MaterialColor(
   },
 );
 
-Color get darkRedColor => Color.fromARGB(255, 208, 18, 5);
+Color get darkRedColor => const Color.fromARGB(255, 208, 18, 5);
 Color get lightRedColor => const Color.fromARGB(255, 244, 223, 221);