feat: experimentally add fluent ui

tuihub · Oct 21, 2024 · fefd720 · fefd720
1 parent 11abe4c
commit fefd720
Show file tree

Hide file tree

Showing 25 changed files with 249 additions and 44 deletions.
diff --git a/lib/bloc/client_setting/client_setting_bloc.dart b/lib/bloc/client_setting/client_setting_bloc.dart
@@ -51,5 +51,9 @@ class ClientSettingBloc extends Bloc<ClientSettingEvent, ClientSettingState> {
       await _repo.set(common.copyWith(useSystemProxy: event.useSystemProxy));
       emit(state.copyWith(useSystemProxy: event.useSystemProxy));
     });
+
+    on<ChangeUseFluentUIEvent>((event, emit) async {
+      emit(state.copyWith(useFluentUI: event.useFluentUI));
+    });
   }
 }
diff --git a/lib/bloc/client_setting/client_setting_event.dart b/lib/bloc/client_setting/client_setting_event.dart
@@ -24,3 +24,9 @@ class ChangeUseSystemProxyEvent extends ClientSettingEvent {
 
   ChangeUseSystemProxyEvent(this.useSystemProxy);
 }
+
+class ChangeUseFluentUIEvent extends ClientSettingEvent {
+  final bool useFluentUI;
+
+  ChangeUseFluentUIEvent(this.useFluentUI);
+}
diff --git a/lib/bloc/client_setting/client_setting_state.dart b/lib/bloc/client_setting/client_setting_state.dart
@@ -4,22 +4,26 @@ class ClientSettingState {
   final ThemeMode themeMode;
   final AppTheme theme;
   final bool? useSystemProxy;
+  final bool? useFluentUI;
 
   const ClientSettingState(
     this.themeMode,
     this.theme, {
     this.useSystemProxy,
+    this.useFluentUI,
   });
 
   ClientSettingState copyWith({
     ThemeMode? themeMode,
     AppTheme? theme,
     bool? useSystemProxy,
+    bool? useFluentUI,
   }) {
     return ClientSettingState(
       themeMode ?? this.themeMode,
       theme ?? this.theme,
       useSystemProxy: useSystemProxy ?? this.useSystemProxy,
+      useFluentUI: useFluentUI ?? this.useFluentUI,
     );
   }
 }

diff --git a/lib/main.dart b/lib/main.dart
@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:chinese_font_library/chinese_font_library.dart';
 import 'package:flex_color_scheme/flex_color_scheme.dart';
+import 'package:fluent_ui/fluent_ui.dart' as fluent;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -209,19 +210,37 @@ class _MyAppWidget extends StatelessWidget {
               swapLegacyOnMaterial3: true,
             ));
 
-        return MaterialApp.router(
-          onGenerateTitle: (context) => S.of(context).title,
-          localizationsDelegates: const [
-            S.delegate,
-            GlobalMaterialLocalizations.delegate,
-            GlobalWidgetsLocalizations.delegate,
-            GlobalCupertinoLocalizations.delegate,
-          ],
-          supportedLocales: S.delegate.supportedLocales,
-          theme: lightTheme,
-          darkTheme: darkTheme,
-          themeMode: state.themeMode,
-          routerConfig: router,
+        late fluent.FluentThemeData fluentTheme;
+        switch (state.themeMode) {
+          case ThemeMode.light:
+            fluentTheme = fluent.FluentThemeData.light();
+          case ThemeMode.dark:
+            fluentTheme = fluent.FluentThemeData.dark();
+          case ThemeMode.system:
+            switch (MediaQuery.of(context).platformBrightness) {
+              case Brightness.light:
+                fluentTheme = fluent.FluentThemeData.light();
+              case Brightness.dark:
+                fluentTheme = fluent.FluentThemeData.dark();
+            }
+        }
+
+        return fluent.FluentTheme(
+          data: fluentTheme,
+          child: MaterialApp.router(
+            onGenerateTitle: (context) => S.of(context).title,
+            localizationsDelegates: const [
+              S.delegate,
+              GlobalMaterialLocalizations.delegate,
+              GlobalWidgetsLocalizations.delegate,
+              GlobalCupertinoLocalizations.delegate,
+            ],
+            supportedLocales: S.delegate.supportedLocales,
+            theme: lightTheme,
+            darkTheme: darkTheme,
+            themeMode: state.themeMode,
+            routerConfig: router,
+          ),
         );
       },
     );

