a bit of refactoring

lib/global_theme.dart

@@ -0,0 +1,69 @@
+import 'package:dynamic_color/dynamic_color.dart';
+import 'package:flutter/material.dart';
+
+class GlobalTheme {
+  static final Color _lightFocusColor = Colors.black.withOpacity(0.12);
+  static final Color _darkFocusColor = Colors.white.withOpacity(0.12);
+  static ThemeData lightThemeData(ColorScheme? dynamicColorScheme) {
+    return themeData(lightColorScheme, dynamicColorScheme, _lightFocusColor);
+  }
+  static ThemeData darkThemeData(ColorScheme? dynamicColorScheme) {
+    return themeData(darkColorScheme, dynamicColorScheme, _darkFocusColor);
+  }
+
+  static ThemeData themeData(ColorScheme colorScheme, ColorScheme? dynamic,
+      Color focusColor) {
+    return ThemeData(
+        colorScheme: colorScheme,
+        canvasColor: colorScheme.surface,
+        scaffoldBackgroundColor: colorScheme.surface,
+        highlightColor: Colors.transparent,
+        dividerColor: colorScheme.outline,
+        focusColor: focusColor,
+        useMaterial3: true,
+        appBarTheme: AppBarTheme(
+            backgroundColor: colorScheme.surface,
+            foregroundColor: colorScheme.onSurface,
+            elevation: 0
+    )
+    );
+  }
+
+  static ColorScheme get lightColorScheme {
+    return ColorScheme(
+      primary: Color(0xff747ab5),
+      onPrimary: Colors.white,
+      secondary: Color(0x335d63a6),// Color(0xFFDDE0E0),
+      onSecondary: Color(0xFF322942),
+      tertiary: Colors.grey[300],
+      onTertiary: Colors.grey[700],
+      surfaceContainer: (Colors.grey[100])!,
+      outline: (Colors.grey[400])!,
+      error: (Colors.red[400])!,
+      onError: Colors.white,
+      surface: Color(0xFFFAFBFB),
+      onSurface: Color(0xFF241E30),
+      brightness: Brightness.light,
+    );
+  }
+
+  static ColorScheme get darkColorScheme {
+    return ColorScheme(
+      primary: Color(0xff5d63a6),
+      secondary: Colors.blue.shade500,
+      secondaryContainer: Color(0xff1c1c1c),
+      surface: Colors.black,
+      surfaceContainer: Color(0xff0f0f0f),
+      onSurfaceVariant: Colors.grey[400],
+      tertiary: Colors.grey[900],
+      onTertiary: Colors.grey,
+      outline: (Colors.grey[800])!,
+      error: (Colors.red[400])!,
+      onError: Colors.white,
+      onPrimary: Colors.white,
+      onSecondary: (Colors.grey[400])!,
+      onSurface: Colors.white,
+      brightness: Brightness.dark,
+    );
+  }
+}

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:shlink_app/global_theme.dart';
 import 'package:shlink_app/views/login_view.dart';
 import 'package:shlink_app/views/navigationbar_view.dart';
 import 'globals.dart' as globals;
@@ -26,7 +27,9 @@ class MyApp extends StatelessWidget {
       return MaterialApp(
           title: 'Shlink',
           debugShowCheckedModeBanner: false,
-          theme: ThemeData(
+          theme: GlobalTheme.lightThemeData(lightColorScheme),
+          darkTheme: GlobalTheme.darkThemeData(darkColorScheme),
+          /*theme: ThemeData(
               appBarTheme: const AppBarTheme(
                 backgroundColor: Color(0xfffafafa),
               ),
@@ -41,7 +44,7 @@ class MyApp extends StatelessWidget {
             colorScheme: darkColorScheme?.copyWith(surface: Colors.black) ??
                 _defaultDarkColorScheme,
             useMaterial3: true,
-          ),
+          ),*/
           home: const InitialPage());
     });
   }

lib/util/build_api_error_snackbar.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:shlink_app/API/server_manager.dart';
+
+SnackBar buildApiErrorSnackbar(Failure r, BuildContext context) {
+  var text = "";
+
+  if (r is RequestFailure) {
+    text = r.description;
+  } else {
+    text = (r as ApiFailure).detail;
+    if ((r).invalidElements != null) {
+      text = "$text: ${(r).invalidElements}";
+    }
+  }
+
+  final snackBar = SnackBar(
+      content: Text(text, style: TextStyle(color: Theme.of(context).colorScheme.onError)),
+      backgroundColor: Theme.of(context).colorScheme.error,
+      behavior: SnackBarBehavior.floating);
+
+  return snackBar;
+}

