fixes and ui.dart

flutter/lib/nav_layout.dart

@@ -64,13 +64,13 @@ class _SCNNavLayoutState extends State<SCNNavLayout> {
         showSearch: _selectedIndex == 0 || _selectedIndex == 1,
         showThemeSwitch: true,
       ),
-      body: LazyIndexedStack(
+      body: IndexedStack(
         children: [
-          MessageListPage(),
+          ExcludeFocus(excluding: _selectedIndex != 0, child: MessageListPage()),
-          ChannelRootPage(),
+          ExcludeFocus(excluding: _selectedIndex != 1, child: ChannelRootPage()),
-          AccountRootPage(),
+          ExcludeFocus(excluding: _selectedIndex != 2, child: AccountRootPage()),
-          SettingsRootPage(),
+          ExcludeFocus(excluding: _selectedIndex != 3, child: SettingsRootPage()),
-          SendRootPage(),
+          ExcludeFocus(excluding: _selectedIndex != 4, child: SendRootPage()),
         ],
         index: _selectedIndex,
       ),

flutter/lib/pages/account/account.dart

@@ -11,6 +11,7 @@ import 'package:simplecloudnotifier/state/application_log.dart';
 import 'package:simplecloudnotifier/state/globals.dart';
 import 'package:simplecloudnotifier/state/app_auth.dart';
 import 'package:simplecloudnotifier/utils/toaster.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
 import 'package:uuid/uuid.dart';
 
 class AccountRootPage extends StatefulWidget {
@@ -143,22 +144,23 @@ class _AccountRootPageState extends State<AccountRootPage> {
                 ),
               ),
             const SizedBox(height: 32),
-            FilledButton(
+            UI.button(
-              style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 24), padding: const EdgeInsets.fromLTRB(8, 12, 8, 12)),
+              text: 'Create new account',
               onPressed: () {
                 if (loading) return;
                 _createNewAccount();
               },
-              child: const Text('Create new account'),
+              big: true,
             ),
             const SizedBox(height: 16),
-            FilledButton.tonal(
+            UI.button(
-              style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 24), padding: const EdgeInsets.fromLTRB(8, 12, 8, 12)),
+              text: 'Use existing account',
               onPressed: () {
                 if (loading) return;
                 Navigator.push(context, MaterialPageRoute<AccountLoginPage>(builder: (context) => AccountLoginPage()));
               },
-              child: const Text('Use existing account'),
+              tonal: true,
+              big: true,
             ),
           ],
         ),
@@ -167,11 +169,7 @@ class _AccountRootPageState extends State<AccountRootPage> {
   }
 
   Widget _buildShowAccount(BuildContext context, AppAuth acc, User user) {
-    //TODO better layout
+    return SingleChildScrollView(
-    return Column(
-      children: [
-        SingleChildScrollView(
-          scrollDirection: Axis.vertical,
       child: Padding(
         padding: const EdgeInsets.fromLTRB(8.0, 24.0, 8.0, 8.0),
         child: Column(
@@ -181,14 +179,12 @@ class _AccountRootPageState extends State<AccountRootPage> {
             Text(user.username ?? user.userID, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
             const SizedBox(height: 16),
             ..._buildCards(context, user),
-              ],
+            SizedBox(height: 16),
-            ),
-          ),
-        ),
-        const Expanded(child: SizedBox(height: 16)),
             _buildFooter(context, user),
-        SizedBox(height: 40)
+            SizedBox(height: 40),
           ],
+        ),
+      ),
     );
   }
 
