Font/Layout UI improvements (#3)

* added next,last, and enter to target screen. * spaced widgets more evenly for cues * updated font sizes * centered color wheel
bgoldstone · Apr 1, 2024 · 75fef9d · 75fef9d
1 parent 02e1b4b
commit 75fef9d
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 92 deletions.
diff --git a/lib/pages/controls/color.dart b/lib/pages/controls/color.dart
@@ -29,7 +29,7 @@ class _ColorControlState extends State<ColorControl> {
             .toColor()
         : Colors.white;
     return Scaffold(
-      body: Column(children: [
+      body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
         ColorPicker(
           pickerColor: currentColor ?? colorFromEos,
           onColorChanged: (newColor) {

diff --git a/lib/pages/cues.dart b/lib/pages/cues.dart
@@ -37,51 +37,76 @@ class _CuesState extends State<Cues> {
   @override
   Widget build(BuildContext context) {
     return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        Center(child: Text('Cue List: ${widget.currentCueList}')),
-        Card(
-          child: ListTile(
-            title: const Text('Current Cue'),
-            subtitle: Text(widget.currentCueText),
-            onLongPress: () {
-              editLabel(context, widget.nextCue);
-            },
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Center(
+              child: Text(
+            'Cue List: ${widget.currentCueList}',
+            style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+          )),
+        ),
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Card(
+            child: ListTile(
+              title: const Text('Current Cue'),
+              subtitle: Text(widget.currentCueText),
+              onLongPress: () {
+                editLabel(context, widget.nextCue);
+              },
+            ),
           ),
         ),
-        Card(
-          child: ListTile(
-            title: const Text('Next Cue'),
-            subtitle: Text(widget.nextCueText),
-            onLongPress: () {
-              editLabel(context, widget.nextCue);
-            },
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Card(
+            child: ListTile(
+              title: const Text('Next Cue'),
+              subtitle: Text(widget.nextCueText),
+              onLongPress: () {
+                editLabel(context, widget.nextCue);
+              },
+            ),
           ),
         ),
-        Card(
-          child: ListTile(
-            title: const Text('Previous Cue'),
-            subtitle: Text(widget.previousCueText),
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Card(
+            child: ListTile(
+                title: const Text('Previous Cue'),
+                subtitle: Text(widget.previousCueText),
+                onLongPress: () {
+                  editLabel(context, widget.previousCue);
+                }),
           ),
         ),
         Wrap(
           alignment: WrapAlignment.spaceAround,
           children: [
-            ElevatedButton(
-                onPressed: () => widget.osc.sendKey('stop'),
-                onLongPress: () {
-                  editLabel(context, widget.previousCue);
-                },
-                style: const ButtonStyle(
-                    foregroundColor:
-                        MaterialStatePropertyAll<Color>(Colors.red)),
-                child: const Text('Stop/Back')),
-            ElevatedButton(
-                onPressed: () => widget.osc.sendKey('go_0'),
-                style: const ButtonStyle(
-                    foregroundColor:
-                        MaterialStatePropertyAll<Color>(Colors.green)),
-                child: const Text('Go')),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: ElevatedButton(
+                  onPressed: () => widget.osc.sendKey('stop'),
+                  onLongPress: () {
+                    editLabel(context, widget.previousCue);
+                  },
+                  style: const ButtonStyle(
+                      foregroundColor:
+                          MaterialStatePropertyAll<Color>(Colors.red)),
+                  child: const Text('Stop/Back')),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: ElevatedButton(
+                  onPressed: () => widget.osc.sendKey('go_0'),
+                  style: const ButtonStyle(
+                      foregroundColor:
+                          MaterialStatePropertyAll<Color>(Colors.green)),
+                  child: const Text('Go')),
+            ),
           ],
         ),
       ],

diff --git a/lib/pages/facepanels/additional_keys.dart b/lib/pages/facepanels/additional_keys.dart
@@ -12,40 +12,40 @@ class AdditionalKeys extends StatelessWidget {
     List<Button> additionalKeys = [
       Button('Mark', () {
         osc.sendKey('mark');
-      }),
+      }, fontSize: 30),
       Button('Sneak', () {
         osc.sendKey('sneak');
-      }),
+      }, fontSize: 30),
       Button('Rem Dim', () {
         osc.sendKey('rem_dim');
-      }),
+      }, fontSize: 30),
       Button('Select Manual', () {
         osc.sendKey('select_manual');
-      }),
+      }, fontSize: 30),
       Button('Select Last', () {
         osc.sendKey('select_last');
-      }),
+      }, fontSize: 30),
       Button('Select Active', () {
         osc.sendKey('select_active');
-      }),
+      }, fontSize: 30),
       Button('Home', () {
         osc.sendKey('home');
-      }),
+      }, fontSize: 30),
       Button('Level', () {
         osc.sendKey('level');
-      }),
+      }, fontSize: 30),
       Button('Time', () {
         osc.sendKey('time');
-      }),
+      }, fontSize: 30),
       Button('Live', () {
         osc.sendKey('live');
-      }),
+      }, fontSize: 30),
       Button('Blind', () {
         osc.sendKey('blind');
-      }),
+      }, fontSize: 30),
       Button('Undo', () {
         osc.sendKey('undo');
-      }),
+      }, fontSize: 30),
     ];
     return Grid(3, additionalKeys, 1.8);
   }