lib/views/home_view.dart

@@ -5,7 +5,7 @@ import 'package:flutter_sharing_intent/flutter_sharing_intent.dart';
 import 'package:flutter_sharing_intent/model/sharing_file.dart';
 import 'package:qr_flutter/qr_flutter.dart';
 import 'package:shlink_app/API/Classes/ShlinkStats/shlink_stats.dart';
-import 'package:shlink_app/API/server_manager.dart';
+import 'package:shlink_app/util/build_api_error_snackbar.dart';
 import 'package:shlink_app/views/short_url_edit_view.dart';
 import 'package:shlink_app/views/url_list_view.dart';
 import 'package:shlink_app/widgets/available_servers_bottom_sheet.dart';
@@ -68,18 +68,9 @@ class _HomeViewState extends State<HomeView> {
         shlinkStats = l;
       });
     }, (r) {
-      var text = "";
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
     });
   }
 
@@ -91,18 +82,9 @@ class _HomeViewState extends State<HomeView> {
         shortUrlsLoaded = true;
       });
     }, (r) {
-      var text = "";
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
     });
   }
 
@@ -139,7 +121,7 @@ class _HomeViewState extends State<HomeView> {
                               },
                               child: Text(globals.serverManager.getServerUrl(),
                                   style: TextStyle(
-                                      fontSize: 16, color: Colors.grey[600])),
+                                      fontSize: 16, color: Theme.of(context).colorScheme.onTertiary)),
                             )
                           ],
                         )),
@@ -189,7 +171,7 @@ class _HomeViewState extends State<HomeView> {
                                           'Create one by tapping the "+" button below',
                                           style: TextStyle(
                                               fontSize: 16,
-                                              color: Colors.grey[600]),
+                                              color: Theme.of(context).colorScheme.onSecondary),
                                         ),
                                       )
                                     ],
@@ -251,18 +233,12 @@ class _HomeViewState extends State<HomeView> {
                             eyeStyle: QrEyeStyle(
                               eyeShape: QrEyeShape.square,
                               color:
-                                  MediaQuery.of(context).platformBrightness ==
-                                          Brightness.dark
-                                      ? Colors.white
-                                      : Colors.black,
+                                  Theme.of(context).colorScheme.onPrimary
                             ),
                             dataModuleStyle: QrDataModuleStyle(
                               dataModuleShape: QrDataModuleShape.square,
                               color:
-                                  MediaQuery.of(context).platformBrightness ==
-                                          Brightness.dark
-                                      ? Colors.white
-                                      : Colors.black,
+                              Theme.of(context).colorScheme.onPrimary
                             ),
                           ))),
                 ),

lib/views/login_view.dart

@@ -135,7 +135,7 @@ class _LoginViewState extends State<LoginView> {
                       children: [
                         Flexible(
                             child: Text(_errorMessage,
-                                style: const TextStyle(color: Colors.red),
+                                style: TextStyle(color: Theme.of(context).colorScheme.onError),
                                 textAlign: TextAlign.center))
                       ],
                     ),

lib/views/opensource_licenses_view.dart

@@ -40,9 +40,7 @@ class _OpenSourceLicensesViewState extends State<OpenSourceLicensesView> {
                   child: Container(
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(8),
-                      color: Theme.of(context).brightness == Brightness.light
-                          ? Colors.grey[100]
-                          : Colors.grey[900],
+                      color: Theme.of(context).colorScheme.surfaceContainer,
                     ),
                     child: Padding(
                       padding: const EdgeInsets.only(
@@ -54,13 +52,13 @@ class _OpenSourceLicensesViewState extends State<OpenSourceLicensesView> {
                               style: const TextStyle(
                                   fontWeight: FontWeight.bold, fontSize: 18)),
                           Text("Version: ${currentLicense.version ?? "N/A"}",
-                              style: const TextStyle(color: Colors.grey)),
+                              style: TextStyle(color: Theme.of(context).colorScheme.onTertiary)),
                           const SizedBox(height: 8),
-                          const Divider(),
+                          Divider(color: Theme.of(context).dividerColor),
                           const SizedBox(height: 8),
                           Text(currentLicense.license,
                               textAlign: TextAlign.justify,
-                              style: const TextStyle(color: Colors.grey)),
+                              style: TextStyle(color: Theme.of(context).colorScheme.onTertiary)),
                         ],
                       ),
                     ),
