feat: add text scaling support

realth000 · realth000 · commit cf07b6928dce · 2026-02-19T16:36:33.000+08:00
Text scaling settings and UI adaption. Closes: #324
diff --git a/lib/app.dart b/lib/app.dart
@@ -5,6 +5,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:flutter_styled_toast/flutter_styled_toast.dart';
+import 'package:tsdm_client/constants/layout.dart';
 import 'package:tsdm_client/extensions/build_context.dart';
 import 'package:tsdm_client/features/authentication/repository/authentication_repository.dart';
 import 'package:tsdm_client/features/cache/bloc/image_cache_trigger_cubit.dart';
@@ -428,6 +429,9 @@ class _AppState extends State<App> with WindowListener, LoggerMixin {
               final accentColor = themeState.accentColor;
               final themeModeIndex = themeState.themeModeIndex;
               final fontFamily = themeState.fontFamily;
+              final textScaleFactor = context.select<SettingsBloc, double>(
+                (bloc) => bloc.state.settingsMap.textScaleFactor,
+              );
 
               final lightTheme = AppTheme.makeLight(context, seedColor: accentColor, fontFamily: fontFamily);
               final darkTheme = AppTheme.makeDark(context, seedColor: accentColor, fontFamily: fontFamily);
@@ -442,6 +446,15 @@ class _AppState extends State<App> with WindowListener, LoggerMixin {
                 darkTheme: darkTheme,
                 themeMode: ThemeMode.values[themeModeIndex],
                 scaffoldMessengerKey: snackbarKey,
+                builder: (context, child) {
+                  final data = MediaQuery.of(context);
+                  return MediaQuery(
+                    data: data.copyWith(
+                      textScaler: TextScaler.linear(textScaleFactor)..clamp(minScaleFactor: 0.7, maxScaleFactor: 1.5),
+                    ),
+                    child: child ?? sizedBoxEmpty,
+                  );
+                },
               );
             },
           ),
diff --git a/lib/features/homepage/widgets/pin_section.dart b/lib/features/homepage/widgets/pin_section.dart
@@ -62,7 +62,7 @@ class PinSection extends StatelessWidget with LoggerMixin {
     return Column(children: listTileList);
   }
 