diff --git a/lib/view/form/form_field.dart → lib/view/components/form_field.dart b/lib/view/form/form_field.dart → lib/view/components/form_field.dart
diff --git a/lib/view/form/input_formatters.dart → lib/view/components/input_formatters.dart b/lib/view/form/input_formatters.dart → lib/view/components/input_formatters.dart
diff --git a/lib/view/pages/gebura/gebura_app_launcher_setting_dialog.dart b/lib/view/pages/gebura/gebura_app_launcher_setting_dialog.dart
@@ -4,9 +4,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../../bloc/gebura/gebura_bloc.dart';
 import '../../../model/gebura_model.dart';
+import '../../components/form_field.dart';
+import '../../components/input_formatters.dart';
 import '../../components/toast.dart';
-import '../../form/form_field.dart';
-import '../../form/input_formatters.dart';
 import '../../layout/bootstrap_container.dart';
 
 class GeburaAppLauncherSettingDialog extends StatefulWidget {

diff --git a/lib/view/pages/gebura/gebura_library_detail.dart b/lib/view/pages/gebura/gebura_library_detail.dart
@@ -21,6 +21,7 @@ import '../../components/toast.dart';
 import '../../helper/spacing.dart';
 import '../../layout/bootstrap_container.dart';
 import '../../specialized/backdrop_blur.dart';
+import '../../universal/list.dart';
 import 'gebura_app_launcher_setting_dialog.dart';
 import 'gebura_common.dart';
 
@@ -282,7 +283,7 @@ class _GeburaLibraryDetailInstList extends StatelessWidget {
         }
       });
     }
