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

Polish wonder illustration layouts for mobile compatability

Browse Source 
Reduce scale and positioning amongst mobile view constraints, test across all. Fix Taj Pool offset with heightfactor value (seems to remain attached).
This commit is contained in:
Jared Bell 2022-11-30 11:55:00 -07:00
parent 17e4318718
commit 437411a40d
8 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/ui/wonder_illustrations/chichen_itza_illustration.dart
View File

@ -39,7 +39,7 @@ class ChichenItzaIllustration extends StatelessWidget {
enableHero: true, enableHero: true,
heightFactor: .4, heightFactor: .4,
minHeight: 200, minHeight: 200,
fractionalOffset: Offset(.55, config.shortMode ? -.1 : -.35), fractionalOffset: Offset(.55, config.shortMode ? .2 : -.35),
), ),
]; ];
} }
@ -48,11 +48,11 @@ class ChichenItzaIllustration extends StatelessWidget {
// We want to size to the shortest side // We want to size to the shortest side
return [ return [
Transform.translate( Transform.translate(
offset: Offset(0, config.shortMode ? 40 : -30), offset: Offset(0, config.shortMode ? 70 : -30),
child: IllustrationPiece( child: IllustrationPiece(
fileName: 'chichen.png', fileName: 'chichen.png',
heightFactor: .45, heightFactor: .4,
minHeight: 300, minHeight: 180,
zoomAmt: -.1, zoomAmt: -.1,
enableHero: true, enableHero: true,
), ),

2
lib/ui/wonder_illustrations/christ_redeemer_illustration.dart
View File

@ -31,7 +31,7 @@ class ChristRedeemerIllustration extends StatelessWidget {
color: Color(0xffFAE5C8), color: Color(0xffFAE5C8),
flipX: false, flipX: false,
opacity: anim.drive(Tween(begin: 0, end: .8)), opacity: anim.drive(Tween(begin: 0, end: .8)),
scale: config.shortMode ? 4 : 1.15, scale: config.shortMode ? 3.5 : 1.15,
), ),
), ),
IllustrationPiece( IllustrationPiece(

2
lib/ui/wonder_illustrations/colosseum_illustration.dart
View File

@ -31,7 +31,7 @@ class ColosseumIllustration extends StatelessWidget {
ImagePaths.roller1, ImagePaths.roller1,
color: Colors.white, color: Colors.white,
opacity: anim.drive(Tween(begin: 0, end: .75)), opacity: anim.drive(Tween(begin: 0, end: .75)),
scale: config.shortMode ? 4 : 1, scale: config.shortMode ? 3 : 1,
), ),
), ),
IllustrationPiece( IllustrationPiece(

12
lib/ui/wonder_illustrations/great_wall_illustration.dart
View File

@ -39,9 +39,9 @@ class GreatWallIllustration extends StatelessWidget {
fileName: 'sun.png', fileName: 'sun.png',
initialOffset: Offset(0, 50), initialOffset: Offset(0, 50),
enableHero: true, enableHero: true,
heightFactor: config.shortMode ? .05 : .25, heightFactor: config.shortMode ? .07 : .25,
minHeight: 150, minHeight: 120,
offset: config.shortMode ? Offset(-40, context.heightPx * -.06) : Offset(-75, context.heightPx * -.3), offset: config.shortMode ? Offset(-40, context.heightPx * -.06) : Offset(-65, context.heightPx * -.3),
), ),
]; ];
} }
@ -50,11 +50,11 @@ class GreatWallIllustration extends StatelessWidget {
return [ return [
IllustrationPiece( IllustrationPiece(
fileName: 'great-wall.png', fileName: 'great-wall.png',
heightFactor: .65, heightFactor: config.shortMode ? .45 : .65,
minHeight: 400, minHeight: 250,
zoomAmt: .05, zoomAmt: .05,
enableHero: true, enableHero: true,
fractionalOffset: Offset(0, config.shortMode ? 0: -.1), fractionalOffset: Offset(0, config.shortMode ? .15 : -.15),
), ),
]; ];
} }

6
lib/ui/wonder_illustrations/machu_picchu_illustration.dart
View File

