Tablet UI (#82)

* upgrade flutter 3.24

* - Remove:
 - remoteStatUIProvider
 - statDrawer from DefaultRemoteConfig
 - all related UI options to the new UI stats

* - home UI for tablet

* - detail screen horizontal tablet UI

* tablet utils to check horizontal size
grid has a static extent of 192 and spacing of 8

* listen changes stats in provider

* change style of background in stat panel
change systemNavigationBarColor to match app bar

* empty game list widget

* new assets

* revert grid to MaxCrossAxisExtent

* add new messages and icons

* update version

* - update amiibos ids
- update version in yaml

Author: EdwynZN

.github/workflows/qa.yaml

@@ -9,7 +9,7 @@ on:
 env:
   java_version: '17'
   ruby_version: '2.7.2'
-  flutter_version: '3.22.3'
+  flutter_version: '3.24.0'
 
 jobs:
   android-QA:

.github/workflows/release.yaml

@@ -10,7 +10,7 @@ on:
 env:
   java_version: '17'
   ruby_version: '2.7.2'
-  flutter_version: '3.22.3'
+  flutter_version: '3.24.0'
 
 jobs:
   android-internal:

assets/databases/amiibos.json

@@ -11609,7 +11609,7 @@
     },
     {
       "key": 854,
-      "id": null,
+      "id": "0801000004360402",
       "amiiboSeries": "Splatoon",
       "character": "Callie",
       "gameSeries": "Splatoon",
@@ -11622,7 +11622,7 @@
     },
     {
       "key": 855,
-      "id": null,
+      "id": "0802000004370402",
       "amiiboSeries": "Splatoon",
       "character": " Marie",
       "gameSeries": "Splatoon",
@@ -11635,7 +11635,7 @@
     },
     {
       "key": 856,
-      "id": null,
+      "id": "0803000004380402",
       "amiiboSeries": "Splatoon",
       "character": "Pearl",
       "gameSeries": "Splatoon",
@@ -11648,7 +11648,7 @@
     },
     {
       "key": 857,
-      "id": null,
+      "id": "0804000004390402",
       "amiiboSeries": "Splatoon",
       "character": "Marina",
       "gameSeries": "Splatoon",
@@ -11660,5 +11660,5 @@
       "type": "Figure"
     }
   ],
-  "lastUpdated": "2024-08-02T10:00:00.000"
+  "lastUpdated": "2024-09-05T10:00:00.000"
 }

assets/game_icons/2.0x/nintendo-switch.webp

@@ -1,4 +1,3 @@
 class RemoteKey {
-  static const String statDrawer = 'stat_drawer';
   static const String ownedCategories = 'split_own_categories';
 }

assets/game_icons/2.0x/pacman-ghost.webp

@@ -7,7 +7,6 @@ part 'default_remote_config.g.dart';
 @freezed
 class DefaultRemoteConfig with _$DefaultRemoteConfig {
   const factory DefaultRemoteConfig({
-    @Default(false) @JsonKey(name: RemoteKey.statDrawer) bool statDrawer, 
     @Default(false) @JsonKey(name: RemoteKey.ownedCategories) bool ownedCategories, 
   }) = _DefaultRemoteConfig;
 

assets/game_icons/2.0x/pacman.webp

@@ -101,5 +101,6 @@
   "showGrid": "Grid",
   "hide_caution": "Caution, disabling a feature will hide it from all aspects of the app",
   "export_complete": "Export completed!",
-  "select_user_attribute": "Select a category"
+  "select_user_attribute": "Select a category",
+  "emptyMessageType": "{choice, select, pokemon {Gotta collect 'em all} pokeball {Gotta collect 'em all} mario {Your collection is in another castle} mushroom {1UP Collection this way} pacman {Hungry for amiibos} pacmanGhost {Hungry for amiibos?} link {Hyaaa!! (No amiibos here)} other {Nothing to see here. . .yet}}"
 }

assets/game_icons/2.0x/pokeball.webp

@@ -101,5 +101,6 @@
   "showGrid": "Cuadrícula",
   "hide_caution": "Precaución, deshabilitar una funcionalidad la escondera en toda la app",
   "export_complete": "Archivo guardado",
-  "select_user_attribute": "Seleccione una categoría"
+  "select_user_attribute": "Seleccione una categoría",
+  "emptyMessageType": "{choice, select, pokemon {Tengo que atraparlos!} pokeball {Tengo que atraparlos!} mario {Lo lamento, pero tu colección parece estar en otro castillo} mushroom {1 colección extra aquí} pacman {Habmre por amiibos} pacmanGhost {¿Hambre por amiibos?} link {Hyaaa!! (No hay amiibos aquí)} other {No hay nada que mostrar . . . aún}}"
 }