@@ -69,12 +67,12 @@ class _OpenSourceLicensesViewState extends State<OpenSourceLicensesView> {
               );
             }, childCount: LicenseUtil.getLicenses().length),
           ),
-          const SliverToBoxAdapter(
+          SliverToBoxAdapter(
               child: Padding(
             padding: EdgeInsets.only(top: 8, bottom: 20),
             child: Text(
               "Thank you to all maintainers of these repositories 💝",
-              style: TextStyle(color: Colors.grey),
+              style: TextStyle(color: Theme.of(context).colorScheme.onTertiary),
               textAlign: TextAlign.center,
             ),
           ))

lib/views/redirect_rules_detail_view.dart

@@ -3,7 +3,7 @@ import 'package:shlink_app/API/Classes/ShortURL/RedirectRule/condition_device_ty
 import 'package:shlink_app/API/Classes/ShortURL/RedirectRule/redirect_rule_condition.dart';
 import 'package:shlink_app/API/Classes/ShortURL/RedirectRule/redirect_rule_condition_type.dart';
 import 'package:shlink_app/API/Classes/ShortURL/short_url.dart';
-import 'package:shlink_app/API/server_manager.dart';
+import 'package:shlink_app/util/build_api_error_snackbar.dart';
 import '../globals.dart' as globals;
 import '../API/Classes/ShortURL/RedirectRule/redirect_rule.dart';
 
@@ -41,18 +41,9 @@ class _RedirectRulesDetailViewState extends State<RedirectRulesDetailView> {
       _sortListByPriority();
       return true;
     }, (r) {
-      var text = "";
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
       return false;
     });
   }
@@ -63,18 +54,9 @@ class _RedirectRulesDetailViewState extends State<RedirectRulesDetailView> {
     response.fold((l) {
       Navigator.pop(context);
     }, (r) {
-      var text = "";
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
       return false;
     });
   }
@@ -141,7 +123,7 @@ class _RedirectRulesDetailViewState extends State<RedirectRulesDetailView> {
                               child: Text(
                                 'Adding redirect rules will be supported soon!',
                                 style: TextStyle(
-                                    fontSize: 16, color: Colors.grey[600]),
+                                    fontSize: 16, color: Theme.of(context).colorScheme.onSecondary),
                               ),
                             )
                           ],
@@ -221,10 +203,7 @@ class _ListCellState extends State<_ListCell> {
             decoration: BoxDecoration(
               border: Border(
                   bottom: BorderSide(
-                      color: MediaQuery.of(context).platformBrightness ==
-                              Brightness.dark
-                          ? Colors.grey[800]!
-                          : Colors.grey[300]!)),
+                      color: Theme.of(context).dividerColor)),
             ),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -252,10 +231,7 @@ class _ListCellState extends State<_ListCell> {
                               decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(4),
                                 color:
-                                    MediaQuery.of(context).platformBrightness ==
-                                            Brightness.dark
-                                        ? Colors.grey[900]
-                                        : Colors.grey[300],
+                                    Theme.of(context).colorScheme.tertiary,
                               ),
                               child: Text(_conditionToTagString(condition)),
                             ),
@@ -269,19 +245,13 @@ class _ListCellState extends State<_ListCell> {
                   children: [
                     IconButton(
                       disabledColor:
-                          MediaQuery.of(context).platformBrightness ==
-                                  Brightness.dark
-                              ? Colors.grey[700]
-                              : Colors.grey[400],
+                          Theme.of(context).disabledColor,
                       onPressed: widget.moveUp,
                       icon: const Icon(Icons.arrow_upward),
                     ),
                     IconButton(
                       disabledColor:
-                          MediaQuery.of(context).platformBrightness ==
-                                  Brightness.dark
-                              ? Colors.grey[700]
-                              : Colors.grey[400],
+                      Theme.of(context).disabledColor,
                       onPressed: widget.moveDown,
                       icon: const Icon(Icons.arrow_downward),
                     ),

lib/views/settings_view.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:package_info_plus/package_info_plus.dart';
-import 'package:shlink_app/API/server_manager.dart';
+import 'package:shlink_app/util/build_api_error_snackbar.dart';
 import 'package:shlink_app/views/opensource_licenses_view.dart';
 import 'package:shlink_app/widgets/available_servers_bottom_sheet.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -43,19 +43,9 @@ class _SettingsViewState extends State<SettingsView> {
       setState(() {
         _serverStatus = ServerStatus.disconnected;
       });
-
-      var text = "";
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
     });
   }
 