diff --git a/lib/pages/facepanels/keypad.dart b/lib/pages/facepanels/keypad.dart
@@ -12,22 +12,22 @@ class Keypad extends StatelessWidget {
     List<Button> keypad = [
       Button('Go To Cue', () {
         osc.sendKey('go_to_cue');
-      }, fontSize: 13),
+      }, fontSize: 17.4),
       Button('Addr', () {
         osc.sendKey('address');
-      }, fontSize: 15),
+      }, fontSize: 20),
       Button('Last', () {
         osc.sendKey('last');
-      }, fontSize: 18),
+      }, fontSize: 20),
       Button('Next', () {
         osc.sendKey('next');
-      }, fontSize: 17),
+      }, fontSize: 20),
       Button('+', () {
         osc.sendKey('plus');
       }, fontSize: 30),
       Button('Thru', () {
         osc.sendKey('thru');
-      }, fontSize: 16),
+      }, fontSize: 20),
       Button('-', () {
         osc.sendKey('-');
       }, fontSize: 30),
@@ -102,26 +102,18 @@ class Keypad extends StatelessWidget {
       Button('At', () {
         osc.sendKey('at');
       }),
-      Button(
-        'Clear',
-        () {
-          osc.sendKey('clear_cmd');
-        },
-        fontSize: 15,
-      ),
-      Button(
-        '0',
-        () {
-          osc.sendKey('0');
-        },
-        fontSize: 30,
-      ),
+      Button('Clear', () {
+        osc.sendKey('clear_cmd');
+      }, fontSize: 18.5),
+      Button('0', () {
+        osc.sendKey('0');
+      }, fontSize: 30),
       Button('.', () {
         osc.sendKey('.');
       }, fontSize: 30),
       Button('Enter', () {
         osc.sendKey('enter');
-      }, fontSize: 15),
+      }, fontSize: 18.5),
     ];
     return Grid(4, keypad, 2);
   }

diff --git a/lib/pages/facepanels/targets.dart b/lib/pages/facepanels/targets.dart
@@ -12,42 +12,75 @@ class Target extends StatelessWidget {
   Widget build(BuildContext context) {
     List<Button> targets = [
       Button('Part', () {
-        osc.sendKey('part', );
-      }),
+        osc.sendKey(
+          'part',
+        );
+      }, fontSize: 30),
       Button('Cue', () {
-        osc.sendKey('cue', );
-      }),
+        osc.sendKey(
+          'cue',
+        );
+      }, fontSize: 30),
       Button('Record', () {
-        osc.sendKey('record', );
-      }),
+        osc.sendKey(
+          'record',
+        );
+      }, fontSize: 27),
       Button('Preset', () {
-        osc.sendKey('preset', );
-      }),
+        osc.sendKey(
+          'preset',
+        );
+      }, fontSize: 30),
       Button('Sub', () {
-        osc.sendKey('sub', );
-      }),
+        osc.sendKey(
+          'sub',
+        );
+      }, fontSize: 30),
       Button('Delay', () {
-        osc.sendKey('delay', );
-      }),
+        osc.sendKey(
+          'delay',
+        );
+      }, fontSize: 30),
       Button('Delete', () {
-        osc.sendKey('delete', );
-      }),
+        osc.sendKey(
+          'delete',
+        );
+      }, fontSize: 30),
       Button('Copy To', () {
-        osc.sendKey('copy_to', );
-      }),
+        osc.sendKey(
+          'copy_to',
+        );
+      }, fontSize: 30),
       Button('Recall From', () {
-        osc.sendKey('recall_from', );
-      }),
+        osc.sendKey(
+          'recall_from',
+        );
+      }, fontSize: 30),
       Button('Update', () {
-        osc.sendKey('update', );
-      }),
+        osc.sendKey(
+          'update',
+        );
+      }, fontSize: 27),
       Button('Q-Only/Track', () {
-        osc.sendKey('cueonlytrack', );
-      }),
+        osc.sendKey(
+          'cueonlytrack',
+        );
+      }, fontSize: 25),
       Button('Save', () {
-        osc.sendKey('save', );
-      }),
+        osc.sendKey(
+          'save',
+        );
+      }, fontSize: 30),
+      Button('Last', () {
+        osc.sendKey('last');
+      }, fontSize: 30),
+      Button('Next', () {
+        osc.sendKey('next');
+      }, fontSize: 30),
+      Button('Enter', () {
+        osc.sendKey('enter');
+      }, fontSize: 30),
     ];
-    return Grid(3, targets, 1.8);
+    return Grid(3, targets, 2.22);
   }
 }