bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Shawn 2022-09-01 20:46:15 -06:00
parent 9fdaaede1b
commit a347718577
12 changed files with 208 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/logic/app_logic.dart
View File

@ -21,26 +21,30 @@ class AppLogic {
// Default to only allowing portrait mode // Default to only allowing portrait mode
setDeviceOrientation(Axis.vertical); 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(); await FlutterDisplayMode.setHighRefreshRate();
// Localizations load // Localizations
await localeLogic.load(); await localeLogic.load();
// Data load
// Timeline
await timelineLogic.init(); await timelineLogic.init();
// Settings load
// Settings
await settingsLogic.load(); await settingsLogic.load();
// Collectibles init
// Collectibles
await collectiblesLogic.load(); await collectiblesLogic.load();
// flag bootStrap as complete // flag bootStrap as complete
isBootstrapComplete = true; 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); appRouter.go(ScreenPaths.intro);
} else {
appRouter.go(ScreenPaths.home);
} }
} }

67
lib/ui/common/controls/diagonal_text_page_indicator.dart
View File

@ -1,4 +1,5 @@
import 'package:wonders/common_libs.dart'; import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/static_text_scale.dart';
class DiagonalTextPageIndicator extends StatelessWidget { class DiagonalTextPageIndicator extends StatelessWidget {
const DiagonalTextPageIndicator({Key? key, required this.current, required this.total}) : super(key: key); const DiagonalTextPageIndicator({Key? key, required this.current, required this.total}) : super(key: key);
@ -11,46 +12,48 @@ class DiagonalTextPageIndicator extends StatelessWidget {
//final textShadows = [Shadow(color: Colors.black.withOpacity(.5), offset: Offset(0, 4), blurRadius: 6)]; //final textShadows = [Shadow(color: Colors.black.withOpacity(.5), offset: Offset(0, 4), blurRadius: 6)];
final textStyle = $styles.text.titleFont.copyWith(fontSize: _fontSize, height: 1); final textStyle = $styles.text.titleFont.copyWith(fontSize: _fontSize, height: 1);
const size = _fontSize * 1.5; const size = _fontSize * 1.5;
return Padding( return StaticTextScale(
padding: EdgeInsets.symmetric(horizontal: textStyle.fontSize! * .4).copyWith(top: textStyle.fontSize! * .2), child: Padding(
child: Stack(children: [ padding: EdgeInsets.symmetric(horizontal: textStyle.fontSize! * .4).copyWith(top: textStyle.fontSize! * .2),
ClipPath( child: Stack(children: [
clipper: _DiagonalClipper(leftSide: true), ClipPath(
child: Transform.translate( clipper: _DiagonalClipper(leftSide: true),
offset: Offset(-_fontSize * .7, 0), child: Transform.translate(
child: SizedBox( offset: Offset(-_fontSize * .7, 0),
child: SizedBox(
width: size,
height: size,
child: Text('0$current',
style: textStyle.copyWith(shadows: $styles.shadows.text), textAlign: TextAlign.right)),
),
),
ClipPath(
clipper: _DiagonalClipper(leftSide: false),
child: Transform.translate(
offset: Offset(_fontSize * .45, _fontSize * .6),
child: SizedBox(
width: size, width: size,
height: size, height: size,
child: Text('0$current', child: Opacity(
style: textStyle.copyWith(shadows: $styles.shadows.text), textAlign: TextAlign.right)), opacity: .5,
), child: Text(
), '0$total',
ClipPath( style: textStyle.copyWith(shadows: $styles.shadows.textStrong),
clipper: _DiagonalClipper(leftSide: false), ),
child: Transform.translate(
offset: Offset(_fontSize * .45, _fontSize * .6),
child: SizedBox(
width: size,
height: size,
child: Opacity(
opacity: .5,
child: Text(
'0$total',
style: textStyle.copyWith(shadows: $styles.shadows.textStrong),
), ),
), ),
), ),
), ),
), Positioned.fill(
Positioned.fill( child: Center(
child: Center( child: Transform.rotate(
child: Transform.rotate( angle: pi * -.25,
angle: pi * -.25, child: Container(height: 2, color: Colors.white),
child: Container(height: 2, color: Colors.white), ),
), ),
), ),
), ]),
]), ),
); );
} }
} }

15
lib/ui/common/static_text_scale.dart Normal file
View File

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

15
lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart
View File