@@ -87,9 +77,7 @@ class _SettingsViewState extends State<SettingsView> {
                     child: Container(
                       decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular(8),
-                        color: Theme.of(context).brightness == Brightness.light
-                            ? Colors.grey[100]
-                            : Colors.grey[900],
+                        color: Theme.of(context).colorScheme.surfaceContainer
                       ),
                       child: Padding(
                         padding: const EdgeInsets.all(12.0),
@@ -110,29 +98,29 @@ class _SettingsViewState extends State<SettingsView> {
                             Column(
                               crossAxisAlignment: CrossAxisAlignment.start,
                               children: [
-                                const Text("Connected to",
-                                    style: TextStyle(color: Colors.grey)),
+                                Text("Connected to",
+                                    style: TextStyle(color: Theme.of(context).colorScheme.onTertiary)),
                                 Text(globals.serverManager.getServerUrl(),
                                     style: const TextStyle(
                                         fontWeight: FontWeight.bold,
                                         fontSize: 16)),
                                 Row(
                                   children: [
-                                    const Text("API Version: ",
+                                    Text("API Version: ",
                                         style: TextStyle(
-                                            color: Colors.grey,
+                                            color: Theme.of(context).colorScheme.onTertiary,
                                             fontWeight: FontWeight.w600)),
                                     Text(globals.serverManager.getApiVersion(),
-                                        style: const TextStyle(
-                                            color: Colors.grey)),
-                                    const SizedBox(width: 16),
-                                    const Text("Server Version: ",
                                         style: TextStyle(
-                                            color: Colors.grey,
+                                            color: Theme.of(context).colorScheme.onTertiary)),
+                                    const SizedBox(width: 16),
+                                    Text("Server Version: ",
+                                        style: TextStyle(
+                                            color: Theme.of(context).colorScheme.onTertiary,
                                             fontWeight: FontWeight.w600)),
                                     Text(_serverVersion,
                                         style:
-                                            const TextStyle(color: Colors.grey))
+                                        TextStyle(color: Theme.of(context).colorScheme.onTertiary))
                                   ],
                                 ),
                               ],
@@ -143,7 +131,7 @@ class _SettingsViewState extends State<SettingsView> {
                     ),
                   ),
                   const SizedBox(height: 8),
-                  const Divider(),
+                  Divider(color: Theme.of(context).dividerColor),
                   const SizedBox(height: 8),
                   GestureDetector(
                     onTap: () {
@@ -154,9 +142,7 @@ class _SettingsViewState extends State<SettingsView> {
                     child: Container(
                       decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular(8),
-                        color: Theme.of(context).brightness == Brightness.light
-                            ? Colors.grey[100]
-                            : Colors.grey[900],
+                        color: Theme.of(context).colorScheme.surfaceContainer
                       ),
                       child: const Padding(
                         padding: EdgeInsets.only(
@@ -190,9 +176,7 @@ class _SettingsViewState extends State<SettingsView> {
                     child: Container(
                       decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular(8),
-                        color: Theme.of(context).brightness == Brightness.light
-                            ? Colors.grey[100]
-                            : Colors.grey[900],
+                        color: Theme.of(context).colorScheme.surfaceContainer
                       ),
                       child: const Padding(
                         padding: EdgeInsets.only(
@@ -226,9 +210,7 @@ class _SettingsViewState extends State<SettingsView> {
                     child: Container(
                       decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular(8),
-                        color: Theme.of(context).brightness == Brightness.light
-                            ? Colors.grey[100]
-                            : Colors.grey[900],
+                        color: Theme.of(context).colorScheme.surfaceContainer
                       ),
                       child: const Padding(
                         padding: EdgeInsets.only(
@@ -261,13 +243,11 @@ class _SettingsViewState extends State<SettingsView> {
                           decoration: BoxDecoration(
                             borderRadius: BorderRadius.circular(8),
                             color:
-                                Theme.of(context).brightness == Brightness.light
-                                    ? Colors.grey[100]
-                                    : Colors.grey[900],
+                            Theme.of(context).colorScheme.surfaceContainer
                           ),
                           child: Text(
                             "${packageInfo.appName}, v${packageInfo.version} (${packageInfo.buildNumber})",
-                            style: const TextStyle(color: Colors.grey),
+                            style: TextStyle(color: Theme.of(context).colorScheme.onSecondary),
                           ),
                         )
                       ],

lib/views/short_url_edit_view.dart

@@ -4,6 +4,7 @@ import 'package:flutter/services.dart';
 import 'package:shlink_app/API/Classes/ShortURL/short_url.dart';
 import 'package:shlink_app/API/Classes/ShortURLSubmission/short_url_submission.dart';
 import 'package:shlink_app/API/server_manager.dart';
+import 'package:shlink_app/util/build_api_error_snackbar.dart';
 import '../globals.dart' as globals;
 
 class ShortURLEditView extends StatefulWidget {
@@ -72,6 +73,34 @@ class _ShortURLEditViewState extends State<ShortURLEditView>
     }
   }
 
+  void _saveButtonPressed() {
+    if (!isSaving) {
+      setState(() {
+        isSaving = true;
+        longUrlError = "";
+        randomSlugLengthError = "";
+      });
+      if (longUrlController.text == "") {
+        setState(() {
+          longUrlError = "URL cannot be empty";
+          isSaving = false;
+        });
+        return;
+      } else if (int.tryParse(randomSlugLengthController.text) ==
+          null ||
+          int.tryParse(randomSlugLengthController.text)! < 1 ||
+          int.tryParse(randomSlugLengthController.text)! > 50) {
+        setState(() {
+          randomSlugLengthError = "invalid number";
+          isSaving = false;
+        });
+        return;
+      } else {
+        _submitShortUrl();
+      }
+    }
+  }
+
   void _submitShortUrl() async {
     var newSubmission = ShortURLSubmission(
         longUrl: longUrlController.text,
@@ -119,22 +148,9 @@ class _ShortURLEditViewState extends State<ShortURLEditView>
         isSaving = false;
       });
 
-      var text = "";
-
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-        if ((r).invalidElements != null) {
-          text = "$text: ${(r).invalidElements}";
-        }
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
       return false;
     });
   }
@@ -149,203 +165,172 @@ class _ShortURLEditViewState extends State<ShortURLEditView>
                 style: const TextStyle(fontWeight: FontWeight.bold)),
           ),
           SliverToBoxAdapter(
-              child: Padding(
-            padding: const EdgeInsets.only(left: 16, right: 16, top: 16),
-            child: Column(
-              children: [
-                TextField(
-                  controller: longUrlController,
-                  decoration: InputDecoration(
-                      errorText: longUrlError != "" ? longUrlError : null,
-                      border: const OutlineInputBorder(),
-                      label: const Row(
-                        children: [
-                          Icon(Icons.public),
-                          SizedBox(width: 8),
-                          Text("Long URL")
-                        ],
-                      )),
-                ),
-                const SizedBox(height: 16),
-                Row(
-                  children: [
-                    Expanded(
-                      child: TextField(
-                        enabled: !disableSlugEditor,
-                        controller: customSlugController,
-                        style: TextStyle(
-                            color: randomSlug
-                                ? Colors.grey
-                                : Theme.of(context).brightness ==
-                                        Brightness.light
-                                    ? Colors.black
-                                    : Colors.white),
-                        onChanged: (_) {
-                          if (randomSlug) {
-                            setState(() {
-                              randomSlug = false;
-                            });
-                          }
-                        },
-                        decoration: InputDecoration(
-                            border: const OutlineInputBorder(),
-                            label: Row(
-                              children: [
-                                const Icon(Icons.link),
-                                const SizedBox(width: 8),
-                                Text(
-                                  "${randomSlug ? "Random" : "Custom"} slug",
-                                  style: TextStyle(
-                                      fontStyle: randomSlug
-                                          ? FontStyle.italic
-                                          : FontStyle.normal),
-                                )
-                              ],
-                            )),
+            child: Padding(
+              padding: EdgeInsets.only(top: 16, left: 8, right: 8),
+              child: Wrap(
+                runSpacing: 16,
+                children: [
+                  TextField(
+                    controller: longUrlController,
+                    decoration: InputDecoration(
+                        errorText: longUrlError != "" ? longUrlError : null,
+                        border: const OutlineInputBorder(),
+                        label: const Row(
+                          children: [
+                            Icon(Icons.public),
+                            SizedBox(width: 8),
+                            Text("Long URL")
+                          ],
+                        )),
+                  ),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: TextField(
+                          enabled: !disableSlugEditor,
+                          controller: customSlugController,
+                          style: TextStyle(
+                              color: randomSlug
+                                  ? Theme.of(context).colorScheme.onTertiary
+                                  : Theme.of(context).colorScheme.onPrimary),
+                          onChanged: (_) {
+                            if (randomSlug) {
+                              setState(() {
+                                randomSlug = false;
+                              });
+                            }
+                          },
+                          decoration: InputDecoration(
+                              border: const OutlineInputBorder(),
+                              label: Row(
+                                children: [
+                                  const Icon(Icons.link),
+                                  const SizedBox(width: 8),
+                                  Text(
+                                    "${randomSlug ? "Random" : "Custom"} slug",
+                                    style: TextStyle(
+                                        fontStyle: randomSlug
+                                            ? FontStyle.italic
+                                            : FontStyle.normal),
+                                  )
+                                ],
+                              )),
+                        ),
                       ),
+                      const SizedBox(width: 8),
+                      RotationTransition(
+                        turns: Tween(begin: 0.0, end: 3.0).animate(
+                            CurvedAnimation(
+                                parent: _customSlugDiceAnimationController,
+                                curve: Curves.easeInOutExpo)),
+                        child: IconButton(
+                            onPressed: disableSlugEditor
+                                ? null
+                                : () {
+                              if (randomSlug) {
+                                _customSlugDiceAnimationController.reverse(
+                                    from: 1);
+                              } else {
+                                _customSlugDiceAnimationController.forward(
+                                    from: 0);
+                              }
+                              setState(() {
+                                randomSlug = !randomSlug;
+                              });
+                            },
+                            icon: Icon(
+                                randomSlug ? Icons.casino : Icons.casino_outlined,
+                                color: randomSlug ? Colors.green : Colors.grey)),
+                      )
+                    ],
+                  ),
+                  if (randomSlug)
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        const Text("Random slug length"),
+                        SizedBox(
+                            width: 100,
+                            child: TextField(
+                              controller: randomSlugLengthController,
+                              keyboardType: TextInputType.number,
+                              decoration: InputDecoration(
+                                  errorText:
+                                  randomSlugLengthError != "" ? "" : null,
+                                  border: const OutlineInputBorder(),
+                                  label: const Row(
+                                    children: [
+                                      Icon(Icons.tag),
+                                      SizedBox(width: 8),
+                                      Text("Length")
+                                    ],
+                                  )),
+                            ))
+                      ],
                     ),
-                    const SizedBox(width: 8),
-                    RotationTransition(
-                      turns: Tween(begin: 0.0, end: 3.0).animate(
-                          CurvedAnimation(
-                              parent: _customSlugDiceAnimationController,
-                              curve: Curves.easeInOutExpo)),
-                      child: IconButton(
-                          onPressed: disableSlugEditor
-                              ? null
-                              : () {
-                                  if (randomSlug) {
-                                    _customSlugDiceAnimationController.reverse(
-                                        from: 1);
-                                  } else {
-                                    _customSlugDiceAnimationController.forward(
-                                        from: 0);
-                                  }
-                                  setState(() {
-                                    randomSlug = !randomSlug;
-                                  });
-                                },
-                          icon: Icon(
-                              randomSlug ? Icons.casino : Icons.casino_outlined,
-                              color: randomSlug ? Colors.green : Colors.grey)),
-                    )
-                  ],
-                ),
-                if (randomSlug) const SizedBox(height: 16),
-                if (randomSlug)
+                  TextField(
+                    controller: titleController,
+                    decoration: const InputDecoration(
+                        border: OutlineInputBorder(),
+                        label: Row(
+                          children: [
+                            Icon(Icons.badge),
+                            SizedBox(width: 8),
+                            Text("Title")
+                          ],
+                        )),
+                  ),
                   Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      const Text("Random slug length"),
-                      SizedBox(
-                          width: 100,
-                          child: TextField(
-                            controller: randomSlugLengthController,
-                            keyboardType: TextInputType.number,
-                            decoration: InputDecoration(
-                                errorText:
-                                    randomSlugLengthError != "" ? "" : null,
-                                border: const OutlineInputBorder(),
-                                label: const Row(
-                                  children: [
-                                    Icon(Icons.tag),
-                                    SizedBox(width: 8),
-                                    Text("Length")
-                                  ],
-                                )),
-                          ))
+                      const Text("Crawlable"),
+                      Switch(
+                        value: isCrawlable,
+                        onChanged: (_) {
+                          setState(() {
+                            isCrawlable = !isCrawlable;
+                          });
+                        },
+                      )
                     ],
                   ),
-                const SizedBox(height: 16),
-                TextField(
-                  controller: titleController,
-                  decoration: const InputDecoration(
-                      border: OutlineInputBorder(),
-                      label: Row(
-                        children: [
-                          Icon(Icons.badge),
-                          SizedBox(width: 8),
-                          Text("Title")
-                        ],
-                      )),
-                ),
-                const SizedBox(height: 16),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    const Text("Crawlable"),
-                    Switch(
-                      value: isCrawlable,
-                      onChanged: (_) {
-                        setState(() {
-                          isCrawlable = !isCrawlable;
-                        });
-                      },
-                    )
-                  ],
-                ),
-                const SizedBox(height: 16),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    const Text("Forward query params"),
-                    Switch(
-                      value: forwardQuery,
-                      onChanged: (_) {
-                        setState(() {
-                          forwardQuery = !forwardQuery;
-                        });
-                      },
-                    )
-                  ],
-                ),
-                const SizedBox(height: 16),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    const Text("Copy to clipboard"),
-                    Switch(
-                      value: copyToClipboard,
-                      onChanged: (_) {
-                        setState(() {
-                          copyToClipboard = !copyToClipboard;
-                        });
-                      },
-                    )
-                  ],
-                ),
-              ],
-            ),
-          ))
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      const Text("Forward query params"),
+                      Switch(
+                        value: forwardQuery,
+                        onChanged: (_) {
+                          setState(() {
+                            forwardQuery = !forwardQuery;
+                          });
+                        },
+                      )
+                    ],
+                  ),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      const Text("Copy to clipboard"),
+                      Switch(
+                        value: copyToClipboard,
+                        onChanged: (_) {
+                          setState(() {
+                            copyToClipboard = !copyToClipboard;
+                          });
+                        },
+                      )
+                    ],
+                  ),
+                ],
+              ),
+            )
+          )
         ],
       ),
       floatingActionButton: FloatingActionButton(
           onPressed: () {
-            if (!isSaving) {
-              setState(() {
-                isSaving = true;
-                longUrlError = "";
-                randomSlugLengthError = "";
-              });
-              if (longUrlController.text == "") {
-                setState(() {
-                  longUrlError = "URL cannot be empty";
-                  isSaving = false;
-                });
-                return;
-              } else if (int.tryParse(randomSlugLengthController.text) ==
-                      null ||
-                  int.tryParse(randomSlugLengthController.text)! < 1 ||
-                  int.tryParse(randomSlugLengthController.text)! > 50) {
-                setState(() {
-                  randomSlugLengthError = "invalid number";
-                  isSaving = false;
-                });
-                return;
-              } else {
-                _submitShortUrl();
-              }
-            }
+            _saveButtonPressed();
           },
           child: isSaving
               ? const Padding(

lib/views/url_detail_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:shlink_app/API/Classes/ShortURL/short_url.dart';
 import 'package:intl/intl.dart';
-import 'package:shlink_app/API/server_manager.dart';
+import 'package:shlink_app/util/build_api_error_snackbar.dart';
 import 'package:shlink_app/views/redirect_rules_detail_view.dart';
 import 'package:shlink_app/views/short_url_edit_view.dart';
 import 'package:shlink_app/widgets/url_tags_list_widget.dart';
@@ -67,18 +67,9 @@ class _URLDetailViewState extends State<URLDetailView> {
                     ScaffoldMessenger.of(context).showSnackBar(snackBar);
                     return true;
                   }, (r) {
-                    var text = "";
-                    if (r is RequestFailure) {
-                      text = r.description;
-                    } else {
-                      text = (r as ApiFailure).detail;
-                    }
-
-                    final snackBar = SnackBar(
-                        content: Text(text),
-                        backgroundColor: Colors.red[400],
-                        behavior: SnackBarBehavior.floating);
-                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      buildApiErrorSnackbar(r, context)
+                    );
                     return false;
                   });
                 },
