Improve app listing

Changes:
- Reduced the border width for the outlined border for non-icon
  having apps to better match the border baked into the icons, and
  switched to using the first letter of the app name instead of a
  question mark icon (i.e. more like the Qt demo).  Having the
  alignment of the buttons exactly match the icons still proves
  illusive, and will be addressed at a later date.
- Added sorting of the app list so it will be stable across reboots.

Bug-AGL: SPEC-4615

Signed-off-by: Scott Murray <scott.murray@konsulko.com>
Change-Id: Iac2431ed63a53a8b4e4f39c59b5d7f64068cb6b5

1 files changed, 14 insertions, 2 deletions

diff --git a/lib/page_apps.dart b/lib/page_apps.dart
index 9ea6c92..c2ab93c 100644
--- a/lib/page_apps.dart
+++ b/lib/page_apps.dart
@@ -23,6 +23,7 @@ class _AppsPageState extends State<AppsPage> {
   @override
   initState() {
     widget.getApps().then((val) => setState(() {
+          val.sort((a, b) => a.name.compareTo(b.name));
           apps = val;
         }));
 
@@ -122,12 +123,23 @@ class _AppsPageEntryState extends State<_AppsPageEntry> {
           style: ElevatedButton.styleFrom(
             shape: CircleBorder(),
             padding: EdgeInsets.all(8),
-            side: BorderSide(width: 4, color: iconColor),
+            side: BorderSide(width: 3, color: iconColor),
           ),
           onPressed: () {
             widget.appSelected(widget.id);
           },
-          child: Icon(Icons.question_mark, color: iconColor, size: 160.0));
+          child: SizedBox(
+              height: 160,
+              width: 160,
+              child: Center(
+                  child: Text(widget.label.toUpperCase().substring(0, 1),
+                      style: TextStyle(
+                        fontSize: 100,
+                        foreground: Paint()
+                          ..style = PaintingStyle.stroke
+                          ..strokeWidth = 3
+                          ..color = iconColor,
+                      )))));
     }
   }