Skip to content

Commit

Permalink
fix: task picture scaling
Browse files Browse the repository at this point in the history
  • Loading branch information
damian-molinski committed Sep 25, 2024
1 parent 8981f16 commit 62d50c6
Showing 1 changed file with 30 additions and 7 deletions.
37 changes: 30 additions & 7 deletions catalyst_voices/lib/pages/account/creation/task_picture.dart
Original file line number Diff line number Diff line change
Expand Up @@ -46,21 +46,45 @@ class TaskKeychainPicture extends StatelessWidget {
}

class TaskPicture extends StatelessWidget {
final Size preferredSize;
final Widget child;

// Original size is 125 but we want to have it scale with overall picture
static const _childSizeFactor = 125 / 354;

const TaskPicture({
super.key,
// Original asset sizes. "Magic number" from figma.
this.preferredSize = const Size(354, 340),
required this.child,
});

@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topRight,
children: [
CatalystImage.asset(VoicesAssets.images.taskIllustration.path),
child,
],
return LayoutBuilder(
builder: (context, constraints) {
final size = constraints
.constrainSizeAndAttemptToPreserveAspectRatio(preferredSize);
final childSize = Size.square(size.width * _childSizeFactor);

return SizedBox.fromSize(
size: size,
child: Stack(
alignment: Alignment.topRight,
children: [
CatalystImage.asset(
VoicesAssets.images.taskIllustration.path,
width: size.width,
height: size.height,
),
ConstrainedBox(
constraints: BoxConstraints.tight(childSize),
child: child,
),
],
),
);
},
);
}
}
Expand All @@ -87,7 +111,6 @@ class TaskPictureIconBox extends StatelessWidget {
return IconTheme(
data: iconThemeData,
child: Container(
constraints: BoxConstraints.tight(const Size.square(125)),
decoration: BoxDecoration(
color: backgroundColor,
shape: BoxShape.circle,
Expand Down

0 comments on commit 62d50c6

Please sign in to comment.