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

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

View File

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

View File

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