Tweak layout for home page. Add title, remove page indicator, reduce bottom padding

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

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,
+                  width: size, height: size, child: Text('0$current', style: textStyle, textAlign: TextAlign.right)),
-                  height: size,
-                  child: Text('0$current',
-                      style: textStyle.copyWith(shadows: $styles.shadows.text), 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),
                   ),
                 ),
               ),

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,

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<HomeScreen> 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,13 +152,16 @@ class _HomeScreenState extends State<HomeScreen> 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(
+                  key: ObjectKey(currentWonder),
+                  child: IgnorePointer(
+                    ignoringSemantics: false,
                     child: OverflowBox(
                       child: Column(
                         mainAxisSize: MainAxisSize.min,
@@ -168,14 +172,13 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                           /// Title Content
                           LightText(
                             child: MergeSemantics(
+                              child: Transform.translate(
+                                offset: Offset(0, 30),
                                 child: Column(
                                   children: [
-                                /// Page indicator
+                                    WonderTitleText(currentWonder, enableShadows: true),
-                                IgnorePointer(
-                                  child: DiagonalTextPageIndicator(current: _wonderIndex + 1, total: _numWonders),
-                                ),
-                                Gap($styles.insets.sm),
 
+                                    //Gap($styles.insets.sm),
                                     AppPageIndicator(
                                       count: _numWonders,
                                       controller: _pageController,
@@ -184,11 +187,17 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                                       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
@@ -218,6 +227,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                     ),
                   ),
                 ),
+              ),
 
               /// Menu Btn
               TopLeft(
@@ -306,7 +316,7 @@ class _HomeScreenState extends State<HomeScreen> 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<HomeScreen> 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],
               ),

lib/ui/wonder_illustrations/common/wonder_title_text.dart

@@ -40,13 +40,16 @@ class WonderTitleText extends StatelessWidget {
       );
     }
 
-    List<Shadow> shadows = enableShadows ? $styles.shadows.text : [];
+    List<Shadow> shadows = enableShadows ? $styles.shadows.textSoft : [];
-    return RichText(
+    return Hero(
+      tag: 'wonderTitle-$title',
+      child: RichText(
         textAlign: TextAlign.center,
         text: TextSpan(
           style: textStyle.copyWith(shadows: shadows),
           children: pieces.map(buildTextSpan).toList(),
         ),
+      ),
     );
   }
 }