@@ -207,10 +198,7 @@ class _ListCellState extends State<_ListCell> {
                 decoration: BoxDecoration(
                   border: Border(
                       top: BorderSide(
-                          color: MediaQuery.of(context).platformBrightness ==
-                                  Brightness.dark
-                              ? Colors.grey[800]!
-                              : Colors.grey[300]!)),
+                          color: Theme.of(context).dividerColor)),
                 ),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -226,10 +214,7 @@ class _ListCellState extends State<_ListCell> {
                               child: Container(
                                 decoration: BoxDecoration(
                                   borderRadius: BorderRadius.circular(8),
-                                  color: Theme.of(context).brightness ==
-                                          Brightness.dark
-                                      ? Colors.grey[700]
-                                      : Colors.grey[300],
+                                  color: Theme.of(context).colorScheme.outline,
                                 ),
                               ),
                             ),

lib/views/url_list_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:qr_flutter/qr_flutter.dart';
 import 'package:shlink_app/API/Classes/ShortURL/short_url.dart';
-import 'package:shlink_app/API/server_manager.dart';
+import 'package:shlink_app/util/build_api_error_snackbar.dart';
 import 'package:shlink_app/views/short_url_edit_view.dart';
 import 'package:shlink_app/views/url_detail_view.dart';
 import 'package:shlink_app/widgets/url_tags_list_widget.dart';