-    return ListTile(
+    return UniversalListTile(
       leading: _activeRadio(context, inst, triggerActivation),
       title: const Text('由Steam管理'),
       subtitle: steamApp != null
@@ -309,7 +310,7 @@ class _GeburaLibraryDetailInstList extends StatelessWidget {
   Widget _localItem(
       BuildContext context, LocalTrackedAppInst inst, bool triggerActivation) {
     final settings = inst.commonLaunchSetting;
-    return ListTile(
+    return UniversalListTile(
       leading: _activeRadio(context, inst, triggerActivation),
       title: Text(inst.name ?? '未知应用'),
       subtitle: settings != null

diff --git a/lib/view/pages/gebura/gebura_library_overview.dart b/lib/view/pages/gebura/gebura_library_overview.dart
@@ -7,6 +7,7 @@ import '../../../l10n/l10n.dart';
 import '../../../model/gebura_model.dart';
 import '../../../route.dart';
 import '../../helper/url.dart';
+import '../../universal/button.dart';
 import 'gebura_common.dart';
 
 class GeburaLibraryOverview extends StatelessWidget {
@@ -45,7 +46,7 @@ class GeburaLibraryOverview extends StatelessWidget {
                         children: [
                           Text(S.of(context).noAppInLibrary),
                           const SizedBox(height: 12),
-                          OutlinedButton(
+                          UniversalOutlinedButton(
                             onPressed: () {
                               const GeburaLibrarySettingsRoute().go(context);
                             },

diff --git a/lib/view/pages/gebura/gebura_library_settings.dart b/lib/view/pages/gebura/gebura_library_settings.dart
@@ -21,12 +21,14 @@ import '../../../common/app_scan/model.dart';
 import '../../../common/steam/steam.dart';
 import '../../../l10n/l10n.dart';
 import '../../../route.dart';
+import '../../components/form_field.dart';
 import '../../components/pop_alert.dart';
-import '../../form/form_field.dart';
 import '../../helper/app_bar.dart';
 import '../../helper/spacing.dart';
 import '../../layout/bootstrap_container.dart';
 import '../../layout/card_list_page.dart';
+import '../../universal/button.dart';
+import '../../universal/list.dart';
 import '../frame_page.dart';
 
 part 'gebura_library_settings_common.dart';
@@ -46,7 +48,7 @@ class GeburaLibrarySettings extends StatelessWidget {
       untracked,
     ) = state.analyzeCommonAppInsts(folder);
 
-    return ListTile(
+    return UniversalListTile(
       leading: const Icon(FontAwesomeIcons.folder),
       title: Text(folder),
       subtitle: Text(
@@ -104,7 +106,7 @@ class GeburaLibrarySettings extends StatelessWidget {
       untracked,
     ) = state.analyzeSteamAppInsts(folder);
 
-    return ListTile(
+    return UniversalListTile(
       leading: const Icon(FontAwesomeIcons.steam),
       title: Text(folder),
       subtitle: Text(

diff --git a/lib/view/pages/gebura/gebura_library_settings_common.dart b/lib/view/pages/gebura/gebura_library_settings_common.dart
@@ -18,7 +18,7 @@ class GeburaCommonAppScanResultPanel extends StatelessWidget {
           shape: AppBarHelper.defaultShape,
           leading: AppBarHelper.defaultRightLeading(context),
           actions: [
-            OutlinedButton.icon(
+            UniversalOutlinedButton.icon(
               onPressed: () {
                 context.read<GeburaBloc>().add(GeburaScanLocalLibraryEvent(
                       refreshSteam: false,
@@ -121,7 +121,7 @@ class _CommonGameListState extends State<_CommonGameList> {
         DataCell(
           Align(
               alignment: Alignment.centerRight,
-              child: OutlinedButton.icon(
+              child: UniversalOutlinedButton.icon(
                 onPressed: () async {
                   await OpenFile.open(app.installPath);
                 },
@@ -862,7 +862,7 @@ class _CommonAppFolderScanSettingPageState
                               )
                               .toList();
                         }
-                        return ListTile(
+                        return UniversalListTile(
                           leading: Icon(
                             _entryTypeIcon(node.data?.type ??
                                 CommonAppFolderScanEntryType.unknown),
@@ -895,10 +895,6 @@ class _CommonAppFolderScanSettingPageState
                                 ),
                             ],
                           ),
-                          visualDensity: const VisualDensity(
-                            horizontal: VisualDensity.minimumDensity,
-                            vertical: VisualDensity.minimumDensity,
-                          ),
                         );
                       },
                     ),

diff --git a/lib/view/pages/gebura/gebura_library_settings_steam.dart b/lib/view/pages/gebura/gebura_library_settings_steam.dart
@@ -18,10 +18,10 @@ class GeburaSteamAppScanResultPanel extends StatelessWidget {
           shape: AppBarHelper.defaultShape,
           leading: AppBarHelper.defaultRightLeading(context),
           actions: [
-            OutlinedButton.icon(
+            UniversalOutlinedButton.icon(
               onPressed: () {
                 context.read<GeburaBloc>().add(GeburaScanLocalLibraryEvent(
-                      refreshCommon: [],
+                      refreshCommon: const [],
                     ));
               },
               icon: const Icon(Icons.refresh),
@@ -112,7 +112,7 @@ class _SteamGameListState extends State<_SteamGameList> {
         DataCell(
           Align(
               alignment: Alignment.centerRight,
-              child: OutlinedButton.icon(
+              child: UniversalOutlinedButton.icon(
                 onPressed: () async {
                   await context
                       .read<GeburaBloc>()

diff --git a/lib/view/pages/gebura/gebura_nav.dart b/lib/view/pages/gebura/gebura_nav.dart
@@ -9,6 +9,7 @@ import '../../../model/gebura_model.dart';
 import '../../../route.dart';
 import '../../helper/spacing.dart';
 import '../../layout/overlapping_panels.dart';
+import '../../universal/list.dart';
 import 'gebura_common.dart';
 
 class GeburaNav extends StatelessWidget {
@@ -31,7 +32,7 @@ class GeburaNav extends StatelessWidget {
       builder: (context, state) {
         return Column(
           children: [
-            ListTile(
+            UniversalListTile(
               leading: const Icon(Icons.shopping_cart),
               onTap: () {
                 const GeburaStoreRoute().go(context);
@@ -40,7 +41,7 @@ class GeburaNav extends StatelessWidget {
               title: Text(S.of(context).store),
               selected: function == GeburaFunctions.store,
             ),
-            ListTile(
+            UniversalListTile(
               leading: const Icon(Icons.apps),
               onTap: () {
                 const GeburaLibraryRoute().go(context);
@@ -98,7 +99,7 @@ class GeburaNav extends StatelessWidget {
                           for (final LibraryListItem item
                               in state.libraryListItems ?? [])
                             Material(
-                                child: ListTile(
+                                child: UniversalListTile(
                               // https://github.com/flutter/flutter/issues/86584
                               selected: item.uuid == selectedItem,
                               onTap: () {
@@ -112,7 +113,6 @@ class GeburaNav extends StatelessWidget {
                                 maxLines: 1,
                                 overflow: TextOverflow.ellipsis,
                               ),
-                              minVerticalPadding: 0,
                               contentPadding:
                                   const EdgeInsets.symmetric(horizontal: 8),
                             ))
@@ -134,7 +134,7 @@ class GeburaNav extends StatelessWidget {
                 },
               ),
             ),
-            ListTile(
+            UniversalListTile(
               leading: const Icon(Icons.library_add_check),
               onTap: () {
                 const GeburaLibrarySettingsRoute().go(context);

diff --git a/lib/view/pages/server_select_overlay.dart b/lib/view/pages/server_select_overlay.dart
@@ -12,8 +12,8 @@ import '../../bloc/main_bloc.dart';
 import '../../l10n/l10n.dart';
 import '../../model/common_model.dart';
 import '../../route.dart';
+import '../components/form_field.dart';
 import '../components/toast.dart';
-import '../form/form_field.dart';
 import '../helper/connection.dart';
 import '../layout/bootstrap_container.dart';
 import '../specialized/backdrop_blur.dart';

diff --git a/lib/view/pages/settings/client/chore_setting.dart b/lib/view/pages/settings/client/chore_setting.dart
@@ -27,6 +27,18 @@ class ChoreSetting extends StatelessWidget {
                     },
                   ),
                 ),
+              if (PlatformHelper.isWindowsApp())
+                ListTile(
+                  title: const Text('使用 Fluent UI（实验性）'),
+                  trailing: Switch(
+                    value: state.useFluentUI ?? false,
+                    onChanged: (value) {
+                      context
+                          .read<ClientSettingBloc>()
+                          .add(ChangeUseFluentUIEvent(value));
+                    },
+                  ),
+                ),
               if (basePath != null && PlatformHelper.isWindowsApp())
                 ListTile(
                   title: const Text('数据目录'),

diff --git a/lib/view/pages/settings/porter/porter_manage_page.dart b/lib/view/pages/settings/porter/porter_manage_page.dart
@@ -7,8 +7,8 @@ import '../../../../bloc/tiphereth/tiphereth_bloc.dart';
 import '../../../../l10n/l10n.dart';
 import '../../../../repo/grpc/l10n.dart';
 import '../../../../route.dart';
+import '../../../components/form_field.dart';
 import '../../../components/toast.dart';
-import '../../../form/form_field.dart';
 import '../../../layout/card_list_page.dart';
 import '../../../specialized/right_panel_form.dart';
 import '../../frame_page.dart';

diff --git a/lib/view/pages/settings/porter_context_page.dart b/lib/view/pages/settings/porter_context_page.dart
@@ -10,8 +10,8 @@ import '../../../../bloc/tiphereth/tiphereth_bloc.dart';
 import '../../../../l10n/l10n.dart';
 import '../../../../route.dart';
 import '../../../repo/grpc/l10n.dart';
+import '../../components/form_field.dart';
 import '../../components/toast.dart';
-import '../../form/form_field.dart';
 import '../../layout/card_list_page.dart';
 import '../../specialized/right_panel_form.dart';
 import '../frame_page.dart';

diff --git a/lib/view/pages/yesod/manage_notify_flow_page.dart b/lib/view/pages/yesod/manage_notify_flow_page.dart
@@ -12,8 +12,8 @@ import '../../../model/netzach_model.dart';
 import '../../../repo/grpc/l10n.dart';
 import '../../../route.dart';
 import '../../components/chips_input.dart';
+import '../../components/form_field.dart';
 import '../../components/toast.dart';
-import '../../form/form_field.dart';
 import '../../helper/spacing.dart';
 import '../../layout/card_list_page.dart';
 import '../../specialized/right_panel_form.dart';

diff --git a/lib/view/pages/yesod/manage_notify_target_page.dart b/lib/view/pages/yesod/manage_notify_target_page.dart
@@ -10,8 +10,8 @@ import '../../../bloc/tiphereth/tiphereth_bloc.dart';
 import '../../../l10n/l10n.dart';
 import '../../../repo/grpc/l10n.dart';
 import '../../../route.dart';
+import '../../components/form_field.dart';
 import '../../components/toast.dart';
-import '../../form/form_field.dart';
 import '../../layout/card_list_page.dart';
 import '../../specialized/right_panel_form.dart';
 import '../frame_page.dart';

diff --git a/lib/view/pages/yesod/manage_yesod_feed_page.dart b/lib/view/pages/yesod/manage_yesod_feed_page.dart
@@ -23,9 +23,9 @@ import '../../../common/opml/opml.dart';
 import '../../../l10n/l10n.dart';
 import '../../../repo/grpc/l10n.dart';
 import '../../../route.dart';
+import '../../components/form_field.dart';
+import '../../components/input_formatters.dart';
 import '../../components/toast.dart';
-import '../../form/form_field.dart';
-import '../../form/input_formatters.dart';
 import '../../helper/duration_format.dart';
 import '../../helper/spacing.dart';
 import '../../layout/card_list_page.dart';

diff --git a/lib/view/pages/yesod/yesod_recent_page.dart b/lib/view/pages/yesod/yesod_recent_page.dart
@@ -15,7 +15,7 @@ import '../../../common/bloc_event_status_mixin.dart';
 import '../../../l10n/l10n.dart';
 import '../../../model/yesod_model.dart';
 import '../../../route.dart';
-import '../../form/form_field.dart';
+import '../../components/form_field.dart';
 import '../../helper/app_bar.dart';
 import '../../helper/duration_format.dart';
 import '../../helper/spacing.dart';