Add StaticTextScale. Fix areas in the app that were flowing out of bounds.

2022-09-01 20:46:15 -06:00 · 2022-09-01 20:46:15 -06:00 · a347718577
commit a347718577
parent 9fdaaede1b
12 changed files with 208 additions and 160 deletions
--- a/lib/logic/app_logic.dart
+++ b/lib/logic/app_logic.dart
@ -21,26 +21,30 @@ class AppLogic {
    // Default to only allowing portrait mode
    setDeviceOrientation(Axis.vertical);

-    // Try and get highest FPS possible on Android devices
+    // Set preferred refresh rate to the max possible (the OS may ignore this)
    await FlutterDisplayMode.setHighRefreshRate();

-    // Localizations load
+    // Localizations
    await localeLogic.load();
-    // Data load
+
+    // Timeline
    await timelineLogic.init();
-    // Settings load
+
+    // Settings
    await settingsLogic.load();
-    // Collectibles init
+
+    // Collectibles
    await collectiblesLogic.load();

    // flag bootStrap as complete
    isBootstrapComplete = true;

-    // load initial view (replace empty initial view)
-    if (settingsLogic.hasCompletedOnboarding.value) {
-      appRouter.go(ScreenPaths.home);
-    } else {
+    // load initial view (replace empty initial view which is covered by a native splash screen)
+    bool showIntro = settingsLogic.hasCompletedOnboarding.value == false;
+    if (showIntro) {
      appRouter.go(ScreenPaths.intro);
+    } else {
+      appRouter.go(ScreenPaths.home);
    }
  }

--- a/lib/ui/common/controls/diagonal_text_page_indicator.dart
+++ b/lib/ui/common/controls/diagonal_text_page_indicator.dart
@ -1,4 +1,5 @@
 import 'package:wonders/common_libs.dart';
+import 'package:wonders/ui/common/static_text_scale.dart';

 class DiagonalTextPageIndicator extends StatelessWidget {
  const DiagonalTextPageIndicator({Key? key, required this.current, required this.total}) : super(key: key);
@ -11,7 +12,8 @@ class DiagonalTextPageIndicator extends StatelessWidget {
    //final textShadows = [Shadow(color: Colors.black.withOpacity(.5), offset: Offset(0, 4), blurRadius: 6)];
    final textStyle = $styles.text.titleFont.copyWith(fontSize: _fontSize, height: 1);
    const size = _fontSize * 1.5;
-    return Padding(
+    return StaticTextScale(
+      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: textStyle.fontSize! * .4).copyWith(top: textStyle.fontSize! * .2),
        child: Stack(children: [
          ClipPath(
@ -51,6 +53,7 @@ class DiagonalTextPageIndicator extends StatelessWidget {
            ),
          ),
        ]),
+      ),
    );
  }
 }
--- a/lib/ui/common/static_text_scale.dart
+++ b/lib/ui/common/static_text_scale.dart
@ -0,0 +1,15 @@
+import 'package:wonders/common_libs.dart';
+
+class StaticTextScale extends StatelessWidget {
+  const StaticTextScale({Key? key, required this.child, this.scale = 1}) : super(key: key);
+  final Widget child;
+  final double scale;
+
+  @override
+  Widget build(BuildContext context) {
+    return MediaQuery(
+      data: MediaQuery.of(context).copyWith(textScaleFactor: scale),
+      child: child,
+    );
+  }
+}
--- a/lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart
+++ b/lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart
@ -5,6 +5,7 @@ import 'package:wonders/common_libs.dart';
 import 'package:wonders/logic/data/highlight_data.dart';
 import 'package:wonders/ui/common/controls/app_page_indicator.dart';
 import 'package:wonders/ui/common/controls/simple_header.dart';
+import 'package:wonders/ui/common/static_text_scale.dart';
 part 'widgets/_blurred_image_bg.dart';
 part 'widgets/_carousel_item.dart';

@ -184,6 +185,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
                  Container(
                    height: small ? 90 : 110,
                    alignment: Alignment.center,
+                    child: StaticTextScale(
                      child: Text(
                        artifact.title,
                        overflow: TextOverflow.ellipsis,
@ -192,6 +194,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
                        maxLines: 2,
                      ),
                    ),
+                  ),
                  if (!small) Gap($styles.insets.xxs),
                  Text(
                    artifact.date.isEmpty ? '--' : artifact.date,
--- a/lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart
+++ b/lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart
@ -5,6 +5,7 @@ import 'package:wonders/logic/data/wonder_data.dart';
 import 'package:wonders/logic/data/wonders_data/search/search_data.dart';
 import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/simple_header.dart';
+import 'package:wonders/ui/common/static_text_scale.dart';
 import 'package:wonders/ui/common/utils/app_haptics.dart';
 import 'package:wonders/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart';

@ -129,14 +130,17 @@ class _ArtifactSearchScreenState extends State<ArtifactSearchScreen> with GetItS
  Widget _buildStatusText(BuildContext context) {
    final TextStyle statusStyle = $styles.text.body.copyWith(color: $styles.colors.accent1);
    if (_searchResults.isEmpty) {
-      return Text(
+      return StaticTextScale(
+        child: Text(
          $strings.artifactsSearchLabelNotFound,
          textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false),
          style: statusStyle,
          textAlign: TextAlign.center,
+        ),
      );
    }
    return MergeSemantics(
+      child: StaticTextScale(
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Gap($styles.insets.sm),
          Text(
@ -162,6 +166,7 @@ class _ArtifactSearchScreenState extends State<ArtifactSearchScreen> with GetItS
          ),
          Gap($styles.insets.sm),
        ]),
+      ),
    );
  }

