diff --git a/lib/styles/styles.dart b/lib/styles/styles.dart index caf64d58..966452b0 100644 --- a/lib/styles/styles.dart +++ b/lib/styles/styles.dart @@ -134,6 +134,9 @@ class _Insets { @immutable class _Shadows { + final textSoft = [ + Shadow(color: Colors.black.withOpacity(.25), offset: Offset(0, 2), blurRadius: 4), + ]; final text = [ Shadow(color: Colors.black.withOpacity(.6), offset: Offset(0, 2), blurRadius: 2), ]; diff --git a/lib/ui/common/controls/diagonal_text_page_indicator.dart b/lib/ui/common/controls/diagonal_text_page_indicator.dart index 2d480fe2..4d62d346 100644 --- a/lib/ui/common/controls/diagonal_text_page_indicator.dart +++ b/lib/ui/common/controls/diagonal_text_page_indicator.dart @@ -5,7 +5,7 @@ class DiagonalTextPageIndicator extends StatelessWidget { const DiagonalTextPageIndicator({Key? key, required this.current, required this.total}) : super(key: key); final int current; final int total; - static const double _fontSize = 32; + static const double _fontSize = 26; @override Widget build(BuildContext context) { @@ -21,10 +21,7 @@ class DiagonalTextPageIndicator extends StatelessWidget { child: Transform.translate( 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)), + width: size, height: size, child: Text('0$current', style: textStyle, textAlign: TextAlign.right)), ), ), ClipPath( @@ -38,7 +35,7 @@ class DiagonalTextPageIndicator extends StatelessWidget { opacity: .5, child: Text( '0$total', - style: textStyle.copyWith(shadows: $styles.shadows.textStrong), + style: textStyle, //.copyWith(shadows: $styles.shadows.textStrong), ), ), ), diff --git a/lib/ui/screens/editorial/widgets/_title_text.dart b/lib/ui/screens/editorial/widgets/_title_text.dart index 69886906..948834a3 100644 --- a/lib/ui/screens/editorial/widgets/_title_text.dart +++ b/lib/ui/screens/editorial/widgets/_title_text.dart @@ -14,6 +14,8 @@ class _TitleText extends StatelessWidget { children: [ Gap($styles.insets.md), Gap(30), + + /// Sub-title row SeparatedRow( padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm), separatorBuilder: () => Gap($styles.insets.sm), @@ -39,14 +41,23 @@ class _TitleText extends StatelessWidget { ], ), Gap($styles.insets.md), - Semantics(sortKey: OrdinalSortKey(0), child: WonderTitleText(data)), + + /// Wonder title text + Semantics( + sortKey: OrdinalSortKey(0), + child: WonderTitleText(data), + ), Gap($styles.insets.xs), + + /// Region Text( data.regionTitle.toUpperCase(), style: $styles.text.title1, textAlign: TextAlign.center, ), Gap($styles.insets.md), + + /// Compass divider ExcludeSemantics( child: Padding( padding: EdgeInsets.symmetric(horizontal: $styles.insets.md), @@ -61,6 +72,8 @@ class _TitleText extends StatelessWidget { ), ), Gap($styles.insets.sm), + + /// Date Text( StringUtils.supplant( $strings.titleLabelDate, diff --git a/lib/ui/screens/home/wonders_home_screen.dart b/lib/ui/screens/home/wonders_home_screen.dart index 06861261..a4cd9f58 100644 --- a/lib/ui/screens/home/wonders_home_screen.dart +++ b/lib/ui/screens/home/wonders_home_screen.dart @@ -12,6 +12,7 @@ import 'package:wonders/ui/screens/home_menu/home_menu.dart'; import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_config.dart'; +import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart'; part '_vertical_swipe_controller.dart'; part 'widgets/_animated_arrow_button.dart'; @@ -143,7 +144,7 @@ class _HomeScreenState extends State with SingleTickerProviderStateM Stack(children: [ /// Foreground gradient-1, gets darker when swiping up BottomCenter( - child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.5)), + child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.65)), ), /// Foreground decorators @@ -151,69 +152,78 @@ class _HomeScreenState extends State with SingleTickerProviderStateM /// Foreground gradient-2, gets darker when swiping up BottomCenter( - child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.5)), + child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(1)), ), /// Floating controls / UI AnimatedSwitcher( duration: $styles.times.fast, child: RepaintBoundary( - child: OverflowBox( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - SizedBox(width: double.infinity), - const Spacer(), + key: ObjectKey(currentWonder), + child: IgnorePointer( + ignoringSemantics: false, + child: OverflowBox( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(width: double.infinity), + const Spacer(), - /// Title Content - LightText( - child: MergeSemantics( - child: Column( - children: [ - /// Page indicator - IgnorePointer( - child: DiagonalTextPageIndicator(current: _wonderIndex + 1, total: _numWonders), - ), - Gap($styles.insets.sm), + /// Title Content + LightText( + child: MergeSemantics( + child: Transform.translate( + offset: Offset(0, 30), + child: Column( + children: [ + WonderTitleText(currentWonder, enableShadows: true), - AppPageIndicator( - count: _numWonders, - controller: _pageController, - color: $styles.colors.white, - dotSize: 8, - onDotPressed: _handlePageIndicatorDotPressed, - semanticPageTitle: $strings.homeSemanticWonder, + //Gap($styles.insets.sm), + AppPageIndicator( + count: _numWonders, + controller: _pageController, + color: $styles.colors.white, + dotSize: 8, + onDotPressed: _handlePageIndicatorDotPressed, + semanticPageTitle: $strings.homeSemanticWonder, + ), + + /// Page indicator + // IgnorePointer( + // child: DiagonalTextPageIndicator(current: _wonderIndex + 1, total: _numWonders), + // ), + ], ), - ], + ), ), ), - ), - Gap($styles.insets.xs), + //Gap($styles.insets.xs), - /// Animated arrow and background - /// Wrap in a container that is full-width to make it easier to find for screen readers - MergeSemantics( - child: Container( - width: double.infinity, - alignment: Alignment.center, + /// Animated arrow and background + /// Wrap in a container that is full-width to make it easier to find for screen readers + MergeSemantics( + child: Container( + width: double.infinity, + alignment: Alignment.center, - /// Lose state of child objects when index changes, this will re-run all the animated switcher and the arrow anim - key: ValueKey(_wonderIndex), - child: Stack( - children: [ - /// Expanding rounded rect that grows in height as user swipes up - Positioned.fill( - child: _buildSwipeableArrowBg(), - ), + /// Lose state of child objects when index changes, this will re-run all the animated switcher and the arrow anim + key: ValueKey(_wonderIndex), + child: Stack( + children: [ + /// Expanding rounded rect that grows in height as user swipes up + Positioned.fill( + child: _buildSwipeableArrowBg(), + ), - /// Arrow Btn that fades in and out - _AnimatedArrowButton(onTap: _showDetailsPage, semanticTitle: currentWonder.title), - ], + /// Arrow Btn that fades in and out + _AnimatedArrowButton(onTap: _showDetailsPage, semanticTitle: currentWonder.title), + ], + ), ), ), - ), - Gap($styles.insets.md), - ], + Gap($styles.insets.md), + ], + ), ), ), ), @@ -306,7 +316,7 @@ class _HomeScreenState extends State with SingleTickerProviderStateM return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) { return IgnorePointer( child: FractionallySizedBox( - heightFactor: .5, + heightFactor: .6, child: Container( decoration: BoxDecoration( gradient: LinearGradient( @@ -314,7 +324,7 @@ class _HomeScreenState extends State with SingleTickerProviderStateM end: Alignment.bottomCenter, colors: [ fgColor.withOpacity(0), - fgColor.withOpacity(fgColor.opacity * .75 + (isPointerDown ? .05 : 0) + swipeAmt * .20), + fgColor.withOpacity(.5 + fgColor.opacity * .25 + (isPointerDown ? .05 : 0) + swipeAmt * .20), ], stops: const [0, 1], ), diff --git a/lib/ui/wonder_illustrations/common/wonder_title_text.dart b/lib/ui/wonder_illustrations/common/wonder_title_text.dart index e07e796f..6737cdd6 100644 --- a/lib/ui/wonder_illustrations/common/wonder_title_text.dart +++ b/lib/ui/wonder_illustrations/common/wonder_title_text.dart @@ -40,12 +40,15 @@ class WonderTitleText extends StatelessWidget { ); } - List shadows = enableShadows ? $styles.shadows.text : []; - return RichText( - textAlign: TextAlign.center, - text: TextSpan( - style: textStyle.copyWith(shadows: shadows), - children: pieces.map(buildTextSpan).toList(), + List shadows = enableShadows ? $styles.shadows.textSoft : []; + return Hero( + tag: 'wonderTitle-$title', + child: RichText( + textAlign: TextAlign.center, + text: TextSpan( + style: textStyle.copyWith(shadows: shadows), + children: pieces.map(buildTextSpan).toList(), + ), ), ); }