@ -32,7 +32,7 @@ class MachuPicchuIllustration extends StatelessWidget {
flipX: false, flipX: false,
color: Color(0xff1E736D), color: Color(0xff1E736D),
opacity: anim.drive(Tween(begin: 0, end: .5)), opacity: anim.drive(Tween(begin: 0, end: .5)),
scale: config.shortMode ? 4 : 1, scale: config.shortMode ? 3 : 1,
), ),
), ),
IllustrationPiece( IllustrationPiece(
@ -50,10 +50,10 @@ class MachuPicchuIllustration extends StatelessWidget {
IllustrationPiece( IllustrationPiece(
fileName: 'machu-picchu.png', fileName: 'machu-picchu.png',
heightFactor: .65, heightFactor: .65,
minHeight: 500, minHeight: 230,
zoomAmt: config.shortMode ? .1 : -1, zoomAmt: config.shortMode ? .1 : -1,
enableHero: true, enableHero: true,
fractionalOffset: Offset(config.shortMode ? 0 : -.05, config.shortMode ? 0.02 : -.12), fractionalOffset: Offset(config.shortMode ? 0 : -.05, config.shortMode ? 0.12 : -.12),
), ),
]; ];

3
lib/ui/wonder_illustrations/petra_illustration.dart
View File

@ -54,8 +54,9 @@ class PetraIllustration extends StatelessWidget {
fileName: 'petra.png', fileName: 'petra.png',
heightFactor: .65, heightFactor: .65,
minHeight: 500, minHeight: 500,
zoomAmt: config.shortMode ? -0.05 : -1, zoomAmt: config.shortMode ? -0.1 : -1,
enableHero: true, enableHero: true,
fractionalOffset: Offset(0, config.shortMode ? .025 : 0),
), ),
), ),
]; ];

4
lib/ui/wonder_illustrations/pyramids_giza_illustration.dart
View File

@ -42,7 +42,7 @@ class PyramidsGizaIllustration extends StatelessWidget {
enableHero: true, enableHero: true,
heightFactor: .15, heightFactor: .15,
minHeight: 100, minHeight: 100,
offset: config.shortMode ? Offset(100, context.heightPx * -.06) : Offset(150, context.heightPx * -.3), offset: config.shortMode ? Offset(120, context.heightPx * -.05) : Offset(120, context.heightPx * -.35),
zoomAmt: .05, zoomAmt: .05,
), ),
]; ];
@ -56,7 +56,7 @@ class PyramidsGizaIllustration extends StatelessWidget {
heightFactor: .5, heightFactor: .5,
minHeight: 300, minHeight: 300,
zoomAmt: config.shortMode ? -.2 : -2, zoomAmt: config.shortMode ? -.2 : -2,
fractionalOffset: Offset(0, config.shortMode ? .1 : -.05), fractionalOffset: Offset(config.shortMode ? .015 : 0, config.shortMode ? .17 : -.15),
) )
]; ];
} }

10
lib/ui/wonder_illustrations/taj_mahal_illustration.dart
View File

@ -35,7 +35,7 @@ class TajMahalIllustration extends StatelessWidget {
flipY: true, flipY: true,
opacity: anim.drive(Tween(begin: 0, end: .7)), opacity: anim.drive(Tween(begin: 0, end: .7)),
color: bgColor, color: bgColor,
scale: config.shortMode ? 4 : 1.15, scale: config.shortMode ? 3 : 1.15,
), ),
), ),
// Sun // Sun
@ -45,7 +45,7 @@ class TajMahalIllustration extends StatelessWidget {
enableHero: true, enableHero: true,
heightFactor: .3, heightFactor: .3,
minHeight: 140, minHeight: 140,
offset: config.shortMode ? Offset(-100, context.heightPx * -.05) : Offset(-220, context.heightPx * -.34), offset: config.shortMode ? Offset(-100, context.heightPx * -.02) : Offset(-150, context.heightPx * -.34),
), ),
]; ];
} }
@ -53,7 +53,7 @@ class TajMahalIllustration extends StatelessWidget {
List<Widget> _buildMg(BuildContext context, Animation<double> anim) { List<Widget> _buildMg(BuildContext context, Animation<double> anim) {
return [ return [
LayoutBuilder(builder: (_, constraints) { LayoutBuilder(builder: (_, constraints) {
const double minHeight = 500, heightFactor = .6, poolScale = 1; const double minHeight = 230, heightFactor = .6, poolScale = 1;
return Stack( return Stack(
children: [ children: [
IllustrationPiece( IllustrationPiece(
@ -62,11 +62,11 @@ class TajMahalIllustration extends StatelessWidget {
minHeight: minHeight, minHeight: minHeight,
enableHero: true, enableHero: true,
zoomAmt: .05, zoomAmt: .05,
fractionalOffset: Offset(0, config.shortMode ? 0 : -.15), fractionalOffset: Offset(0, config.shortMode ? .12 : -.15),
top: config.shortMode top: config.shortMode
? null ? null
: (_) => FractionalTranslation( : (_) => FractionalTranslation(
translation: Offset(0, 0.73), translation: Offset(0, heightFactor),
child: IllustrationPiece( child: IllustrationPiece(
fileName: 'pool.png', fileName: 'pool.png',
heightFactor: heightFactor * poolScale, heightFactor: heightFactor * poolScale,