From 87f8b72f3d8f5042370e4ecbacfda4b335fac96d Mon Sep 17 00:00:00 2001
From: Harry Sild <46851868+Kypsis@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:41:36 +0300
Subject: [PATCH] fix: [MDS-509] Fix Avatar clipping with uneven height and
width combinations (#150)
---
.../lib/src/storybook/stories/authcode.dart | 199 +++++++++---------
example/lib/src/storybook/stories/avatar.dart | 4 +-
example/web/index.html | 1 +
lib/src/widgets/avatar/avatar_clipper.dart | 4 +-
4 files changed, 106 insertions(+), 102 deletions(-)
diff --git a/example/lib/src/storybook/stories/authcode.dart b/example/lib/src/storybook/stories/authcode.dart
index 7e783852..575d44ad 100644
--- a/example/lib/src/storybook/stories/authcode.dart
+++ b/example/lib/src/storybook/stories/authcode.dart
@@ -139,104 +139,109 @@ class AuthCodeStory extends Story {
return StatefulBuilder(
builder: (context, setState) {
- return Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- const SizedBox(height: 64),
- const TextDivider(text: "Disabled MoonAuthCode"),
- const SizedBox(height: 32),
- MoonAuthCode(
- enableInputFill: true,
- authInputFieldCount: 4,
- mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
- borderRadius:
- borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
- selectedFillColor: selectedFillColor,
- activeFillColor: activeFillColor,
- inactiveFillColor: inactiveFillColor,
- selectedBorderColor: selectedBorderColor,
- activeBorderColor: activeBorderColor,
- inactiveBorderColor: inactiveBorderColor,
- enabled: enableKnob,
- gap: gapKnob?.toDouble(),
- authFieldShape: shapeKnob,
- obscureText: obscuringKnob,
- obscuringCharacter: '﹡',
- peekWhenObscuring: peekWhenObscuringKnob,
- validator: (String? value) => null,
- errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
+ return Center(
+ child: SingleChildScrollView(
+ physics: const NeverScrollableScrollPhysics(),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ const SizedBox(height: 64),
+ const TextDivider(text: "Disabled MoonAuthCode"),
+ const SizedBox(height: 32),
+ MoonAuthCode(
+ enableInputFill: true,
+ authInputFieldCount: 4,
+ mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
+ borderRadius:
+ borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+ selectedFillColor: selectedFillColor,
+ activeFillColor: activeFillColor,
+ inactiveFillColor: inactiveFillColor,
+ selectedBorderColor: selectedBorderColor,
+ activeBorderColor: activeBorderColor,
+ inactiveBorderColor: inactiveBorderColor,
+ enabled: enableKnob,
+ gap: gapKnob?.toDouble(),
+ authFieldShape: shapeKnob,
+ obscureText: obscuringKnob,
+ obscuringCharacter: '﹡',
+ peekWhenObscuring: peekWhenObscuringKnob,
+ validator: (String? value) => null,
+ errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
+ ),
+ const SizedBox(height: 32),
+ const TextDivider(text: "Active MoonAuthCode"),
+ const SizedBox(height: 32),
+ MoonAuthCode(
+ autoFocus: true,
+ enableInputFill: true,
+ mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
+ borderRadius:
+ borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+ selectedFillColor: selectedFillColor,
+ activeFillColor: activeFillColor,
+ inactiveFillColor: inactiveFillColor,
+ selectedBorderColor: selectedBorderColor,
+ activeBorderColor: activeBorderColor,
+ inactiveBorderColor: inactiveBorderColor,
+ gap: gapKnob?.toDouble(),
+ authFieldShape: shapeKnob,
+ obscureText: obscuringKnob,
+ obscuringCharacter: '﹡',
+ peekWhenObscuring: peekWhenObscuringKnob,
+ validator: (String? value) => null,
+ errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
+ ),
+ const SizedBox(height: 32),
+ const TextDivider(text: "Error MoonAuthCode"),
+ const SizedBox(height: 32),
+ SizedBox(
+ height: 95,
+ child: MoonAuthCode(
+ enableInputFill: true,
+ authInputFieldCount: 4,
+ mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
+ borderRadius:
+ borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+ errorStreamController: errorStreamController,
+ selectedFillColor: selectedFillColor,
+ activeFillColor: activeFillColor,
+ inactiveFillColor: inactiveFillColor,
+ selectedBorderColor: selectedBorderColor,
+ activeBorderColor: activeBorderColor,
+ inactiveBorderColor: inactiveBorderColor,
+ gap: gapKnob?.toDouble(),
+ authFieldShape: shapeKnob,
+ obscureText: obscuringKnob,
+ obscuringCharacter: '﹡',
+ peekWhenObscuring: peekWhenObscuringKnob,
+ onCompleted: (pin) {
+ if (pin != '9921') {
+ errorStreamController.add(
+ errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation,
+ );
+ }
+ },
+ validator: (pin) {
+ if (pin?.length == 4 && pin != '9921') {
+ return 'Invalid authentication code. Please try again.';
+ }
+ return null;
+ },
+ errorBuilder: (context, errorText) {
+ return Align(
+ child: Container(
+ padding: const EdgeInsets.only(top: 8),
+ child: Text(errorText ?? ''),
+ ),
+ );
+ },
+ ),
+ ),
+ const SizedBox(height: 64),
+ ],
),
- const SizedBox(height: 32),
- const TextDivider(text: "Active MoonAuthCode"),
- const SizedBox(height: 32),
- MoonAuthCode(
- autoFocus: true,
- enableInputFill: true,
- mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
- borderRadius:
- borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
- selectedFillColor: selectedFillColor,
- activeFillColor: activeFillColor,
- inactiveFillColor: inactiveFillColor,
- selectedBorderColor: selectedBorderColor,
- activeBorderColor: activeBorderColor,
- inactiveBorderColor: inactiveBorderColor,
- gap: gapKnob?.toDouble(),
- authFieldShape: shapeKnob,
- obscureText: obscuringKnob,
- obscuringCharacter: '﹡',
- peekWhenObscuring: peekWhenObscuringKnob,
- validator: (String? value) => null,
- errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
- ),
- const SizedBox(height: 32),
- const TextDivider(text: "Error MoonAuthCode"),
- const SizedBox(height: 32),
- SizedBox(
- height: 95,
- child: MoonAuthCode(
- enableInputFill: true,
- authInputFieldCount: 4,
- mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
- borderRadius:
- borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
- errorStreamController: errorStreamController,
- selectedFillColor: selectedFillColor,
- activeFillColor: activeFillColor,
- inactiveFillColor: inactiveFillColor,
- selectedBorderColor: selectedBorderColor,
- activeBorderColor: activeBorderColor,
- inactiveBorderColor: inactiveBorderColor,
- gap: gapKnob?.toDouble(),
- authFieldShape: shapeKnob,
- obscureText: obscuringKnob,
- obscuringCharacter: '﹡',
- peekWhenObscuring: peekWhenObscuringKnob,
- onCompleted: (pin) {
- if (pin != '9921') {
- errorStreamController.add(
- errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation,
- );
- }
- },
- validator: (pin) {
- if (pin?.length == 4 && pin != '9921') {
- return 'Invalid authentication code. Please try again.';
- }
- return null;
- },
- errorBuilder: (context, errorText) {
- return Align(
- child: Container(
- padding: const EdgeInsets.only(top: 8),
- child: Text(errorText ?? ''),
- ),
- );
- },
- ),
- ),
- const SizedBox(height: 64),
- ],
+ ),
);
},
);
diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart
index fbda6826..1c780ced 100644
--- a/example/lib/src/storybook/stories/avatar.dart
+++ b/example/lib/src/storybook/stories/avatar.dart
@@ -136,9 +136,7 @@ class AvatarStory extends Story {
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
- backgroundImage: const AssetImage(
- "assets/images/placeholder-640x359.png",
- ),
+ backgroundImage: const AssetImage("assets/images/placeholder-640x359.png"),
),
const SizedBox(height: 64),
],
diff --git a/example/web/index.html b/example/web/index.html
index 73f3dc02..e142eba7 100644
--- a/example/web/index.html
+++ b/example/web/index.html
@@ -19,6 +19,7 @@
+
diff --git a/lib/src/widgets/avatar/avatar_clipper.dart b/lib/src/widgets/avatar/avatar_clipper.dart
index 6301fb8e..983204c2 100644
--- a/lib/src/widgets/avatar/avatar_clipper.dart
+++ b/lib/src/widgets/avatar/avatar_clipper.dart
@@ -92,7 +92,7 @@ class AvatarClipper extends CustomClipper {
return Path()
..addOval(
Rect.fromCircle(
- center: Offset(0 + badgeRadius, width - badgeRadius),
+ center: Offset(0 + badgeRadius, height - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
@@ -100,7 +100,7 @@ class AvatarClipper extends CustomClipper {
return Path()
..addOval(
Rect.fromCircle(
- center: Offset(width - badgeRadius, width - badgeRadius),
+ center: Offset(width - badgeRadius, height - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);