@@ -38,18 +38,9 @@ class _URLListViewState extends State<URLListView> {
       });
       return true;
     }, (r) {
-      var text = "";
-      if (r is RequestFailure) {
-        text = r.description;
-      } else {
-        text = (r as ApiFailure).detail;
-      }
-
-      final snackBar = SnackBar(
-          content: Text(text),
-          backgroundColor: Colors.red[400],
-          behavior: SnackBarBehavior.floating);
-      ScaffoldMessenger.of(context).showSnackBar(snackBar);
+      ScaffoldMessenger.of(context).showSnackBar(
+        buildApiErrorSnackbar(r, context)
+      );
       return false;
     });
   }
@@ -99,7 +90,7 @@ class _URLListViewState extends State<URLListView> {
                                           'Create one by tapping the "+" button below',
                                           style: TextStyle(
                                               fontSize: 16,
-                                              color: Colors.grey[600]),
+                                              color: Theme.of(context).colorScheme.onSecondary),
                                         ),
                                       )
                                     ],
@@ -151,18 +142,11 @@ class _URLListViewState extends State<URLListView> {
                             eyeStyle: QrEyeStyle(
                               eyeShape: QrEyeShape.square,
                               color:
-                                  MediaQuery.of(context).platformBrightness ==
-                                          Brightness.dark
-                                      ? Colors.white
-                                      : Colors.black,
+                                  Theme.of(context).colorScheme.onPrimary,
                             ),
                             dataModuleStyle: QrDataModuleStyle(
                               dataModuleShape: QrDataModuleShape.square,
-                              color:
-                                  MediaQuery.of(context).platformBrightness ==
-                                          Brightness.dark
-                                      ? Colors.white
-                                      : Colors.black,
+                              color: Theme.of(context).colorScheme.onPrimary,
                             ),
                           ))),
                 ),
@@ -209,10 +193,7 @@ class _ShortURLCellState extends State<ShortURLCell> {
               decoration: BoxDecoration(
                 border: Border(
                     bottom: BorderSide(
-                        color: MediaQuery.of(context).platformBrightness ==
-                                Brightness.dark
-                            ? Colors.grey[800]!
-                            : Colors.grey[300]!)),
+                        color: Theme.of(context).dividerColor)),
               ),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -231,7 +212,7 @@ class _ShortURLCellState extends State<ShortURLCell> {
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                           textScaleFactor: 0.9,
-                          style: TextStyle(color: Colors.grey[600]),
+                          style: TextStyle(color: Theme.of(context).colorScheme.onTertiary),
                         ),
                         // List tags in a row
                         UrlTagsListWidget(tags: widget.shortURL.tags)