-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [MDS-377] Create avatar widget (#22)
* feat: [MDS-377] Avatar progress * feat: [MDS-377] Create avatar widget * feat: [MDS-377] Finalize MoonAvatar story * chore: update .gitignore
- Loading branch information
Showing
21 changed files
with
716 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import 'package:example/src/storybook/common/options.dart'; | ||
| import 'package:example/src/storybook/common/widgets/text_divider.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| class AvatarStory extends Story { | ||
| AvatarStory() | ||
| : super( | ||
| name: "Avatar", | ||
| builder: (context) { | ||
| final avatarSizesKnob = context.knobs.options( | ||
| label: "avatarSize", | ||
| description: "Avatar size variants.", | ||
| initial: MoonAvatarSize.md, | ||
| options: const [ | ||
| Option(label: "xs", value: MoonAvatarSize.xs), | ||
| Option(label: "sm", value: MoonAvatarSize.sm), | ||
| Option(label: "md", value: MoonAvatarSize.md), | ||
| Option(label: "lg", value: MoonAvatarSize.lg), | ||
| Option(label: "xl", value: MoonAvatarSize.xl), | ||
| Option(label: "x2l", value: MoonAvatarSize.x2l), | ||
| ], | ||
| ); | ||
|
|
||
| final customLabelTextKnob = context.knobs.text( | ||
| label: "Custom label text", | ||
| initial: "MD", | ||
| ); | ||
|
|
||
| final avatarBackgroundColorKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for avatar background.", | ||
| initial: 5, // bulma | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[avatarBackgroundColorKnob]; | ||
|
|
||
| final borderRadiusKnob = context.knobs.sliderInt( | ||
| max: 32, | ||
| initial: 8, | ||
| label: "borderRadius", | ||
| description: "Border radius for the avatar.", | ||
| ); | ||
|
|
||
| final showBadgeKnob = context.knobs.boolean( | ||
| label: "showBadge", | ||
| description: "Show avatar badge.", | ||
| initial: true, | ||
| ); | ||
|
|
||
| final avatarBadgeAlignmentKnob = context.knobs.options( | ||
| label: "badgeAlignment", | ||
| description: "Avatar badge alignment.", | ||
| initial: MoonBadgeAlignment.bottomRight, | ||
| options: const [ | ||
| Option(label: "topLeft", value: MoonBadgeAlignment.topLeft), | ||
| Option(label: "topRight", value: MoonBadgeAlignment.topRight), | ||
| Option(label: "bottomLeft", value: MoonBadgeAlignment.bottomLeft), | ||
| Option(label: "bottomRight", value: MoonBadgeAlignment.bottomRight), | ||
| ], | ||
| ); | ||
|
|
||
| final badgeColorKnob = context.knobs.options( | ||
| label: "badgeColor", | ||
| description: "MoonColors variants for the avatar badge.", | ||
| initial: 18, // roshi100 | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final badgeColor = colorTable(context)[badgeColorKnob]; | ||
|
|
||
| return Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| const TextDivider(text: "Customisable avatar"), | ||
| const SizedBox(height: 32), | ||
| MoonAvatar( | ||
| avatarSize: avatarSizesKnob, | ||
| borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), | ||
| backgroundColor: backgroundColor, | ||
| showBadge: showBadgeKnob, | ||
| badgeColor: badgeColor, | ||
| badgeAlignment: avatarBadgeAlignmentKnob, | ||
| child: Padding( | ||
| padding: const EdgeInsets.only(top: 1.0), | ||
| child: Text(customLabelTextKnob), | ||
| ), | ||
| ), | ||
| const SizedBox(height: 40), | ||
| const TextDivider(text: "Preset avatar with picture background"), | ||
| const SizedBox(height: 32), | ||
| MoonAvatar( | ||
| avatarSize: avatarSizesKnob, | ||
| backgroundColor: backgroundColor, | ||
| showBadge: showBadgeKnob, | ||
| badgeColor: badgeColor, | ||
| badgeAlignment: avatarBadgeAlignmentKnob, | ||
| backgroundImage: const AssetImage("images/placeholder-640x359.png"), | ||
| ), | ||
| const SizedBox(height: 64), | ||
| ], | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -19,3 +19,5 @@ dev_dependencies: | |
| storybook_flutter: ^0.12.0 | ||
| flutter: | ||
| uses-material-design: true | ||
| assets: | ||
| - assets/images/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/borders.dart'; | ||
| import 'package:moon_design/src/theme/sizes.dart'; | ||
| import 'package:moon_design/src/theme/text_styles.dart'; | ||
|
|
||
| @immutable | ||
| class MoonAvatarSizes extends ThemeExtension<MoonAvatarSizes> with DiagnosticableTreeMixin { | ||
| static final _badgeToAvatarRatio = MoonSizes.sizes.x3s / MoonSizes.sizes.x2l; | ||
| static final _badgeMarginValueToAvatarRatio = MoonSizes.sizes.x5s / MoonSizes.sizes.x2l; | ||
|
|
||
| static final xs = MoonAvatarSizes( | ||
| avatarSizeValue: MoonSizes.sizes.xs, | ||
| badgeSizeValue: MoonSizes.sizes.xs * _badgeToAvatarRatio, | ||
| badgeMarginValue: MoonSizes.sizes.xs * _badgeMarginValueToAvatarRatio, | ||
| borderRadius: MoonBorders.borders.interactiveXs, | ||
| textStyle: MoonTextStyles.heading.text10, | ||
| ); | ||
|
|
||
| static final sm = MoonAvatarSizes( | ||
| avatarSizeValue: MoonSizes.sizes.sm, | ||
| badgeSizeValue: MoonSizes.sizes.sm * _badgeToAvatarRatio, | ||
| badgeMarginValue: MoonSizes.sizes.sm * _badgeMarginValueToAvatarRatio, | ||
| borderRadius: MoonBorders.borders.interactiveSm, | ||
| textStyle: MoonTextStyles.heading.text12, | ||
| ); | ||
|
|
||
| static final md = MoonAvatarSizes( | ||
| avatarSizeValue: MoonSizes.sizes.md, | ||
| badgeSizeValue: MoonSizes.sizes.md * _badgeToAvatarRatio, | ||
| badgeMarginValue: MoonSizes.sizes.md * _badgeMarginValueToAvatarRatio, | ||
| borderRadius: MoonBorders.borders.interactiveSm, | ||
| textStyle: MoonTextStyles.heading.text14, | ||
| ); | ||
|
|
||
| static final lg = MoonAvatarSizes( | ||
| avatarSizeValue: MoonSizes.sizes.lg, | ||
| badgeSizeValue: MoonSizes.sizes.lg * _badgeToAvatarRatio, | ||
| badgeMarginValue: MoonSizes.sizes.lg * _badgeMarginValueToAvatarRatio, | ||
| borderRadius: MoonBorders.borders.interactiveSm, | ||
| textStyle: MoonTextStyles.heading.text16, | ||
| ); | ||
|
|
||
| static final xl = MoonAvatarSizes( | ||
| avatarSizeValue: MoonSizes.sizes.xl, | ||
| badgeSizeValue: MoonSizes.sizes.xl * _badgeToAvatarRatio, | ||
| badgeMarginValue: MoonSizes.sizes.xl * _badgeMarginValueToAvatarRatio, | ||
| borderRadius: MoonBorders.borders.interactiveMd, | ||
| textStyle: MoonTextStyles.heading.text16, | ||
| ); | ||
|
|
||
| static final x2l = MoonAvatarSizes( | ||
| avatarSizeValue: MoonSizes.sizes.x2l, | ||
| badgeSizeValue: MoonSizes.sizes.x2l * _badgeToAvatarRatio, | ||
| badgeMarginValue: MoonSizes.sizes.x2l * _badgeMarginValueToAvatarRatio, | ||
| borderRadius: MoonBorders.borders.interactiveMd, | ||
| textStyle: MoonTextStyles.heading.text20, | ||
| ); | ||
|
|
||
| /// Avatar size value. | ||
| final double avatarSizeValue; | ||
|
|
||
| /// Avatar size value. | ||
| final double badgeSizeValue; | ||
|
|
||
| /// Avatar size value. | ||
| final double badgeMarginValue; | ||
|
|
||
| /// Avatar border radius. | ||
| final BorderRadius borderRadius; | ||
|
|
||
| /// Avatar text style. | ||
| final TextStyle textStyle; | ||
|
|
||
| const MoonAvatarSizes({ | ||
| required this.avatarSizeValue, | ||
| required this.badgeSizeValue, | ||
| required this.badgeMarginValue, | ||
| required this.borderRadius, | ||
| required this.textStyle, | ||
| }); | ||
|
|
||
| @override | ||
| MoonAvatarSizes copyWith({ | ||
| double? avatarSizeValue, | ||
| double? badgeSizeValue, | ||
| double? badgeMarginValue, | ||
| BorderRadius? borderRadius, | ||
| TextStyle? textStyle, | ||
| }) { | ||
| return MoonAvatarSizes( | ||
| avatarSizeValue: avatarSizeValue ?? this.avatarSizeValue, | ||
| badgeSizeValue: badgeSizeValue ?? this.badgeSizeValue, | ||
| badgeMarginValue: badgeMarginValue ?? this.badgeMarginValue, | ||
| borderRadius: borderRadius ?? this.borderRadius, | ||
| textStyle: textStyle ?? this.textStyle, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonAvatarSizes lerp(ThemeExtension<MoonAvatarSizes>? other, double t) { | ||
| if (other is! MoonAvatarSizes) return this; | ||
|
|
||
| return MoonAvatarSizes( | ||
| avatarSizeValue: lerpDouble(avatarSizeValue, other.avatarSizeValue, t)!, | ||
| badgeSizeValue: lerpDouble(badgeSizeValue, other.badgeSizeValue, t)!, | ||
| badgeMarginValue: lerpDouble(badgeMarginValue, other.badgeMarginValue, t)!, | ||
| borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, | ||
| textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonAvatarSizes")) | ||
| ..add(DoubleProperty("avatarSizeValue", avatarSizeValue)) | ||
| ..add(DoubleProperty("badgeSizeValue", badgeSizeValue)) | ||
| ..add(DoubleProperty("badgeMarginValue", badgeMarginValue)) | ||
| ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius)) | ||
| ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle)); | ||
| } | ||
| } |
Oops, something went wrong.