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

Merge pull request #16 from gskinnerTeam/feature-add-homepage-title

Browse Source 
Tweak layout for home page
This commit is contained in:
Shawn 2022-09-07 15:23:33 -06:00 committed by GitHub
commit 9c3422a853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/styles/styles.dart
View File

@ -134,6 +134,9 @@ class _Insets {
@immutable @immutable
class _Shadows { class _Shadows {
final textSoft = [
Shadow(color: Colors.black.withOpacity(.25), offset: Offset(0, 2), blurRadius: 4),
];
final text = [ final text = [
Shadow(color: Colors.black.withOpacity(.6), offset: Offset(0, 2), blurRadius: 2), Shadow(color: Colors.black.withOpacity(.6), offset: Offset(0, 2), blurRadius: 2),
]; ];

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

@ -5,7 +5,7 @@ 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);
final int current; final int current;
final int total; final int total;
static const double _fontSize = 32; static const double _fontSize = 26;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -21,10 +21,7 @@ class DiagonalTextPageIndicator extends StatelessWidget {
child: Transform.translate( child: Transform.translate(
offset: Offset(-_fontSize * .7, 0), offset: Offset(-_fontSize * .7, 0),
child: SizedBox( 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( ClipPath(
@ -38,7 +35,7 @@ class DiagonalTextPageIndicator extends StatelessWidget {
opacity: .5, opacity: .5,
child: Text( child: Text(
'0$total', '0$total',
style: textStyle.copyWith(shadows: $styles.shadows.textStrong), style: textStyle, //.copyWith(shadows: $styles.shadows.textStrong),
), ),
), ),
), ),

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

@ -14,6 +14,8 @@ class _TitleText extends StatelessWidget {
children: [ children: [
Gap($styles.insets.md), Gap($styles.insets.md),
Gap(30), Gap(30),
/// Sub-title row
SeparatedRow( SeparatedRow(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm), padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
separatorBuilder: () => Gap($styles.insets.sm), separatorBuilder: () => Gap($styles.insets.sm),
@ -39,14 +41,23 @@ class _TitleText extends StatelessWidget {
], ],
), ),
Gap($styles.insets.md), 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), Gap($styles.insets.xs),
/// Region
Text( Text(
data.regionTitle.toUpperCase(), data.regionTitle.toUpperCase(),
style: $styles.text.title1, style: $styles.text.title1,
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
Gap($styles.insets.md), Gap($styles.insets.md),
/// Compass divider
ExcludeSemantics( ExcludeSemantics(
child: Padding( child: Padding(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md), padding: EdgeInsets.symmetric(horizontal: $styles.insets.md),
@ -61,6 +72,8 @@ class _TitleText extends StatelessWidget {
), ),
), ),
Gap($styles.insets.sm), Gap($styles.insets.sm),
/// Date
Text( Text(
StringUtils.supplant( StringUtils.supplant(
$strings.titleLabelDate, $strings.titleLabelDate,

105
lib/ui/screens/home/wonders_home_screen.dart
View File

@ -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/animated_clouds.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration.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_illustration_config.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart';
part '_vertical_swipe_controller.dart'; part '_vertical_swipe_controller.dart';
part 'widgets/_animated_arrow_button.dart'; part 'widgets/_animated_arrow_button.dart';
@ -143,7 +144,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
Stack(children: [ Stack(children: [
/// Foreground gradient-1, gets darker when swiping up /// Foreground gradient-1, gets darker when swiping up
BottomCenter( BottomCenter(
child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.5)), child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.65)),
), ),
/// Foreground decorators /// Foreground decorators
@ -151,69 +152,71 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
/// Foreground gradient-2, gets darker when swiping up /// Foreground gradient-2, gets darker when swiping up
BottomCenter( BottomCenter(
child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.5)), child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(1)),
), ),
/// Floating controls / UI /// Floating controls / UI
AnimatedSwitcher( AnimatedSwitcher(
duration: $styles.times.fast, duration: $styles.times.fast,
child: RepaintBoundary( child: RepaintBoundary(
child: OverflowBox( key: ObjectKey(currentWonder),
child: Column( child: IgnorePointer(
mainAxisSize: MainAxisSize.min, ignoringSemantics: false,
children: [ child: OverflowBox(
SizedBox(width: double.infinity), child: Column(
const Spacer(), mainAxisSize: MainAxisSize.min,
children: [
SizedBox(width: double.infinity),
const Spacer(),
/// Title Content /// Title Content
LightText( LightText(
child: MergeSemantics( child: MergeSemantics(
child: Column( child: Transform.translate(
children: [ offset: Offset(0, 30),
/// Page indicator child: Column(
IgnorePointer( children: [
child: DiagonalTextPageIndicator(current: _wonderIndex + 1, total: _numWonders), WonderTitleText(currentWonder, enableShadows: true),
Gap($styles.insets.xs),
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,
),
],
), ),
), ),
),
Gap($styles.insets.xs),
/// Animated arrow and background /// Animated arrow and background
/// Wrap in a container that is full-width to make it easier to find for screen readers /// Wrap in a container that is full-width to make it easier to find for screen readers
MergeSemantics( MergeSemantics(
child: Container( child: Container(
width: double.infinity, width: double.infinity,
alignment: Alignment.center, alignment: Alignment.center,
/// Lose state of child objects when index changes, this will re-run all the animated switcher and the arrow anim /// Lose state of child objects when index changes, this will re-run all the animated switcher and the arrow anim
key: ValueKey(_wonderIndex), key: ValueKey(_wonderIndex),
child: Stack( child: Stack(
children: [ children: [
/// Expanding rounded rect that grows in height as user swipes up /// Expanding rounded rect that grows in height as user swipes up
Positioned.fill( Positioned.fill(
child: _buildSwipeableArrowBg(), child: _buildSwipeableArrowBg(),
), ),
/// Arrow Btn that fades in and out /// Arrow Btn that fades in and out
_AnimatedArrowButton(onTap: _showDetailsPage, semanticTitle: currentWonder.title), _AnimatedArrowButton(onTap: _showDetailsPage, semanticTitle: currentWonder.title),
], ],
),
), ),
), ),
), Gap($styles.insets.md),
Gap($styles.insets.md), ],
], ),
), ),
), ),
), ),
@ -306,7 +309,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) { return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
return IgnorePointer( return IgnorePointer(
child: FractionallySizedBox( child: FractionallySizedBox(
heightFactor: .5, heightFactor: .6,
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
@ -314,7 +317,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
colors: [ colors: [
fgColor.withOpacity(0), 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], stops: const [0, 1],
), ),

17
lib/ui/wonder_illustrations/common/wonder_title_text.dart
View File

@ -17,7 +17,7 @@ class WonderTitleText extends StatelessWidget {
); );
bool smallText = [WonderType.christRedeemer, WonderType.colosseum].contains(data.type); bool smallText = [WonderType.christRedeemer, WonderType.colosseum].contains(data.type);
if (smallText) { if (smallText) {
textStyle = textStyle.copyWith(fontSize: 48); textStyle = textStyle.copyWith(fontSize: 56);
} }
// First, get a list like: ['the\n', 'great wall'] // First, get a list like: ['the\n', 'great wall']
@ -40,12 +40,15 @@ class WonderTitleText extends StatelessWidget {
); );
} }
List<Shadow> shadows = enableShadows ? $styles.shadows.text : []; List<Shadow> shadows = enableShadows ? $styles.shadows.textSoft : [];
return RichText( return Hero(
textAlign: TextAlign.center, tag: 'wonderTitle-$title',
text: TextSpan( child: RichText(
style: textStyle.copyWith(shadows: shadows), textAlign: TextAlign.center,
children: pieces.map(buildTextSpan).toList(), text: TextSpan(
style: textStyle.copyWith(shadows: shadows),
children: pieces.map(buildTextSpan).toList(),
),
), ),
); );
} }