assets/game_icons/2.0x/pokemon.webp

@@ -101,5 +101,6 @@
   "showGrid": "Grille",
   "hide_caution": "Attention, la désactivation d'une caractéristique la masquera dans l'ensemble de l'application",
   "export_complete": "Exportation terminée",
-  "select_user_attribute": "Choisir une catégorie"
+  "select_user_attribute": "Choisir une catégorie",
+  "emptyMessageType": "{choice, select, other {Rien à voir ici ... encore}}"
 }

assets/game_icons/2.0x/super-mario.webp

@@ -1450,7 +1450,16 @@ class AmiiboTheme3 implements AmiiboTheme {
           statusBarBrightness: inverseBrightness,
           statusBarIconBrightness: inverseBrightness,
           systemNavigationBarIconBrightness: inverseBrightness,
-          systemNavigationBarColor: scheme.surface,
+          systemNavigationBarColor: ElevationOverlay.applySurfaceTint(
+            scheme.surface,
+            scheme.surfaceTint,
+            2.0,
+          ),
+          systemNavigationBarDividerColor: ElevationOverlay.applySurfaceTint(
+            scheme.surface,
+            scheme.surfaceTint,
+            6.0,
+          ),
           systemStatusBarContrastEnforced: false,
           statusBarColor: Colors.transparent,
         ),
@@ -1503,7 +1512,6 @@ class AmiiboTheme3 implements AmiiboTheme {
 
       /// Deprecated in the future
       brightness: scheme.brightness,
-      buttonBarTheme: const ButtonBarThemeData(),
       buttonTheme: ButtonThemeData(
         // Deprecated: Used in old RaisedButton/FlatButton
         textTheme: ButtonTextTheme.normal,

assets/game_icons/2.0x/super_mario_toad.webp

@@ -0,0 +1,15 @@
+part of 'resources.dart';
+
+class GameIcons {
+  GameIcons._();
+
+  static const String nintendoSwitch = 'assets/game_icons/nintendo-switch.webp';
+  static const String pacmanGhost = 'assets/game_icons/pacman-ghost.webp';
+  static const String pacman = 'assets/game_icons/pacman.webp';
+  static const String pokeball = 'assets/game_icons/pokeball.webp';
+  static const String pokemon = 'assets/game_icons/pokemon.webp';
+  static const String superMario = 'assets/game_icons/super-mario.webp';
+  static const String superMarioToad =
+      'assets/game_icons/super_mario_toad.webp';
+  static const String tlozSword = 'assets/game_icons/tloz_sword.webp';
+}

assets/game_icons/2.0x/tloz_sword.webp

@@ -1 +1,3 @@
 part 'assets_icons.dart';
+
+part 'game_assets_icons.dart';

assets/game_icons/3.0x/nintendo-switch.webp

@@ -2,10 +2,6 @@ import 'package:amiibo_network/data/remote_config/constants/remote_constant_key.
 import 'package:firebase_remote_config/firebase_remote_config.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
-final remoteStatUIProvider = Provider<bool>(
-  (_) => FirebaseRemoteConfig.instance.getBool(RemoteKey.statDrawer),
-);
-
 final remoteOwnedCategoryProvider = Provider<bool>(
   (_) => FirebaseRemoteConfig.instance.getBool(RemoteKey.ownedCategories),
 );

assets/game_icons/3.0x/pacman-ghost.webp

@@ -0,0 +1,49 @@
+import 'dart:async';
+
+import 'package:amiibo_network/model/search_result.dart';
+import 'package:amiibo_network/model/stat.dart';
+import 'package:amiibo_network/riverpod/query_provider.dart';
+import 'package:amiibo_network/riverpod/service_provider.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+final statsProvider = StreamProvider.autoDispose<List<Stat>>((ref) async* {
+  final service = ref.watch(serviceProvider.notifier);
+  final streamController = StreamController<Filter>();
+
+  void listen() {
+    streamController.sink.add(ref.read(filterProvider));
+  }
+
+  service.addListener(listen);
+
+  final subscription = ref.listen(
+    filterProvider,
+    (previous, next) {
+      if (next != previous) {
+        streamController.sink.add(next);
+      }
+    },
+    fireImmediately: true,
+  );
+
+  ref.onDispose(() {
+    subscription.close();
+    service.removeListener(listen);
+    streamController.close();
+  });
+
+  yield* streamController.stream.asyncMap((filter) async => <Stat>[
+      ...await service.fetchStats(
+        categoryAttributes: filter.categoryAttributes,
+        searchAttributes: filter.searchAttributes,
+        hiddenCategories: filter.hiddenType,
+      ),
+      ...await service.fetchStats(
+        group: true,
+        categoryAttributes: filter.categoryAttributes,
+        searchAttributes: filter.searchAttributes,
+        hiddenCategories: filter.hiddenType,
+      ),
+    ],
+  );
+});

