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

Merge pull request #62 from gskinnerTeam/ui-polish-1

Browse Source 
UI polish 1
This commit is contained in:
Shawn 2022-12-22 13:31:17 -07:00 committed by GitHub
commit 527fcebce1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart
View File

@ -51,8 +51,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool shortMode = context.heightPx < 800; bool shortMode = context.heightPx <= 800;
final double bottomHeight = shortMode ? 240 : 340; final double bottomHeight = context.heightPx / 2.75; // Prev 340, dynamic seems to work better
// Allow objects to become wider as the screen becomes tall, this allows // Allow objects to become wider as the screen becomes tall, this allows
// them to grow taller as well, filling the available space better. // them to grow taller as well, filling the available space better.
double itemHeight = (context.heightPx - 200 - bottomHeight).clamp(250, 400); double itemHeight = (context.heightPx - 200 - bottomHeight).clamp(250, 400);
@ -137,7 +137,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
} }
OverflowBox _buildBgCircle(double height) { OverflowBox _buildBgCircle(double height) {
const double size = 1500; final double size = 2000;
return OverflowBox( return OverflowBox(
maxWidth: size, maxWidth: size,
maxHeight: size, maxHeight: size,
@ -146,7 +146,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(0.8), color: $styles.colors.offWhite.withOpacity(0.8),
borderRadius: BorderRadius.vertical(top: Radius.circular(size * .45)), borderRadius: BorderRadius.vertical(top: Radius.circular(size)),
), ),
), ),
), ),

7
lib/ui/screens/artifact/artifact_carousel/widgets/_collapsing_carousel_item.dart
View File

@ -23,8 +23,8 @@ class _CollapsingCarouselItem extends StatelessWidget {
// Calculate offset, this will be subtracted from the bottom padding moving the element downwards // Calculate offset, this will be subtracted from the bottom padding moving the element downwards
double vtOffset = 0; double vtOffset = 0;
final tallHeight = width * 1.5; final tallHeight = width * 1.5;
if (indexOffset == 1) vtOffset = width * .4; if (indexOffset == 1) vtOffset = width * .5;
if (indexOffset == 2) vtOffset = width * .8; if (indexOffset == 2) vtOffset = width * .825;
if (indexOffset > 2) vtOffset = width; if (indexOffset > 2) vtOffset = width;
final content = AnimatedOpacity( final content = AnimatedOpacity(
@ -32,13 +32,14 @@ class _CollapsingCarouselItem extends StatelessWidget {
opacity: indexOffset.abs() <= 2 ? 1 : 0, opacity: indexOffset.abs() <= 2 ? 1 : 0,
child: _AnimatedTranslate( child: _AnimatedTranslate(
duration: $styles.times.fast, duration: $styles.times.fast,
offset: Offset(0, -tallHeight * .2 + vtOffset), offset: Offset(0, -tallHeight * .25 + vtOffset),
child: Center( child: Center(
child: AnimatedContainer( child: AnimatedContainer(
duration: $styles.times.fast, duration: $styles.times.fast,
// Center item is portrait, the others are square // Center item is portrait, the others are square
height: indexOffset == 0 ? tallHeight : width, height: indexOffset == 0 ? tallHeight : width,
width: width, width: width,
padding: indexOffset == 0 ? EdgeInsets.all(0) : EdgeInsets.all(30),
child: child, child: child,
), ),
), ),