@@ -275,23 +271,15 @@ class _AccountRootPageState extends State<AccountRootPage> {
         Column(
           mainAxisAlignment: MainAxisAlignment.start,
           children: [
-            IconButton(
+            UI.buttonIconOnly(
-              icon: FaIcon(FontAwesomeIcons.pen),
-              iconSize: 18,
-              padding: EdgeInsets.all(4),
-              constraints: BoxConstraints(),
-              style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
               onPressed: () {/*TODO*/},
+              icon: FontAwesomeIcons.pen,
             ),
             const SizedBox(height: 4),
             if (!user.isPro)
-              IconButton(
+              UI.buttonIconOnly(
-                icon: FaIcon(FontAwesomeIcons.cartCircleArrowUp),
-                iconSize: 18,
-                padding: EdgeInsets.all(4),
-                constraints: BoxConstraints(),
-                style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                 onPressed: () {/*TODO*/},
+                icon: FontAwesomeIcons.cartCircleArrowUp,
               ),
           ],
         ),
@@ -301,15 +289,9 @@ class _AccountRootPageState extends State<AccountRootPage> {
 
   List<Widget> _buildCards(BuildContext context, User user) {
     return [
-      Card.filled(
+      UI.buttonCard(
+        context: context,
         margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
-        shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
-        color: Theme.of(context).cardTheme.color,
-        child: InkWell(
-          splashColor: Theme.of(context).splashColor,
-          onTap: () {/*TODO*/},
-          child: Padding(
-            padding: const EdgeInsets.all(16),
         child: Row(
           children: [
             FutureBuilder(
@@ -325,18 +307,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
             Text('Subscriptions', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
           ],
         ),
-          ),
-        ),
-      ),
-      Card.filled(
-        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
-        shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
-        color: Theme.of(context).cardTheme.color,
-        child: InkWell(
-          splashColor: Theme.of(context).splashColor,
         onTap: () {/*TODO*/},
-          child: Padding(
+      ),
-            padding: const EdgeInsets.all(16),
+      UI.buttonCard(
+        context: context,
+        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
         child: Row(
           children: [
             FutureBuilder(
@@ -352,18 +327,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
             Text('Clients', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
           ],
         ),
-          ),
-        ),
-      ),
-      Card.filled(
-        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
-        shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
-        color: Theme.of(context).cardTheme.color,
-        child: InkWell(
-          splashColor: Theme.of(context).splashColor,
         onTap: () {/*TODO*/},
-          child: Padding(
+      ),
-            padding: const EdgeInsets.all(16),
+      UI.buttonCard(
+        context: context,
+        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
         child: Row(
           children: [
             FutureBuilder(
@@ -379,18 +347,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
             Text('Keys', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
           ],
         ),
-          ),
-        ),
-      ),
-      Card.filled(
-        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
-        shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
-        color: Theme.of(context).cardTheme.color,
-        child: InkWell(
-          splashColor: Theme.of(context).splashColor,
         onTap: () {/*TODO*/},
-          child: Padding(
+      ),
-            padding: const EdgeInsets.all(16),
+      UI.buttonCard(
+        context: context,
+        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
         child: Row(
           children: [
             FutureBuilder(
@@ -406,18 +367,11 @@ class _AccountRootPageState extends State<AccountRootPage> {
             Text('Channels', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
           ],
         ),
-          ),
-        ),
-      ),
-      Card.filled(
-        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
-        shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(0)),
-        color: Theme.of(context).cardTheme.color,
-        child: InkWell(
-          splashColor: Theme.of(context).splashColor,
         onTap: () {/*TODO*/},
-          child: Padding(
+      ),
-            padding: const EdgeInsets.all(16),
+      UI.buttonCard(
+        context: context,
+        margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
         child: Row(
           children: [
             Text('${user.messagesSent}', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
@@ -425,8 +379,7 @@ class _AccountRootPageState extends State<AccountRootPage> {
             Text('Messages', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
           ],
         ),
-          ),
+        onTap: () {/*TODO*/},
-        ),
       ),
     ];
   }
@@ -436,9 +389,19 @@ class _AccountRootPageState extends State<AccountRootPage> {
       padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
       child: Row(
         children: [
-          Expanded(child: FilledButton(onPressed: _logout, child: Text('Logout'), style: TextButton.styleFrom(backgroundColor: Colors.orange))),
+          Expanded(
+              child: UI.button(
+            text: 'Logout',
+            onPressed: _logout,
+            color: Colors.orange,
+          )),
           const SizedBox(width: 8),
-          Expanded(child: FilledButton(onPressed: _deleteAccount, child: Text('Delete Account'), style: TextButton.styleFrom(backgroundColor: Colors.red))),
+          Expanded(
+              child: UI.button(
+            text: 'Delete Account',
+            onPressed: _deleteAccount,
+            color: Colors.red,
+          )),
         ],
       ),
     );

flutter/lib/pages/account/login.dart

@@ -9,6 +9,7 @@ import 'package:simplecloudnotifier/state/globals.dart';
 import 'package:simplecloudnotifier/state/app_auth.dart';
 import 'package:simplecloudnotifier/state/token_source.dart';
 import 'package:simplecloudnotifier/utils/toaster.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
 
 class AccountLoginPage extends StatefulWidget {
   const AccountLoginPage({super.key});
@@ -102,10 +103,10 @@ class _AccountLoginPageState extends State<AccountLoginPage> {
                 ),
               ),
               const SizedBox(height: 16),
-              FilledButton(
+              UI.button(
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 24), padding: const EdgeInsets.fromLTRB(8, 12, 8, 12)),
+                text: 'Login',
+                big: true,
                 onPressed: _login,
-                child: const Text('Login'),
               ),
             ],
           ),

flutter/lib/pages/debug/debug_actions.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:simplecloudnotifier/utils/toaster.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
 import 'package:toastification/toastification.dart';
 
 class DebugActionsPage extends StatefulWidget {
@@ -17,36 +18,40 @@ class _DebugActionsPageState extends State<DebugActionsPage> {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
-              FilledButton(
+              UI.button(
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
+                big: false,
                 onPressed: () => Toaster.success("Hello World", "This was a triumph!"),
-                child: const Text('Show Success Notification'),
+                text: 'Show Success Notification',
               ),
-              FilledButton(
+              SizedBox(height: 4),
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
+              UI.button(
+                big: false,
                 onPressed: () => Toaster.info("Hello World", "This was a triumph!"),
-                child: const Text('Show Info Notification'),
+                text: 'Show Info Notification',
               ),
-              FilledButton(
+              SizedBox(height: 4),
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
+              UI.button(
+                big: false,
                 onPressed: () => Toaster.warn("Hello World", "This was a triumph!"),
-                child: const Text('Show Warn Notification'),
+                text: 'Show Warn Notification',
               ),
-              FilledButton(
+              SizedBox(height: 4),
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
+              UI.button(
+                big: false,
                 onPressed: () => Toaster.error("Hello World", "This was a triumph!"),
-                child: const Text('Show Info Notification'),
+                text: 'Show Info Notification',
               ),
-              FilledButton(
+              SizedBox(height: 4),
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
+              UI.button(
+                big: false,
                 onPressed: () => Toaster.simple("Hello World"),
-                child: const Text('Show Simple Notification'),
+                text: 'Show Simple Notification',
               ),
               SizedBox(height: 20),
-              FilledButton(
+              UI.button(
-                style: FilledButton.styleFrom(textStyle: const TextStyle(fontSize: 20)),
+                big: false,
                 onPressed: _sendTokenToServer,
-                child: const Text('Send FCM Token to Server'),
+                text: 'Send FCM Token to Server',
               ),
             ],
           ),

flutter/lib/pages/debug/debug_request_view.dart

@@ -4,6 +4,7 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:simplecloudnotifier/components/layout/scaffold.dart';
 import 'package:simplecloudnotifier/state/request_log.dart';
 import 'package:simplecloudnotifier/utils/toaster.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
 
 class DebugRequestViewPage extends StatelessWidget {
   final SCNRequest request;
@@ -55,17 +56,13 @@ class DebugRequestViewPage extends StatelessWidget {
             Expanded(
               child: Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
             ),
-            IconButton(
+            UI.buttonIconOnly(
-              icon: FaIcon(
-                FontAwesomeIcons.copy,
-              ),
               iconSize: 14,
-              padding: EdgeInsets.fromLTRB(0, 0, 4, 0),
-              constraints: BoxConstraints(),
               onPressed: () {
-                Clipboard.setData(new ClipboardData(text: value));
+                Clipboard.setData(new ClipboardData(text: title));
                 Toaster.info("Clipboard", 'Copied text to Clipboard');
               },
+              icon: FontAwesomeIcons.copy,
             ),
           ],
         ),

flutter/lib/pages/message_list/message_list_item.dart

@@ -5,6 +5,7 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:simplecloudnotifier/models/channel.dart';
 import 'package:simplecloudnotifier/models/message.dart';
 import 'package:intl/intl.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
 
 class MessageListItem extends StatelessWidget {
   static final _dateFormat = DateFormat('yyyy-MM-dd kk:mm');
@@ -102,19 +103,10 @@ class MessageListItem extends StatelessWidget {
                   if (message.priority == 2) SizedBox(width: 4),
                   if (message.priority == 0) FaIcon(FontAwesomeIcons.solidDown, size: 16, color: Colors.lightBlue[900]),
                   if (message.priority == 0) SizedBox(width: 4),
-                  Container(
+                  UI.channelChip(
-                    padding: const EdgeInsets.fromLTRB(4, 0, 4, 0),
+                    context: context,
-                    margin: const EdgeInsets.fromLTRB(0, 0, 4, 0),
+                    text: resolveChannelName(message),
-                    decoration: BoxDecoration(
+                    margin: EdgeInsets.fromLTRB(0, 0, 4, 0),
-                      color: Theme.of(context).hintColor,
-                      borderRadius: BorderRadius.all(Radius.circular(4)),
-                    ),
-                    child: Text(
-                      resolveChannelName(message),
-                      style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).cardColor, fontSize: 12),
-                      overflow: TextOverflow.clip,
-                      maxLines: 1,
-                    ),
                   ),
                   Expanded(child: SizedBox()),
                   Text(

flutter/lib/pages/message_view/message_view.dart

@@ -12,6 +12,7 @@ import 'package:simplecloudnotifier/models/keytoken.dart';
 import 'package:simplecloudnotifier/models/message.dart';
 import 'package:simplecloudnotifier/models/user.dart';
 import 'package:simplecloudnotifier/state/app_auth.dart';
+import 'package:simplecloudnotifier/utils/ui.dart';
 
 class MessageViewPage extends StatefulWidget {
   const MessageViewPage({super.key, required this.message});
@@ -129,19 +130,11 @@ class _MessageViewPageState extends State<MessageViewPage> {
     return [
       Row(
         children: [
-          Container(
+          UI.channelChip(
-            padding: const EdgeInsets.fromLTRB(4, 0, 4, 0),
+            context: context,
+            text: _resolveChannelName(channel, message),
             margin: const EdgeInsets.fromLTRB(0, 0, 4, 0),
-            decoration: BoxDecoration(
+            fontSize: 16,
-              color: Theme.of(context).hintColor,
-              borderRadius: BorderRadius.all(Radius.circular(4)),
-            ),
-            child: Text(
-              _resolveChannelName(channel, message),
-              style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).cardColor, fontSize: 16),
-              overflow: TextOverflow.clip,
-              maxLines: 1,
-            ),
           ),
           Expanded(child: SizedBox()),
           Text(_dateFormat.format(DateTime.parse(message.timestamp)), style: const TextStyle(fontSize: 14)),
@@ -157,29 +150,18 @@ class _MessageViewPageState extends State<MessageViewPage> {
       Row(
         children: [
           Expanded(child: SizedBox()),
-          IconButton(
+          UI.buttonIconOnly(
-            icon: FaIcon(FontAwesomeIcons.copy),
-            iconSize: 18,
-            padding: EdgeInsets.all(4),
-            constraints: BoxConstraints(),
-            style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
             onPressed: () {/*TODO*/},
+            icon: FontAwesomeIcons.copy,
           ),
-          IconButton(
+          UI.buttonIconOnly(
-            icon: FaIcon(FontAwesomeIcons.lineColumns),
+            icon: FontAwesomeIcons.lineColumns,
-            iconSize: 18,
-            padding: EdgeInsets.all(4),
-            constraints: BoxConstraints(),
-            style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
             onPressed: () {/*TODO*/},
           ),
         ],
       ),
-      Container(
+      UI.box(
-        decoration: BoxDecoration(
+        context: context,
-          border: Border.all(color: Theme.of(context).hintColor),
-          borderRadius: BorderRadius.circular(4),
-        ),
         padding: const EdgeInsets.all(4),
         child: Text(message.content ?? ''),
       ),
@@ -187,12 +169,9 @@ class _MessageViewPageState extends State<MessageViewPage> {
   }
 
   Widget _buildMetaCard(BuildContext context, IconData icn, String title, List<String> values, void Function()? action) {
-    final container = Container(
+    final container = UI.box(
+      context: context,
       padding: EdgeInsets.fromLTRB(16, 2, 4, 2),
-      decoration: BoxDecoration(
-        border: Border.all(color: Theme.of(context).hintColor),
-        borderRadius: BorderRadius.circular(4),
-      ),
       child: Row(
         children: [
           FaIcon(icn, size: 18),

flutter/lib/utils/navi.dart

@@ -0,0 +1 @@
+class Navi {}

flutter/lib/utils/ui.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+
+class UI {
+  static const double DefaultBorderRadius = 4;
+
+  static Widget button({required String text, required void Function() onPressed, bool big = false, Color? color = null, bool tonal = false, IconData? icon = null}) {
+    final double fontSize = big ? 24 : 14;
+    final padding = big ? EdgeInsets.fromLTRB(8, 12, 8, 12) : null;
+
+    final style = FilledButton.styleFrom(
+      textStyle: TextStyle(fontSize: fontSize),
+      padding: padding,
+      backgroundColor: color,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(DefaultBorderRadius)),
+    );
+
+    if (tonal) {
+      if (icon != null) {
+        return FilledButton.tonalIcon(
+          style: style,
+          onPressed: onPressed,
+          icon: Icon(icon),
+          label: Text(text),
+        );
+      } else {
+        return FilledButton.tonal(
+          style: style,
+          onPressed: onPressed,
+          child: Text(text),
+        );
+      }
+    } else {
+      if (icon != null) {
+        return FilledButton.icon(
+          style: style,
+          onPressed: onPressed,
+          icon: Icon(icon),
+          label: Text(text),
+        );
+      } else {
+        return FilledButton(
+          style: style,
+          onPressed: onPressed,
+          child: Text(text),
+        );
+      }
+    }
+  }
+
+  static Widget buttonIconOnly({
+    required void Function() onPressed,
+    required IconData icon,
+    double? iconSize = null,
+  }) {
+    return IconButton(
+      icon: FaIcon(icon),
+      iconSize: iconSize ?? 18,
+      padding: EdgeInsets.all(4),
+      constraints: BoxConstraints(),
+      style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
+      onPressed: onPressed,
+    );
+  }
+
+  static Widget buttonCard({required BuildContext context, required Widget child, required void Function() onTap, EdgeInsets? margin = null}) {
+    return Card.filled(
+      margin: margin,
+      shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(DefaultBorderRadius)),
+      color: Theme.of(context).cardTheme.color,
+      child: InkWell(
+        splashColor: Theme.of(context).splashColor,
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: child,
+        ),
+      ),
+    );
+  }
+
+  static Widget channelChip({required BuildContext context, required String text, EdgeInsets? margin = null, double fontSize = 12}) {
+    return Container(
+      padding: const EdgeInsets.fromLTRB(4, 0, 4, 0),
+      margin: margin,
+      decoration: BoxDecoration(
+        color: Theme.of(context).hintColor,
+        borderRadius: BorderRadius.all(Radius.circular(DefaultBorderRadius)),
+      ),
+      child: Text(
+        text,
+        style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).cardColor, fontSize: fontSize),
+        overflow: TextOverflow.clip,
+        maxLines: 1,
+      ),
+    );
+  }
+
+  static Widget box({required BuildContext context, required Widget child, required EdgeInsets? padding}) {
+    return Container(
+      padding: padding ?? EdgeInsets.all(4),
+      decoration: BoxDecoration(
+        border: Border.all(color: Theme.of(context).hintColor),
+        borderRadius: BorderRadius.circular(DefaultBorderRadius),
+      ),
+      child: child,
+    );
+  }
+}