Tweak layout for home page. Add title, remove page indicator, reduce bottom padding
This commit is contained in:
Shawn
parent
240b7f05c0
commit
3ae6806b38
@ -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),
|
||||
];
|
||||
|
||||
@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,69 +152,78 @@ 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(
|
||||
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<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],
|
||||
),
|
||||
|
||||
@ -40,12 +40,15 @@ class WonderTitleText extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
List<Shadow> shadows = enableShadows ? $styles.shadows.text : [];
|
||||
return RichText(
|
||||
textAlign: TextAlign.center,
|
||||
text: TextSpan(
|
||||
style: textStyle.copyWith(shadows: shadows),
|
||||
children: pieces.map(buildTextSpan).toList(),
|
||||
List<Shadow> 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(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user