@ -5,6 +5,7 @@ import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/data/highlight_data.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/app_page_indicator.dart';
import 'package:wonders/ui/common/controls/simple_header.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/_blurred_image_bg.dart';
part 'widgets/_carousel_item.dart'; part 'widgets/_carousel_item.dart';
@ -184,12 +185,14 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
Container( Container(
height: small ? 90 : 110, height: small ? 90 : 110,
alignment: Alignment.center, alignment: Alignment.center,
child: Text( child: StaticTextScale(
artifact.title, child: Text(
overflow: TextOverflow.ellipsis, artifact.title,
style: $styles.text.h2.copyWith(color: $styles.colors.black, height: 1.2), overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center, style: $styles.text.h2.copyWith(color: $styles.colors.black, height: 1.2),
maxLines: 2, textAlign: TextAlign.center,
maxLines: 2,
),
), ),
), ),
if (!small) Gap($styles.insets.xxs), if (!small) Gap($styles.insets.xxs),

61
lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart
View File

@ -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/logic/data/wonders_data/search/search_data.dart';
import 'package:wonders/ui/common/app_icons.dart'; import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/controls/simple_header.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/common/utils/app_haptics.dart';
import 'package:wonders/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart'; import 'package:wonders/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart';
@ -129,39 +130,43 @@ class _ArtifactSearchScreenState extends State<ArtifactSearchScreen> with GetItS
Widget _buildStatusText(BuildContext context) { Widget _buildStatusText(BuildContext context) {
final TextStyle statusStyle = $styles.text.body.copyWith(color: $styles.colors.accent1); final TextStyle statusStyle = $styles.text.body.copyWith(color: $styles.colors.accent1);
if (_searchResults.isEmpty) { if (_searchResults.isEmpty) {
return Text( return StaticTextScale(
$strings.artifactsSearchLabelNotFound, child: Text(
textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false), $strings.artifactsSearchLabelNotFound,
style: statusStyle, textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.center, style: statusStyle,
textAlign: TextAlign.center,
),
); );
} }
return MergeSemantics( return MergeSemantics(
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ child: StaticTextScale(
Gap($styles.insets.sm), child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Text( Gap($styles.insets.sm),
StringUtils.supplant( Text(
$strings.artifactsSearchLabelFound, StringUtils.supplant(
{ $strings.artifactsSearchLabelFound,
'{numFound}': _searchResults.length.toString(), {
'{numResults}': _filteredResults.length.toString(), '{numFound}': _searchResults.length.toString(),
}, '{numResults}': _filteredResults.length.toString(),
), },
textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false), ),
style: statusStyle,
),
AppBtn.basic(
semanticLabel: $strings.artifactsSearchButtonToggle,
onPressed: () => panelController.toggle(),
enableFeedback: false, // handled when panelController changes.
child: Text(
$strings.artifactsSearchSemanticTimeframe,
textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false), textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false),
style: statusStyle.copyWith(decoration: TextDecoration.underline), style: statusStyle,
), ),
), AppBtn.basic(
Gap($styles.insets.sm), semanticLabel: $strings.artifactsSearchButtonToggle,
]), onPressed: () => panelController.toggle(),
enableFeedback: false, // handled when panelController changes.
child: Text(
$strings.artifactsSearchSemanticTimeframe,
textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false),
style: statusStyle.copyWith(decoration: TextDecoration.underline),
),
),
Gap($styles.insets.sm),
]),
),
); );
} }

1
lib/ui/screens/editorial/editorial_screen.dart
View File

@ -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/gradient_container.dart';
import 'package:wonders/ui/common/hidden_collectible.dart'; import 'package:wonders/ui/common/hidden_collectible.dart';
import 'package:wonders/ui/common/scaling_list_item.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/themed_text.dart';
import 'package:wonders/ui/common/utils/context_utils.dart'; import 'package:wonders/ui/common/utils/context_utils.dart';
import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart'; import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart';

29
lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart
View File