-  Widget _buildSection(BuildContext context) {
+  Widget _buildSection(BuildContext context, double textScaleFactor) {
     final ret = <Widget>[];
 
     final count = pinnedThreadGroup.length;
@@ -95,9 +95,9 @@ class PinSection extends StatelessWidget with LoggerMixin {
 
     return GridView(
       physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-        maxCrossAxisExtent: 600,
-        mainAxisExtent: 700,
+      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+        maxCrossAxisExtent: 670,
+        mainAxisExtent: 700 + math.max(25 * ((textScaleFactor - 1) / 0.1), 0),
         mainAxisSpacing: 12,
         crossAxisSpacing: 12,
       ),
@@ -108,6 +108,7 @@ class PinSection extends StatelessWidget with LoggerMixin {
 
   @override
   Widget build(BuildContext context) {
-    return _buildSection(context);
+    final textScaleFactor = context.select<SettingsBloc, double>((bloc) => bloc.state.settingsMap.textScaleFactor);
+    return _buildSection(context, textScaleFactor);
   }
 }
diff --git a/lib/features/homepage/widgets/widgets.dart b/lib/features/homepage/widgets/widgets.dart
@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -9,6 +10,7 @@ import 'package:tsdm_client/extensions/map.dart';
 import 'package:tsdm_client/extensions/string.dart';
 import 'package:tsdm_client/features/homepage/bloc/homepage_bloc.dart';
 import 'package:tsdm_client/features/homepage/models/models.dart';
+import 'package:tsdm_client/features/settings/bloc/settings_bloc.dart';
 import 'package:tsdm_client/routes/screen_paths.dart';
 import 'package:tsdm_client/utils/logger.dart';
 import 'package:tsdm_client/widgets/cached_image/cached_image.dart';
diff --git a/lib/features/settings/repositories/settings_repository.dart b/lib/features/settings/repositories/settings_repository.dart
@@ -140,6 +140,7 @@ final class SettingsRepository with LoggerMixin {
       autoClearImageCacheDuration: s.extract(_SK.autoClearImageCacheDuration),
       collapseAppBarWhenScroll: s.extract(_SK.collapseAppBarWhenScroll),
       threadFloorInteractionMode: s.extract(_SK.threadFloorInteractionMode),
+      textScaleFactor: s.extract(_SK.textScaleFactor),
     );
   }
 
diff --git a/lib/features/settings/view/settings_page.dart b/lib/features/settings/view/settings_page.dart
@@ -25,6 +25,7 @@ import 'package:tsdm_client/features/settings/widgets/check_in_dialog.dart';
 import 'package:tsdm_client/features/settings/widgets/clear_cache_bottom_sheet.dart';
 import 'package:tsdm_client/features/settings/widgets/color_picker_dialog.dart';
 import 'package:tsdm_client/features/settings/widgets/font_family_dialog.dart';
+import 'package:tsdm_client/features/settings/widgets/font_scale_dialog.dart';
 import 'package:tsdm_client/features/settings/widgets/language_dialog.dart';
 import 'package:tsdm_client/features/settings/widgets/proxy_settings_dialog.dart';
 import 'package:tsdm_client/features/settings/widgets/select_thread_floor_interaction_mode_dialog.dart';
@@ -143,6 +144,9 @@ class _SettingsPageState extends State<SettingsPage> {
     /// App wide font family
     final fontFamily = state.settingsMap.fontFamily;
 
+    // App wide text scale factor.
+    final textScaleFactor = state.settingsMap.textScaleFactor;
+
     return [
       SectionTitleText(tr.title),
       // Theme mode
@@ -345,6 +349,23 @@ class _SettingsPageState extends State<SettingsPage> {
           context.read<SettingsBloc>().add(SettingsValueChanged(SettingsKeys.fontFamily, selectedFont));
         },
       ),
+
+      /// Text scale factor.
+      SectionListTile(
+        leading: const Icon(Icons.text_increase_outlined),
+        title: Text(tr.textScaleFactor.title),
+        onTap: () async {
+          final selectedScale = await showDialog<double>(
+            context: context,
+            builder: (_) => RootPage(DialogPaths.textScalePicker, TextScaleDialog(textScaleFactor)),
+          );
+          if (!context.mounted || selectedScale == null) {
+            return;
+          }
+
+          context.read<SettingsBloc>().add(SettingsValueChanged(SettingsKeys.textScaleFactor, selectedScale));
+        },
+      ),
     ];
   }
 
diff --git a/lib/features/settings/widgets/font_scale_dialog.dart b/lib/features/settings/widgets/font_scale_dialog.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:tsdm_client/i18n/strings.g.dart';
+import 'package:tsdm_client/widgets/custom_alert_dialog.dart';
+
+/// Dialog to show available text scale options as a chooser.
+class TextScaleDialog extends StatefulWidget {
+  /// Constructor.
+  const TextScaleDialog(this.initialScale, {super.key});
+
+  /// Text scale factor when enter this widget.
+  final double initialScale;
+
+  @override
+  State<TextScaleDialog> createState() => _TextScaleDialogState();
+}
+
+class _TextScaleDialogState extends State<TextScaleDialog> {
+  late double _currentScale;
+
+  @override
+  void initState() {
+    super.initState();
+    _currentScale = widget.initialScale;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final tr = context.t.settingsPage.appearanceSection.textScaleFactor;
+
+    return CustomAlertDialog.sync(
+      title: Text(tr.dialogTitle),
+      content: Column(
+        spacing: 12,
+        children: [
+          Text(_currentScale.toString()),
+          Slider(
+            autofocus: true,
+            // Since flutter 3.29
+            // ignore: deprecated_member_use
+            year2023: false,
+            min: 0.7,
+            max: 1.5,
+            divisions: 8,
+            value: _currentScale,
+            onChanged: (v) => setState(() => _currentScale = double.parse(v.toStringAsFixed(2))),
+          ),
+        ],
+      ),
+      actions: [TextButton(onPressed: () => context.pop(_currentScale), child: Text(context.t.general.ok))],
+    );
+  }
+}
diff --git a/lib/features/thread/v1/view/thread_page.dart b/lib/features/thread/v1/view/thread_page.dart
@@ -1,3 +1,5 @@
+import 'dart:math' as math;
+
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -12,6 +14,7 @@ import 'package:tsdm_client/features/authentication/repository/authentication_re
 import 'package:tsdm_client/features/forum/models/models.dart';
 import 'package:tsdm_client/features/jump_page/cubit/jump_page_cubit.dart';
 import 'package:tsdm_client/features/need_login/view/need_login_page.dart';
+import 'package:tsdm_client/features/settings/bloc/settings_bloc.dart';
 import 'package:tsdm_client/features/settings/repositories/settings_repository.dart';
 import 'package:tsdm_client/features/thread/v1/bloc/thread_bloc.dart';
 import 'package:tsdm_client/features/thread/v1/repository/thread_repository.dart';
@@ -125,7 +128,7 @@ class _ThreadPageState extends State<ThreadPage> with SingleTickerProviderStateM
 
   final _replyBarController = ReplyBarController();
 
-  Widget _buildBreadcrumbsRow(ThreadState state) {
+  Widget _buildBreadcrumbsRow(ThreadState state, double extraHeight) {
     final infoTextStyle = Theme.of(
       context,
     ).textTheme.labelLarge?.copyWith(color: Theme.of(context).colorScheme.outline);
@@ -165,7 +168,7 @@ class _ThreadPageState extends State<ThreadPage> with SingleTickerProviderStateM
       child: DefaultTextStyle.merge(
         style: infoTextStyle,
         child: SizedBox(
-          height: 20,
+          height: 20 + extraHeight,
           child: ListView(
             scrollDirection: Axis.horizontal,
             reverse: true,
@@ -398,6 +401,9 @@ class _ThreadPageState extends State<ThreadPage> with SingleTickerProviderStateM
           builder: (context, state) {
             // Update jump page state.
             context.read<JumpPageCubit>().setPageInfo(totalPages: state.totalPages, currentPage: state.currentPage);
+            final textScaleExtraBreadHeight = context.select<SettingsBloc, double>(
+              (bloc) => 1 * math.max(0, (bloc.state.settingsMap.textScaleFactor - 1) / 0.1),
+            );
 
             final title = widget.title ?? state.title;
             // Reset jump page state when every build.
@@ -425,7 +431,10 @@ class _ThreadPageState extends State<ThreadPage> with SingleTickerProviderStateM
               resizeToAvoidBottomInset: false,
               appBar: ListAppBar(
                 title: title,
-                bottom: PreferredSize(preferredSize: const Size.fromHeight(20), child: _buildBreadcrumbsRow(state)),
+                bottom: PreferredSize(
+                  preferredSize: Size.fromHeight(20 + textScaleExtraBreadHeight),
+                  child: _buildBreadcrumbsRow(state, textScaleExtraBreadHeight),
+                ),
                 showReverseOrderAction: true,
                 onJumpPage: (pageNumber) async {
                   if (!mounted) {
diff --git a/lib/i18n/en.i18n.json b/lib/i18n/en.i18n.json
@@ -160,6 +160,10 @@
       "fontFamily": {
         "title": "Font family",
         "dialogTitle": "Choose font"
+      },
+      "textScaleFactor": {
+        "title": "Text scale",
+        "dialogTitle": "Text scale factor"
       }
     },
     "windowSection": {
diff --git a/lib/i18n/zh-CN.i18n.json b/lib/i18n/zh-CN.i18n.json
@@ -160,6 +160,10 @@
       "fontFamily": {
         "title": "字体",
         "dialogTitle": "选择字体"
+      },
+      "textScaleFactor": {
+        "title": "文字缩放",
+        "dialogTitle": "文字缩放系数"
       }
     },
     "windowSection": {
diff --git a/lib/i18n/zh-TW.i18n.json b/lib/i18n/zh-TW.i18n.json
@@ -160,6 +160,10 @@
       "fontFamily": {
         "title": "字體",
         "dialogTitle": "選擇字體"
+      },
+      "textScaleFactor": {
+        "title": "文字縮放",
+        "dialogTitle": "文字縮放係數"
       }
     },
     "windowSection": {
diff --git a/lib/routes/screen_paths.dart b/lib/routes/screen_paths.dart
@@ -298,6 +298,9 @@ class DialogPaths {
   /// Dialog to let user picker a font.
   static const String fontPicker = '/dialog/fontPicker';
 
+  /// Dialog to let user picker a text scale factor.
+  static const String textScalePicker = '/dialog/textScalePicker';
+
   /// Dialog to let user select the duration between auto syncing notice events.
   static const String selectAutoSyncDuration = '/dialog/selectAutoSyncDuration';
 
diff --git a/lib/shared/models/settings.dart b/lib/shared/models/settings.dart
@@ -198,7 +198,15 @@ enum SettingsKeys<T> implements Comparable<SettingsKeys<T>> {
     name: 'threadFloorInteractionMode',
     type: ThreadFloorInteractionMode,
     defaultValue: ThreadFloorInteractionMode.adaptiveTapMenu,
-  );
+  ),
+
+  /// Global text scale factor.
+  textScaleFactor<double>(
+    name: 'textScaleFactor',
+    type: double,
+    defaultValue: 1,
+  ),
+  ;
 
   const SettingsKeys({required this.name, required this.type, required this.defaultValue});
 
diff --git a/lib/shared/models/settings_map.dart b/lib/shared/models/settings_map.dart
@@ -51,6 +51,7 @@ class SettingsMap with SettingsMapMappable {
     required this.autoClearImageCacheDuration,
     required this.collapseAppBarWhenScroll,
     required this.threadFloorInteractionMode,
+    required this.textScaleFactor,
   });
 
   final String netClientAccept;
@@ -96,6 +97,7 @@ class SettingsMap with SettingsMapMappable {
   final int autoClearImageCacheDuration;
   final bool collapseAppBarWhenScroll;
   final ThreadFloorInteractionMode threadFloorInteractionMode;
+  final double textScaleFactor;
 
   SettingsMap copyWithKey<T>(SettingsKeys<T> key, T? value) {
     assert(
@@ -150,6 +152,7 @@ class SettingsMap with SettingsMapMappable {
       SettingsKeys.threadFloorInteractionMode => copyWith(
         threadFloorInteractionMode: value as ThreadFloorInteractionMode?,
       ),
+      SettingsKeys.textScaleFactor => copyWith(textScaleFactor: value as double?),
     };
   }
 }
diff --git a/lib/utils/html/html_muncher.dart b/lib/utils/html/html_muncher.dart
@@ -814,7 +814,11 @@ final class _Muncher with LoggerMixin {
         // Text already has the label, do not add duplicate one.
         content = null;
       } else {
-        content = Text('@', style: TextStyle(color: Theme.of(context).colorScheme.primary));
+        content = Text(
+          '@',
+          style: TextStyle(color: Theme.of(context).colorScheme.primary),
+          textScaler: .noScaling,
+        );
       }
     } else {
       final IconData prefixIcon;

Original file line number	Diff line number	Diff line change
`@@ -140,6 +140,7 @@ final class SettingsRepository with LoggerMixin {`
`140`	`140`	`autoClearImageCacheDuration: s.extract(_SK.autoClearImageCacheDuration),`
`141`	`141`	`collapseAppBarWhenScroll: s.extract(_SK.collapseAppBarWhenScroll),`
`142`	`142`	`threadFloorInteractionMode: s.extract(_SK.threadFloorInteractionMode),`
	`143`	`+ textScaleFactor: s.extract(_SK.textScaleFactor),`
`143`	`144`	`);`
`144`	`145`	`}`
`145`	`146`