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

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

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 {
             ),
           ),
         ]),
+      ),
     );
   }
 }

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,
+    );
+  }
+}

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,

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),
         ]),
+      ),
     );
   }
 

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';

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 {
                       ),
                     ),
                   ),
+                ),
               ],
             ),
           ),

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(

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 {
               ],
             ),
           ),
+        ),
       );
 }

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),
+          ),
         )
       ],
     );

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

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