assets/game_icons/3.0x/pacman.webp

@@ -1,6 +1,7 @@
 import 'package:amiibo_network/resources/resources.dart';
 import 'package:amiibo_network/riverpod/amiibo_provider.dart';
 import 'package:amiibo_network/riverpod/preferences_provider.dart';
+import 'package:amiibo_network/utils/tablet_utils.dart';
 import 'package:amiibo_network/widget/amiibo_button_toggle.dart';
 import 'package:amiibo_network/widget/card_details.dart';
 import 'package:amiibo_network/widget/detail/amiibo_header_card.dart';
@@ -12,8 +13,9 @@ import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 final _nameAmiiboProvider = Provider.autoDispose
-    .family<AsyncValue<String?>, int>((ref, key) =>
-        ref.watch(detailAmiiboProvider(key)).whenData((cb) => cb?.details.name));
+    .family<AsyncValue<String?>, int>((ref, key) => ref
+        .watch(detailAmiiboProvider(key))
+        .whenData((cb) => cb?.details.name));
 
 class DetailPage extends ConsumerWidget {
   const DetailPage({Key? key}) : super(key: key);
@@ -22,17 +24,67 @@ class DetailPage extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final key = ref.watch(keyAmiiboProvider);
     final showOwnerCategories = ref.watch(ownTypesCategoryProvider);
+    final isTablet = isHorizontalTablet(MediaQuery.of(context).size);
+    final Widget body;
+    if (isTablet) {
+      final theme = Theme.of(context);
+      final cardColor = theme.colorScheme.surface;
+      body = Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          SizedBox(
+            width: 400.0,
+            child: Material(
+              elevation: 2.0,
+              color: cardColor,
+              surfaceTintColor: theme.colorScheme.primary,
+              child: Column(
+                children: showOwnerCategories
+                    ? const [
+                        AmiiboCard(),
+                        Gap(12.0),
+                        UserPreferenceCard(),
+                      ]
+                    : const [_AmiiboCard()],
+              ),
+            ),
+          ),
+          const Expanded(
+            child: CustomScrollView(
+              slivers: [GameListWidget()],
+            ),
+          ),
+        ],
+      );
+    } else {
+      body = CustomScrollView(
+        slivers: [
+          if (showOwnerCategories) ...const [
+            SliverToBoxAdapter(child: AmiiboCard()),
+            SliverGap(12.0),
+            PreferencesSliver(),
+            SliverGap(12),
+          ] else
+            SliverToBoxAdapter(child: _AmiiboCard()),
+          const SliverPadding(
+            padding: EdgeInsets.symmetric(vertical: 8.0),
+            sliver: GameListWidget(),
+          ),
+        ],
+      );
+    }
     return Scaffold(
       appBar: AppBar(
         shadowColor: Colors.transparent,
         centerTitle: false,
         titleSpacing: 0.0,
         titleTextStyle: AppBarTheme.of(context).titleTextStyle?.copyWith(
-          fontSize: 22.0,
-          fontWeight: FontWeight.normal,
-          letterSpacing: -0.25,
-          wordSpacing: -0.15,
-        ),
+              fontSize: 22.0,
+              fontWeight: FontWeight.normal,
+              letterSpacing: -0.25,
+              wordSpacing: -0.15,
+            ),
         title: Consumer(
           builder: (context, ref, _) => ref
               .watch(_nameAmiiboProvider(key))
@@ -42,21 +94,7 @@ class DetailPage extends ConsumerWidget {
               ),
         ),
       ),
-      body: CustomScrollView(
-        slivers: [
-          if (showOwnerCategories) ...const [
-            SliverToBoxAdapter(child: AmiiboCard()),
-            SliverGap(12.0),
-            PreferencesSliver(),
-            SliverGap(12),
-          ]
-          else SliverToBoxAdapter(child: _AmiiboCard()),
-          const SliverPadding(
-            padding: EdgeInsets.symmetric(vertical: 8.0),
-            sliver: GameListWidget(),
-          ),
-        ],
-      ),
+      body: body,
     );
   }
 }
@@ -153,9 +191,9 @@ class _AmiiboCard extends ConsumerWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
-            Expanded(flex: 4, child: letf),
+            Expanded(flex: 2, child: letf),
             const VerticalDivider(indent: 0.0, endIndent: 0.0, width: 24.0),
-            const Expanded(flex: 7, child: _AmiiboInfo()),
+            const Expanded(flex: 3, child: _AmiiboInfo()),
           ],
         ),
       ),