Skip to content

Commit

Permalink
fix: [MDS-509] Fix Avatar clipping with uneven height and width combi…
Browse files Browse the repository at this point in the history 
…nations (#150)
  • Loading branch information
@Kypsis
Kypsis committed Apr 24, 2023
1 parent 2876f68 commit 87f8b72
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 102 deletions.
199 changes: 102 additions & 97 deletions example/lib/src/storybook/stories/authcode.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
],
),
);
},
);
Expand Down
4 changes: 1 addition & 3 deletions example/lib/src/storybook/stories/avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
],
Expand Down
1 change: 1 addition & 0 deletions example/web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Moon Design for Flutter.">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
Expand Down
4 changes: 2 additions & 2 deletions lib/src/widgets/avatar/avatar_clipper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,15 +92,15 @@ class AvatarClipper extends CustomClipper<Path> {
return Path()
..addOval(
Rect.fromCircle(
center: Offset(0 + badgeRadius, width - badgeRadius),
center: Offset(0 + badgeRadius, height - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
case MoonBadgeAlignment.bottomRight:
return Path()
..addOval(
Rect.fromCircle(
center: Offset(width - badgeRadius, width - badgeRadius),
center: Offset(width - badgeRadius, height - badgeRadius),
radius: badgeRadius + badgeMarginValue,
),
);
Expand Down

0 comments on commit 87f8b72

Please sign in to comment.