--- a/lib/ui/screens/editorial/editorial_screen.dart
+++ b/lib/ui/screens/editorial/editorial_screen.dart
@ -15,6 +15,7 @@ import 'package:wonders/ui/common/google_maps_marker.dart';
 import 'package:wonders/ui/common/gradient_container.dart';
 import 'package:wonders/ui/common/hidden_collectible.dart';
 import 'package:wonders/ui/common/scaling_list_item.dart';
+import 'package:wonders/ui/common/static_text_scale.dart';
 import 'package:wonders/ui/common/themed_text.dart';
 import 'package:wonders/ui/common/utils/context_utils.dart';
 import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart';
--- a/lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart
+++ b/lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart
@ -7,7 +7,6 @@ class _CollapsingPullQuoteImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final textScale = MediaQuery.of(context).textScaleFactor;
    // Start transitioning when we are halfway up the screen
    final collapseStartPx = context.heightPx * 1;
    final collapseEndPx = context.heightPx * .35;
@ -20,7 +19,7 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
      var quoteSize = quoteStyle.fontSize;
      quoteStyle = quoteStyle.copyWith(
        color: $styles.colors.caption,
-        fontSize: (quoteSize ??= 36) / textScale, //dynamic font size for more consistent quote layout
+        fontSize: (quoteSize ??= 36), //dynamic font size for more consistent quote layout
      );
      if (isAuthor) {
        quoteStyle = quoteStyle.copyWith(fontSize: 20, fontWeight: FontWeight.w600);
@ -91,6 +90,7 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
                Positioned.fill(
                  child: Container(
                    margin: const EdgeInsets.symmetric(horizontal: 24),
+                    child: StaticTextScale(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
@ -107,6 +107,7 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
                      ),
                    ),
                  ),
+                ),
              ],
            ),
          ),
--- a/lib/ui/screens/editorial/widgets/_scrolling_content.dart
+++ b/lib/ui/screens/editorial/widgets/_scrolling_content.dart
@ -26,7 +26,8 @@ class _ScrollingContent extends StatelessWidget {
      final TextStyle dropStyle = $styles.text.dropCase;
      final TextStyle bodyStyle = $styles.text.body;
      final String dropChar = value.substring(0, 1);
-      final double dropCapWidth = StringUtils.measure(dropChar, dropStyle).width;
+      final textScale = MediaQuery.of(context).textScaleFactor;
+      final double dropCapWidth = StringUtils.measure(dropChar, dropStyle).width * textScale;
      final bool isEnglish = localeLogic.strings.localeName == 'en'; //TODO EC: Helper method for localLogic.isEnglish?
      final bool skipCaps = !isEnglish || MediaQuery.of(context).accessibleNavigation;
      return Semantics(
--- a/lib/ui/screens/editorial/widgets/_title_text.dart
+++ b/lib/ui/screens/editorial/widgets/_title_text.dart
@ -9,6 +9,7 @@ class _TitleText extends StatelessWidget {
  Widget build(BuildContext context) => MergeSemantics(
        child: DefaultTextColor(
          color: $styles.colors.offWhite,
+          child: StaticTextScale(
            child: Column(
              children: [
                Gap($styles.insets.md),
@ -75,5 +76,6 @@ class _TitleText extends StatelessWidget {
              ],
            ),
          ),
+        ),
      );
 }
--- a/lib/ui/screens/intro/intro_screen.dart
+++ b/lib/ui/screens/intro/intro_screen.dart
@ -2,6 +2,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:wonders/common_libs.dart';
 import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/app_page_indicator.dart';
+import 'package:wonders/ui/common/static_text_scale.dart';
 import 'package:wonders/ui/common/themed_text.dart';
 import 'package:wonders/ui/common/utils/app_haptics.dart';

@ -208,6 +209,7 @@ class _Page extends StatelessWidget {
        SizedBox(
          height: _IntroScreenState._textHeight,
          width: _IntroScreenState._imageSize + $styles.insets.md,
+          child: StaticTextScale(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
@ -217,6 +219,7 @@ class _Page extends StatelessWidget {
              ],
            ),
          ),
+        ),
        Gap(_IntroScreenState._pageIndicatorHeight),
        Spacer(flex: 2),
      ]),
@ -234,9 +237,11 @@ class _WonderousLogo extends StatelessWidget {
          child: SvgPicture.asset(SvgPaths.compassSimple, color: $styles.colors.offWhite, height: 48),
        ),
        Gap($styles.insets.xs),
-        Text(
+        StaticTextScale(
+          child: Text(
            $strings.introSemanticWonderous,
            style: $styles.text.wonderTitle.copyWith(fontSize: 32, color: $styles.colors.offWhite),
+          ),
        )
      ],
    );
--- a/pubspec.lock
+++ b/pubspec.lock
@ -272,6 +272,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "0.3.1"
+  flutter_displaymode:
+    dependency: "direct main"
+    description:
+      name: flutter_displaymode
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0"
  flutter_driver:
    dependency: transitive
    description: flutter
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -21,6 +21,7 @@ dependencies:
  flextras: ^0.0.2
  flutter_animate: ^1.0.0
  flutter_circular_text: ^0.3.1
+  flutter_displaymode: ^0.4.0
  flutter_inappwebview: ^5.4.3
  flutter_native_splash: ^2.2.7
  flutter_staggered_grid_view: ^0.6.2