@ -7,7 +7,6 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final textScale = MediaQuery.of(context).textScaleFactor;
// Start transitioning when we are halfway up the screen // Start transitioning when we are halfway up the screen
final collapseStartPx = context.heightPx * 1; final collapseStartPx = context.heightPx * 1;
final collapseEndPx = context.heightPx * .35; final collapseEndPx = context.heightPx * .35;
@ -20,7 +19,7 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
var quoteSize = quoteStyle.fontSize; var quoteSize = quoteStyle.fontSize;
quoteStyle = quoteStyle.copyWith( quoteStyle = quoteStyle.copyWith(
color: $styles.colors.caption, 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) { if (isAuthor) {
quoteStyle = quoteStyle.copyWith(fontSize: 20, fontWeight: FontWeight.w600); quoteStyle = quoteStyle.copyWith(fontSize: 20, fontWeight: FontWeight.w600);
@ -91,19 +90,21 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
Positioned.fill( Positioned.fill(
child: Container( child: Container(
margin: const EdgeInsets.symmetric(horizontal: 24), margin: const EdgeInsets.symmetric(horizontal: 24),
child: Column( child: StaticTextScale(
mainAxisAlignment: MainAxisAlignment.center, child: Column(
children: [ mainAxisAlignment: MainAxisAlignment.center,
SizedBox(height: 32), // push down vertical centre children: [
buildText(data.pullQuote1Top, collapseAmt, top: true), SizedBox(height: 32), // push down vertical centre
buildText(data.pullQuote1Bottom, collapseAmt, top: false), buildText(data.pullQuote1Top, collapseAmt, top: true),
if (data.pullQuote1Author.isNotEmpty) ...[ buildText(data.pullQuote1Bottom, collapseAmt, top: false),
Container( if (data.pullQuote1Author.isNotEmpty) ...[
margin: const EdgeInsets.only(top: 16), Container(
child: buildText('- ${data.pullQuote1Author}', collapseAmt, top: false, isAuthor: true), margin: const EdgeInsets.only(top: 16),
) child: buildText('- ${data.pullQuote1Author}', collapseAmt, top: false, isAuthor: true),
)
],
], ],
], ),
), ),
), ),
), ),

3
lib/ui/screens/editorial/widgets/_scrolling_content.dart
View File

@ -26,7 +26,8 @@ class _ScrollingContent extends StatelessWidget {
final TextStyle dropStyle = $styles.text.dropCase; final TextStyle dropStyle = $styles.text.dropCase;
final TextStyle bodyStyle = $styles.text.body; final TextStyle bodyStyle = $styles.text.body;
final String dropChar = value.substring(0, 1); 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 isEnglish = localeLogic.strings.localeName == 'en'; //TODO EC: Helper method for localLogic.isEnglish?
final bool skipCaps = !isEnglish || MediaQuery.of(context).accessibleNavigation; final bool skipCaps = !isEnglish || MediaQuery.of(context).accessibleNavigation;
return Semantics( return Semantics(

122
lib/ui/screens/editorial/widgets/_title_text.dart
View File

@ -9,70 +9,72 @@ class _TitleText extends StatelessWidget {
Widget build(BuildContext context) => MergeSemantics( Widget build(BuildContext context) => MergeSemantics(
child: DefaultTextColor( child: DefaultTextColor(
color: $styles.colors.offWhite, color: $styles.colors.offWhite,
child: Column( child: StaticTextScale(
children: [ child: Column(
Gap($styles.insets.md), children: [
Gap(30), Gap($styles.insets.md),
SeparatedRow( Gap(30),
padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm), SeparatedRow(
separatorBuilder: () => Gap($styles.insets.sm), padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
children: [ separatorBuilder: () => Gap($styles.insets.sm),
Expanded( children: [
child: Divider( Expanded(
color: data.type.fgColor, child: Divider(
).animate().scale(curve: Curves.easeOut, delay: 500.ms), color: data.type.fgColor,
), ).animate().scale(curve: Curves.easeOut, delay: 500.ms),
Semantics( ),
header: true, Semantics(
sortKey: OrdinalSortKey(1), header: true,
child: Text( sortKey: OrdinalSortKey(1),
data.subTitle.toUpperCase(), child: Text(
style: $styles.text.title2, data.subTitle.toUpperCase(),
).animate().fade(delay: 100.ms), style: $styles.text.title2,
), ).animate().fade(delay: 100.ms),
Expanded( ),
child: Divider( Expanded(
color: data.type.fgColor, child: Divider(
).animate().scale(curve: Curves.easeOut, delay: 500.ms), color: data.type.fgColor,
), ).animate().scale(curve: Curves.easeOut, delay: 500.ms),
], ),
), ],
Gap($styles.insets.md), ),
Semantics(sortKey: OrdinalSortKey(0), child: WonderTitleText(data)), Gap($styles.insets.md),
Gap($styles.insets.xs), Semantics(sortKey: OrdinalSortKey(0), child: WonderTitleText(data)),
Text( Gap($styles.insets.xs),
data.regionTitle.toUpperCase(), Text(
style: $styles.text.title1, data.regionTitle.toUpperCase(),
textAlign: TextAlign.center, style: $styles.text.title1,
), textAlign: TextAlign.center,
Gap($styles.insets.md), ),
ExcludeSemantics( Gap($styles.insets.md),
child: Padding( ExcludeSemantics(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md), child: Padding(
child: AnimatedBuilder( padding: EdgeInsets.symmetric(horizontal: $styles.insets.md),
animation: scroller, child: AnimatedBuilder(
builder: (_, __) => CompassDivider( animation: scroller,
isExpanded: scroller.position.pixels <= 0, builder: (_, __) => CompassDivider(
linesColor: data.type.fgColor, isExpanded: scroller.position.pixels <= 0,
compassColor: $styles.colors.offWhite, linesColor: data.type.fgColor,
compassColor: $styles.colors.offWhite,
),
), ),
), ),
), ),
), Gap($styles.insets.sm),
Gap($styles.insets.sm), Text(
Text( StringUtils.supplant(
StringUtils.supplant( $strings.titleLabelDate,
$strings.titleLabelDate, {
{ '{fromDate}': StringUtils.formatYr(data.startYr),
'{fromDate}': StringUtils.formatYr(data.startYr), '{endDate}': StringUtils.formatYr(data.endYr),
'{endDate}': StringUtils.formatYr(data.endYr), },
}, ),
style: $styles.text.h4,
textAlign: TextAlign.center,
), ),
style: $styles.text.h4, Gap($styles.insets.sm),
textAlign: TextAlign.center, ],
), ),
Gap($styles.insets.sm),
],
), ),
), ),
); );

25
lib/ui/screens/intro/intro_screen.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter_svg/flutter_svg.dart';
import 'package:wonders/common_libs.dart'; import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/app_icons.dart'; import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/controls/app_page_indicator.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/themed_text.dart';
import 'package:wonders/ui/common/utils/app_haptics.dart'; import 'package:wonders/ui/common/utils/app_haptics.dart';
@ -208,13 +209,15 @@ class _Page extends StatelessWidget {
SizedBox( SizedBox(
height: _IntroScreenState._textHeight, height: _IntroScreenState._textHeight,
width: _IntroScreenState._imageSize + $styles.insets.md, width: _IntroScreenState._imageSize + $styles.insets.md,
child: Column( child: StaticTextScale(
mainAxisAlignment: MainAxisAlignment.center, child: Column(
children: [ mainAxisAlignment: MainAxisAlignment.center,
Text(data.title, style: $styles.text.wonderTitle.copyWith(fontSize: 24)), children: [
Gap($styles.insets.sm), Text(data.title, style: $styles.text.wonderTitle.copyWith(fontSize: 24)),
Text(data.desc, style: $styles.text.body, textAlign: TextAlign.center), Gap($styles.insets.sm),
], Text(data.desc, style: $styles.text.body, textAlign: TextAlign.center),
],
),
), ),
), ),
Gap(_IntroScreenState._pageIndicatorHeight), Gap(_IntroScreenState._pageIndicatorHeight),
@ -234,9 +237,11 @@ class _WonderousLogo extends StatelessWidget {
child: SvgPicture.asset(SvgPaths.compassSimple, color: $styles.colors.offWhite, height: 48), child: SvgPicture.asset(SvgPaths.compassSimple, color: $styles.colors.offWhite, height: 48),
), ),
Gap($styles.insets.xs), Gap($styles.insets.xs),
Text( StaticTextScale(
$strings.introSemanticWonderous, child: Text(
style: $styles.text.wonderTitle.copyWith(fontSize: 32, color: $styles.colors.offWhite), $strings.introSemanticWonderous,
style: $styles.text.wonderTitle.copyWith(fontSize: 32, color: $styles.colors.offWhite),
),
) )
], ],
); );

7
pubspec.lock
View File

@ -272,6 +272,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.3.1" 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: flutter_driver:
dependency: transitive dependency: transitive
description: flutter description: flutter

1
pubspec.yaml
View File

@ -21,6 +21,7 @@ dependencies:
flextras: ^0.0.2 flextras: ^0.0.2
flutter_animate: ^1.0.0 flutter_animate: ^1.0.0
flutter_circular_text: ^0.3.1 flutter_circular_text: ^0.3.1
flutter_displaymode: ^0.4.0
flutter_inappwebview: ^5.4.3 flutter_inappwebview: ^5.4.3
flutter_native_splash: ^2.2.7 flutter_native_splash: ^2.2.7
flutter_staggered_grid_view: ^0.6.2 flutter_staggered_grid_view: ^0.6.2