Add product images.

lib/about_page.dart

@@ -18,34 +18,39 @@ class AboutPage extends ConsumerWidget {
         title: const Text('About Yubico Authenticator'),
       ),
       body: Center(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text('ykman version: ${rpcState.version}'),
-            Text('Dart version: ${Platform.version}'),
-            const SizedBox(height: 8.0),
-            Text('Log level: ${ref.watch(logLevelProvider)}'),
-            Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                TextButton(
-                  onPressed: () {
-                    ref.read(logLevelProvider.notifier).setLevel(Level.INFO);
-                    log.info('Log level changed to INFO');
-                  },
-                  child: const Text('INFO'),
-                ),
-                TextButton(
-                  onPressed: () {
-                    ref.read(logLevelProvider.notifier).setLevel(Level.CONFIG);
-                    log.config('Log level changed to CONFIG');
-                  },
-                  child: const Text('DEBUG'),
-                ),
-              ],
-            ),
-          ],
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text('ykman version: ${rpcState.version}'),
+              Text('Dart version: ${Platform.version}'),
+              const SizedBox(height: 8.0),
+              Text('Log level: ${ref.watch(logLevelProvider)}'),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  TextButton(
+                    onPressed: () {
+                      ref.read(logLevelProvider.notifier).setLevel(Level.INFO);
+                      log.info('Log level changed to INFO');
+                    },
+                    child: const Text('INFO'),
+                  ),
+                  TextButton(
+                    onPressed: () {
+                      ref
+                          .read(logLevelProvider.notifier)
+                          .setLevel(Level.CONFIG);
+                      log.config('Log level changed to CONFIG');
+                    },
+                    child: const Text('DEBUG'),
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
     );

lib/app/views/device_images.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+import '../../management/models.dart';
+import '../models.dart';
+
+const _imagesForName = {
+  'YubiKey 4': 'yk4series',
+  'YubiKey Edge': 'ykedge',
+  'YubiKey Plus': 'ykplus',
+  'YubiKey 5A': 'yk4',
+  'FIDO U2F Security Key': 'sky1',
+  'Security Key by Yubico': 'sky2',
+  'Security Key NFC': 'sky3',
+  'YubiKey NEO': 'neo',
+  'YubiKey Standard': 'standard',
+};
+
+const _imagesForFormFactor = {
+  FormFactor.usbAKeychain: 'yk4',
+  FormFactor.usbANano: 'yk5nano',
+  FormFactor.usbCKeychain: 'yk5c',
+  FormFactor.usbCNano: 'yk5cnano',
+  FormFactor.usbCLightning: 'yk5ci',
+  FormFactor.usbABio: 'ykbioa',
+  FormFactor.usbCBio: 'ykbioc',
+};
+
+const _imagesForFormFactorNfc = {
+  FormFactor.usbAKeychain: 'yk5nfc',
+  FormFactor.usbCKeychain: 'yk5cnfc',
+};
+
+Image getProductImage(DeviceNode device) {
+  var image = _imagesForName[device.name];
+  image ??= device.info.supportedCapabilities.containsKey(Transport.nfc)
+      ? _imagesForFormFactorNfc[device.info.formFactor]
+      : _imagesForFormFactor[device.info.formFactor];
+  image ??= 'yk5series';
+
+  return Image.asset('assets/product-images/$image.png');
+}

lib/app/views/device_picker_dialog.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:yubico_authenticator/app/views/device_images.dart';
 
 import '../../about_page.dart';
 import '../models.dart';
@@ -20,14 +21,17 @@ class DevicePickerDialog extends ConsumerWidget {
           children: [
             Row(
               children: [
-                const CircleAvatar(child: Text('YK')),
+                CircleAvatar(
+                  child: getProductImage(device),
+                  radius: 40.0,
+                ),
                 const SizedBox(width: 16.0),
                 Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(device.name),
-                    Text(
-                        'Version: ${device.info.version} Serial: ${device.info.serial}'),
+                    Text('Version: ${device.info.version}'),
+                    Text('Serial: ${device.info.serial}'),
                   ],
                 ),
               ],
@@ -43,7 +47,7 @@ class DevicePickerDialog extends ConsumerWidget {
       children: [
         if (device != null) _buildDeviceInfo(device),
         ...devices.where((e) => e != device).map((e) => TextButton(
-              child: Text(e.name),
+              child: Text('${e.name} (${e.info.serial})'),
               onPressed: () {
                 ref.read(currentDeviceProvider.notifier).setCurrentDevice(e);
                 Navigator.of(context).pop();

lib/app/views/main_page.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:yubico_authenticator/app/views/device_images.dart';
 
 import 'device_picker_dialog.dart';
 import 'main_drawer.dart';
@@ -32,7 +33,9 @@ class MainPage extends ConsumerWidget {
         title: const Text('Yubico Authenticator'),
         actions: [
           IconButton(
-            icon: const Icon(Icons.info),
+            icon: currentDevice == null
+                ? const Icon(Icons.info)
+                : getProductImage(currentDevice),
             onPressed: () {
               showDialog(
                 context: context,

pubspec.yaml

@@ -73,6 +73,9 @@ flutter:
   # assets:
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/product-images/
+
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.