From 6e56792625c51c231eec37fa9f21319d334951ce Mon Sep 17 00:00:00 2001 From: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com> Date: Wed, 9 Aug 2023 21:36:05 +0300 Subject: [PATCH] fix: [MDS-631] Components API changes (#237) --- .../common/widgets/text_divider.dart | 33 +- .../lib/src/storybook/stories/accordion.dart | 168 +++----- example/lib/src/storybook/stories/alert.dart | 74 ++-- .../lib/src/storybook/stories/authcode.dart | 70 ++- example/lib/src/storybook/stories/avatar.dart | 23 +- .../src/storybook/stories/bottom_sheet.dart | 12 +- example/lib/src/storybook/stories/button.dart | 88 ++-- .../lib/src/storybook/stories/carousel.dart | 219 +++++----- .../lib/src/storybook/stories/checkbox.dart | 39 +- example/lib/src/storybook/stories/chip.dart | 86 ++-- .../storybook/stories/circular_loader.dart | 30 +- .../storybook/stories/circular_progress.dart | 32 +- .../src/storybook/stories/dot_indicator.dart | 43 +- example/lib/src/storybook/stories/drawer.dart | 51 +-- example/lib/src/storybook/stories/icons.dart | 43 +- .../src/storybook/stories/linear_loader.dart | 30 +- .../storybook/stories/linear_progress.dart | 32 +- .../lib/src/storybook/stories/menu_item.dart | 403 +++++++++--------- example/lib/src/storybook/stories/modal.dart | 49 +-- .../lib/src/storybook/stories/popover.dart | 131 +++--- example/lib/src/storybook/stories/radio.dart | 128 +++--- .../storybook/stories/segmented_control.dart | 47 +- example/lib/src/storybook/stories/switch.dart | 124 +++--- .../lib/src/storybook/stories/tab_bar.dart | 40 +- example/lib/src/storybook/stories/tag.dart | 66 +-- .../lib/src/storybook/stories/text_area.dart | 121 +++--- .../lib/src/storybook/stories/text_input.dart | 221 +++++----- example/lib/src/storybook/stories/toast.dart | 82 ++-- .../lib/src/storybook/stories/tooltip.dart | 93 ++-- example/lib/src/storybook/storybook.dart | 12 +- lib/src/theme/accordion/accordion_colors.dart | 76 ++-- lib/src/theme/accordion/accordion_theme.dart | 18 +- lib/src/theme/chip/chip_sizes.dart | 8 +- lib/src/theme/tag/tag_sizes.dart | 4 +- lib/src/utils/measure_size.dart | 2 +- lib/src/widgets/accordion/accordion.dart | 151 +++---- lib/src/widgets/alert/alert.dart | 13 +- lib/src/widgets/authcode/authcode.dart | 46 +- lib/src/widgets/avatar/avatar.dart | 3 +- lib/src/widgets/avatar/avatar_clipper.dart | 6 +- .../widgets/bottom_sheet/bottom_sheet.dart | 45 +- .../bottom_sheet/modal_bottom_sheet.dart | 22 +- .../utils/scroll_to_top_status_bar.dart | 11 +- lib/src/widgets/buttons/button.dart | 26 +- lib/src/widgets/buttons/filled_button.dart | 15 +- lib/src/widgets/buttons/outlined_button.dart | 10 - lib/src/widgets/buttons/text_button.dart | 20 +- lib/src/widgets/carousel/carousel.dart | 87 ++-- lib/src/widgets/checkbox/checkbox.dart | 10 +- .../widgets/checkbox/checkbox_painter.dart | 55 ++- lib/src/widgets/chips/chip.dart | 30 +- lib/src/widgets/common/base_control.dart | 141 +++--- .../widgets/common/effects/focus_effect.dart | 8 +- .../painters/pulse_effect_painter.dart | 11 +- .../widgets/common/effects/pulse_effect.dart | 5 +- .../widgets/dot_indicator/dot_indicator.dart | 4 +- lib/src/widgets/loaders/circular_loader.dart | 1 - lib/src/widgets/loaders/linear_loader.dart | 1 - lib/src/widgets/menu_item/menu_item.dart | 1 + lib/src/widgets/modal/modal.dart | 8 +- lib/src/widgets/popover/popover.dart | 29 +- .../widgets/progress/circular_progress.dart | 1 - lib/src/widgets/progress/linear_progress.dart | 1 - lib/src/widgets/radio/radio.dart | 3 + lib/src/widgets/radio/radio_painter.dart | 2 + .../segmented_control/segmented_control.dart | 11 +- lib/src/widgets/switch/switch.dart | 21 +- lib/src/widgets/tab_bar/tab_bar.dart | 24 +- .../widgets/text_input/form_text_input.dart | 28 +- lib/src/widgets/tooltip/tooltip.dart | 20 +- 70 files changed, 1690 insertions(+), 1878 deletions(-) diff --git a/example/lib/src/storybook/common/widgets/text_divider.dart b/example/lib/src/storybook/common/widgets/text_divider.dart index 57d611ad..3f34e1ae 100644 --- a/example/lib/src/storybook/common/widgets/text_divider.dart +++ b/example/lib/src/storybook/common/widgets/text_divider.dart @@ -4,26 +4,37 @@ import 'package:moon_design/moon_design.dart'; class TextDivider extends StatelessWidget { final String text; + final double paddingTop; + final double paddingBottom; const TextDivider({ super.key, required this.text, + this.paddingTop = 40, + this.paddingBottom = 32, }); @override Widget build(BuildContext context) { - return Row( - children: [ - const Expanded(child: Divider()), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: Text( - text, - style: context.moonTypography?.body.text12.copyWith(color: context.moonColors?.trunks), + return Padding( + padding: EdgeInsets.only(top: paddingTop, bottom: paddingBottom), + child: Row( + children: [ + const Expanded( + child: Divider(), ), - ), - const Expanded(child: Divider()), - ], + Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: Text( + text, + style: context.moonTypography?.body.text12.copyWith(color: context.moonColors?.trunks), + ), + ), + const Expanded( + child: Divider(), + ), + ], + ), ); } } diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart index 919dfbce..82d84327 100644 --- a/example/lib/src/storybook/stories/accordion.dart +++ b/example/lib/src/storybook/stories/accordion.dart @@ -12,8 +12,8 @@ class AccordionStory extends Story { AccordionStory() : super( name: "Accordion", - builder: (context) { - final accordionSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final accordionSizeKnob = context.knobs.nullable.options( label: "accordionSize", description: "Size variants for MoonAccordion.", enabled: false, @@ -26,84 +26,62 @@ class AccordionStory extends Story { ], ); - final leadingColorsKnob = context.knobs.nullable.options( - label: "leadingColor", - description: "MoonColors variants for MoonAccordion leading slot.", + final textColorKnob = context.knobs.nullable.options( + label: "textColor", + description: "MoonColors variants for MoonAccordion header text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); - final leadingColor = colorTable(context)[leadingColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final expandedLeadingColorsKnob = context.knobs.nullable.options( - label: "expandedLeadingColor", - description: "MoonColors variants for expanded MoonAccordion leading slot.", + final expandedTextColorKnob = context.knobs.nullable.options( + label: "expandedTextColor", + description: "MoonColors variants for expanded MoonAccordion header text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); - final expandedLeadingColor = colorTable(context)[expandedLeadingColorsKnob ?? 40]; + final expandedTextColor = colorTable(context)[expandedTextColorKnob ?? 40]; - final titleColorsKnob = context.knobs.nullable.options( - label: "titleColor", - description: "MoonColors variants for MoonAccordion title slot.", + final contentTextColorKnob = context.knobs.nullable.options( + label: "Content text color", + description: "MoonColors variants for MoonAccordion content text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); - final titleColor = colorTable(context)[titleColorsKnob ?? 40]; + final contentTextColor = colorTable(context)[contentTextColorKnob ?? 40]; - final expandedTitleColorsKnob = context.knobs.nullable.options( - label: "expandedTitleColor", - description: "MoonColors variants for expanded MoonAccordion title slot.", + final iconColorKnob = context.knobs.nullable.options( + label: "iconColor", + description: "MoonColors variants for MoonAccordion icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); - final expandedTitleColor = colorTable(context)[expandedTitleColorsKnob ?? 40]; + final iconColor = colorTable(context)[iconColorKnob ?? 40]; - final trailingColorsKnob = context.knobs.nullable.options( - label: "trailingColor", - description: "MoonColors variants for MoonAccordion trailing slot.", + final expandedIconColorKnob = context.knobs.nullable.options( + label: "expandedIconColor", + description: "MoonColors variants for expanded MoonAccordion icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); - final trailingColor = colorTable(context)[trailingColorsKnob ?? 40]; + final expandedIconColor = colorTable(context)[expandedIconColorKnob ?? 40]; - final expandedTrailingColorsKnob = context.knobs.nullable.options( - label: "expandedTrailingColor", - description: "MoonColors variants for expanded MoonAccordion trailing slot.", - enabled: false, - initial: 0, - // piccolo - options: colorOptions, - ); - - final expandedTrailingColor = colorTable(context)[expandedTrailingColorsKnob ?? 40]; - - final contentTextColorsKnob = context.knobs.nullable.options( - label: "Content color", - description: "MoonColors variants for MoonAccordion content slot.", - enabled: false, - initial: 0, - // piccolo - options: colorOptions, - ); - - final contentTextColor = colorTable(context)[contentTextColorsKnob ?? 40]; - - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonAccordion background.", enabled: false, @@ -112,9 +90,9 @@ class AccordionStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final expandedBackgroundColorsKnob = context.knobs.nullable.options( + final expandedBackgroundColorKnob = context.knobs.nullable.options( label: "expandedBackgroundColor", description: "MoonColors variants for expanded MoonAccordion background.", enabled: false, @@ -123,9 +101,9 @@ class AccordionStory extends Story { options: colorOptions, ); - final expandedBackgroundColor = colorTable(context)[expandedBackgroundColorsKnob ?? 40]; + final expandedBackgroundColor = colorTable(context)[expandedBackgroundColorKnob ?? 40]; - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonAccordion border.", enabled: false, @@ -134,9 +112,9 @@ class AccordionStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; - final dividerColorsKnob = context.knobs.nullable.options( + final dividerColorKnob = context.knobs.nullable.options( label: "dividerColor", description: "MoonColors variants for expanded MoonAccordion divider.", enabled: false, @@ -145,7 +123,7 @@ class AccordionStory extends Story { options: colorOptions, ); - final dividerColor = colorTable(context)[dividerColorsKnob ?? 40]; + final dividerColor = colorTable(context)[dividerColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -172,30 +150,35 @@ class AccordionStory extends Story { initial: true, ); + const String contentText = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; + + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + return StatefulBuilder( builder: (context, setState) { return ListView( clipBehavior: Clip.none, + padding: const EdgeInsets.symmetric(vertical: 64), children: [ - const SizedBox(height: 64), - const TextDivider(text: "Grouped MoonAccordion"), - const SizedBox(height: 32), + const TextDivider( + text: "Grouped MoonAccordion", + paddingTop: 0, + ), MoonAccordion( identityValue: AccordionItems.first, groupIdentityValue: currentlyOpenAccordionItem, - accordionSize: accordionSizesKnob, - leadingColor: leadingColor, - expandedLeadingColor: expandedLeadingColor, - titleColor: titleColor, - expandedTitleColor: expandedTitleColor, - trailingColor: trailingColor, - expandedTrailingColor: expandedTrailingColor, + accordionSize: accordionSizeKnob, + textColor: textColor, + expandedTextColor: expandedTextColor, + iconColor: iconColor, + expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, dividerColor: dividerColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], @@ -205,7 +188,7 @@ class AccordionStory extends Story { title: const Text("Grouped MoonAccordion item #1"), children: [ Text( - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + contentText, style: TextStyle(color: contentTextColor), ), ], @@ -214,20 +197,16 @@ class AccordionStory extends Story { MoonAccordion( identityValue: AccordionItems.second, groupIdentityValue: currentlyOpenAccordionItem, - initiallyExpanded: true, - accordionSize: accordionSizesKnob, - leadingColor: leadingColor, - expandedLeadingColor: expandedLeadingColor, - titleColor: titleColor, - expandedTitleColor: expandedTitleColor, - trailingColor: trailingColor, - expandedTrailingColor: expandedTrailingColor, + accordionSize: accordionSizeKnob, + textColor: textColor, + expandedTextColor: expandedTextColor, + iconColor: iconColor, + expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, dividerColor: dividerColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], @@ -237,68 +216,59 @@ class AccordionStory extends Story { title: const Text("Grouped MoonAccordion item #2"), children: [ Text( - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + contentText, style: TextStyle(color: contentTextColor), ), ], ), - const SizedBox(height: 40), const TextDivider(text: "Ungrouped MoonAccordion with content outside"), - const SizedBox(height: 32), MoonAccordion( - accordionSize: accordionSizesKnob, + accordionSize: accordionSizeKnob, initiallyExpanded: true, hasContentOutside: true, - leadingColor: leadingColor, - expandedLeadingColor: expandedLeadingColor, - titleColor: titleColor, - expandedTitleColor: expandedTitleColor, - trailingColor: trailingColor, - expandedTrailingColor: expandedTrailingColor, + textColor: textColor, + expandedTextColor: expandedTextColor, + iconColor: iconColor, + expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, showBorder: showBorderKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.symmetric(vertical: 12), title: const Text("Ungrouped MoonAccordion item #1"), children: [ Text( - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + contentText, style: TextStyle(color: contentTextColor), ), ], ), const SizedBox(height: 8), MoonAccordion( - accordionSize: accordionSizesKnob, + accordionSize: accordionSizeKnob, hasContentOutside: true, - leadingColor: leadingColor, - expandedLeadingColor: expandedLeadingColor, - titleColor: titleColor, - expandedTitleColor: expandedTitleColor, - trailingColor: trailingColor, - expandedTrailingColor: expandedTrailingColor, + textColor: textColor, + expandedTextColor: expandedTextColor, + iconColor: iconColor, + expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, dividerColor: dividerColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, showBorder: showBorderKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.symmetric(vertical: 12), title: const Text("Ungrouped MoonAccordion item #2"), children: [ Text( - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + contentText, style: TextStyle(color: contentTextColor), ), ], ), - const SizedBox(height: 64), ], ); }, diff --git a/example/lib/src/storybook/stories/alert.dart b/example/lib/src/storybook/stories/alert.dart index a086d7b6..afbc2cfa 100644 --- a/example/lib/src/storybook/stories/alert.dart +++ b/example/lib/src/storybook/stories/alert.dart @@ -10,8 +10,8 @@ class AlertStory extends Story { AlertStory() : super( name: "Alert", - builder: (context) { - final leadingColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final leadingColorKnob = context.knobs.nullable.options( label: "Leading Color", description: "MoonColors variants for MoonAlert leading slot.", enabled: false, @@ -20,9 +20,9 @@ class AlertStory extends Story { options: colorOptions, ); - final leadingColor = colorTable(context)[leadingColorsKnob ?? 40]; + final leadingColor = colorTable(context)[leadingColorKnob ?? 40]; - final titleColorsKnob = context.knobs.nullable.options( + final titleColorKnob = context.knobs.nullable.options( label: "Title color", description: "MoonColors variants for MoonAlert title slot.", enabled: false, @@ -31,9 +31,9 @@ class AlertStory extends Story { options: colorOptions, ); - final titleColor = colorTable(context)[titleColorsKnob ?? 40]; + final titleColor = colorTable(context)[titleColorKnob ?? 40]; - final trailingColorsKnob = context.knobs.nullable.options( + final trailingColorKnob = context.knobs.nullable.options( label: "Trailing color", description: "MoonColors variants for MoonAlert trailing slot.", enabled: false, @@ -42,9 +42,9 @@ class AlertStory extends Story { options: colorOptions, ); - final trailingColor = colorTable(context)[trailingColorsKnob ?? 40]; + final trailingColor = colorTable(context)[trailingColorKnob ?? 40]; - final bodyColorsKnob = context.knobs.nullable.options( + final bodyColorKnob = context.knobs.nullable.options( label: "Body color", description: "MoonColors variants for MoonAlert body slot.", enabled: false, @@ -53,9 +53,9 @@ class AlertStory extends Story { options: colorOptions, ); - final bodyColor = colorTable(context)[bodyColorsKnob ?? 40]; + final bodyColor = colorTable(context)[bodyColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonAlert background.", enabled: false, @@ -64,10 +64,9 @@ class AlertStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonAlert border.", enabled: false, @@ -76,7 +75,7 @@ class AlertStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -113,25 +112,29 @@ class AlertStory extends Story { description: "onTrailingTap() is null.", ); + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + return Center( child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Base MoonAlert"), - const SizedBox(height: 32), + const TextDivider( + text: "Base MoonAlert", + paddingTop: 0, + ), StatefulBuilder( builder: (context, setState) { return Column( + mainAxisAlignment: MainAxisAlignment.center, children: [ MoonAlert( show: showAlert, showBorder: showBorderKnob, borderColor: borderColor, backgroundColor: backgroundColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, leading: showLeadingKnob ? MoonIcon( MoonIcons.frame_24, @@ -151,9 +154,7 @@ class AlertStory extends Story { trailing: showTrailingKnob ? MoonButton.icon( buttonSize: MoonButtonSize.xs, - borderRadius: borderRadiusKnob != null - ? BorderRadius.circular(borderRadiusKnob.toDouble()) - : null, + borderRadius: borderRadius, disabledOpacityValue: 1, icon: MoonIcon( MoonIcons.close_small_24, @@ -161,11 +162,7 @@ class AlertStory extends Story { size: 24, ), gap: 0, - onTap: showDisabledKnob - ? null - : () { - setState(() => showAlert = !showAlert); - }, + onTap: showDisabledKnob ? null : () => setState(() => showAlert = !showAlert), ) : null, body: showBodyKnob @@ -185,22 +182,17 @@ class AlertStory extends Story { MoonFilledButton( label: const Text("Show/Hide MoonAlert"), backgroundColor: context.moonColors!.piccolo, - onTap: () { - setState(() => showAlert = !showAlert); - }, + onTap: () => setState(() => showAlert = !showAlert), ), ], ); }, ), - const SizedBox(height: 40), const TextDivider(text: "Filled MoonAlert variant"), - const SizedBox(height: 32), MoonFilledAlert( show: true, color: context.moonColors!.chiChi100, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, leading: showLeadingKnob ? const MoonIcon(MoonIcons.alert_24) : null, title: const Text("Filled error MoonAlert"), body: showBodyKnob @@ -218,8 +210,7 @@ class AlertStory extends Story { MoonFilledAlert( show: true, color: context.moonColors!.krillin100, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, leading: showLeadingKnob ? const MoonIcon(MoonIcons.alarm_round_24) : null, title: const Text("Filled warning MoonAlert"), body: showBodyKnob @@ -233,14 +224,11 @@ class AlertStory extends Story { : null, onTrailingTap: () {}, ), - const SizedBox(height: 40), const TextDivider(text: "Outlined MoonAlert variant"), - const SizedBox(height: 32), MoonOutlinedAlert( show: true, color: context.moonColors!.roshi100, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, leading: showLeadingKnob ? const MoonIcon(MoonIcons.check_rounded_24) : null, title: const Text("Outlined success MoonAlert"), body: showBodyKnob @@ -258,8 +246,7 @@ class AlertStory extends Story { MoonOutlinedAlert( show: true, color: context.moonColors!.whis100, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, leading: showLeadingKnob ? const MoonIcon(MoonIcons.alert_24) : null, title: const Text('Outlined info MoonAlert'), body: showBodyKnob @@ -273,7 +260,6 @@ class AlertStory extends Story { : null, onTrailingTap: () {}, ), - const SizedBox(height: 64), ], ), ), diff --git a/example/lib/src/storybook/stories/authcode.dart b/example/lib/src/storybook/stories/authcode.dart index 311e18ef..2ae072fe 100644 --- a/example/lib/src/storybook/stories/authcode.dart +++ b/example/lib/src/storybook/stories/authcode.dart @@ -13,7 +13,7 @@ class AuthCodeStory extends Story { AuthCodeStory() : super( name: "AuthCode", - builder: (context) { + builder: (BuildContext context) { final mainAxisAlignmentKnob = context.knobs.nullable.options( label: "mainAxisAlignment", description: "Horizontal alignment of MoonAuthCode input fields.", @@ -41,7 +41,7 @@ class AuthCodeStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonAuthCode text.", enabled: false, @@ -50,9 +50,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final cursorColorsKnob = context.knobs.nullable.options( + final cursorColorKnob = context.knobs.nullable.options( label: "authFieldCursorColor", description: "MoonColors variants for MoonAuthCode cursor.", enabled: false, @@ -61,9 +61,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final cursorColor = colorTable(context)[cursorColorsKnob ?? 40]; + final cursorColor = colorTable(context)[cursorColorKnob ?? 40]; - final selectedFillColorsKnob = context.knobs.nullable.options( + final selectedFillColorKnob = context.knobs.nullable.options( label: "selectedFillColor", description: "MoonColors variants for selected MoonAuthCode input field.", enabled: false, @@ -72,9 +72,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final selectedFillColor = colorTable(context)[selectedFillColorsKnob ?? 40]; + final selectedFillColor = colorTable(context)[selectedFillColorKnob ?? 40]; - final activeFillColorsKnob = context.knobs.nullable.options( + final activeFillColorKnob = context.knobs.nullable.options( label: "activeFillColor", description: "MoonColors variants for active MoonAuthCode input fields.", enabled: false, @@ -83,9 +83,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final activeFillColor = colorTable(context)[activeFillColorsKnob ?? 40]; + final activeFillColor = colorTable(context)[activeFillColorKnob ?? 40]; - final inactiveFillColorsKnob = context.knobs.nullable.options( + final inactiveFillColorKnob = context.knobs.nullable.options( label: "inactiveFillColor", description: "MoonColors variants for inactive MoonAuthCode input fields.", enabled: false, @@ -94,9 +94,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final inactiveFillColor = colorTable(context)[inactiveFillColorsKnob ?? 40]; + final inactiveFillColor = colorTable(context)[inactiveFillColorKnob ?? 40]; - final selectedBorderColorsKnob = context.knobs.nullable.options( + final selectedBorderColorKnob = context.knobs.nullable.options( label: "selectedBorderColor", description: "MoonColors variants for selected MoonAuthCode input field border.", enabled: false, @@ -105,9 +105,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final selectedBorderColor = colorTable(context)[selectedBorderColorsKnob ?? 40]; + final selectedBorderColor = colorTable(context)[selectedBorderColorKnob ?? 40]; - final activeBorderColorsKnob = context.knobs.nullable.options( + final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for active MoonAuthCode input fields borders.", enabled: false, @@ -116,9 +116,9 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final activeBorderColor = colorTable(context)[activeBorderColorsKnob ?? 40]; + final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; - final inactiveBorderColorsKnob = context.knobs.nullable.options( + final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for inactive MoonAuthCode input fields borders.", enabled: false, @@ -127,7 +127,7 @@ class AuthCodeStory extends Story { options: colorOptions, ); - final inactiveBorderColor = colorTable(context)[inactiveBorderColorsKnob ?? 40]; + final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -165,24 +165,26 @@ class AuthCodeStory extends Story { description: "Show error with shake animation (ErrorAnimationType.shake).", ); + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + return StatefulBuilder( builder: (context, setState) { return Center( child: SingleChildScrollView( - physics: const NeverScrollableScrollPhysics(), + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Disabled MoonAuthCode"), - const SizedBox(height: 32), + const TextDivider( + text: "Disabled MoonAuthCode", + paddingTop: 0, + ), MoonAuthCode( enabled: enableKnob, enableInputFill: true, authInputFieldCount: 4, mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, textStyle: TextStyle(color: textColor), authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, @@ -198,15 +200,12 @@ class AuthCodeStory extends Story { 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, + borderRadius: borderRadius, textStyle: TextStyle(color: textColor), authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, @@ -222,17 +221,14 @@ class AuthCodeStory extends Story { 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, + borderRadius: borderRadius, errorStreamController: errorStreamController, textStyle: TextStyle(color: textColor), authFieldCursorColor: cursorColor, @@ -246,22 +242,23 @@ class AuthCodeStory extends Story { authFieldShape: shapeKnob, obscureText: obscuringKnob, peekWhenObscuring: peekWhenObscuringKnob, - onCompleted: (pin) { + onCompleted: (String pin) { if (pin != '9921') { errorStreamController.add( errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation, ); } }, - validator: (pin) { + validator: (String? pin) { if (pin?.length == 4 && pin != '9921') { return 'Invalid authentication code. Please try again.'; } + return null; }, - errorBuilder: (context, errorText) { + errorBuilder: (BuildContext context, String? errorText) { return Align( - child: Container( + child: Padding( padding: const EdgeInsets.only(top: 8), child: Text(errorText ?? ''), ), @@ -269,7 +266,6 @@ class AuthCodeStory extends Story { }, ), ), - const SizedBox(height: 64), ], ), ), diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart index 7bd0a55b..fa15c499 100644 --- a/example/lib/src/storybook/stories/avatar.dart +++ b/example/lib/src/storybook/stories/avatar.dart @@ -8,13 +8,13 @@ class AvatarStory extends Story { AvatarStory() : super( name: "Avatar", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "content", + label: "Content text", initial: "MD", ); - final avatarSizesKnob = context.knobs.nullable.options( + final avatarSizeKnob = context.knobs.nullable.options( label: "avatarSize", description: "Size variants for MoonAvatar.", enabled: false, @@ -105,15 +105,17 @@ class AvatarStory extends Story { initial: true, ); - return Center( + return Padding( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Customisable MoonAvatar"), - const SizedBox(height: 32), + const TextDivider( + text: "Customisable MoonAvatar", + paddingTop: 0, + ), MoonAvatar( - avatarSize: avatarSizesKnob, + avatarSize: avatarSizeKnob, badgeSize: badgeSizeKnob?.toDouble(), borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, badgeMarginValue: badgeMarginKnob?.toDouble(), @@ -129,11 +131,9 @@ class AvatarStory extends Story { ), ), ), - const SizedBox(height: 40), const TextDivider(text: "Preset MoonAvatar with image background"), - const SizedBox(height: 32), MoonAvatar( - avatarSize: avatarSizesKnob, + avatarSize: avatarSizeKnob, badgeSize: badgeSizeKnob?.toDouble(), borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, badgeMarginValue: badgeMarginKnob?.toDouble(), @@ -143,7 +143,6 @@ class AvatarStory extends Story { badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight, backgroundImage: const AssetImage("assets/images/placeholder-640x359.png"), ), - const SizedBox(height: 64), ], ), ); diff --git a/example/lib/src/storybook/stories/bottom_sheet.dart b/example/lib/src/storybook/stories/bottom_sheet.dart index 136fe26b..abb11d5e 100644 --- a/example/lib/src/storybook/stories/bottom_sheet.dart +++ b/example/lib/src/storybook/stories/bottom_sheet.dart @@ -7,8 +7,8 @@ class BottomSheetStory extends Story { BottomSheetStory() : super( name: "BottomSheet", - builder: (context) { - final backgroundColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonBottomSheet background.", enabled: false, @@ -17,9 +17,9 @@ class BottomSheetStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final barrierColorsKnob = context.knobs.nullable.options( + final barrierColorKnob = context.knobs.nullable.options( label: "barrierColor", description: "MoonColors variants for MoonBottomSheet barrier.", enabled: false, @@ -28,7 +28,7 @@ class BottomSheetStory extends Story { options: colorOptions, ); - final barrierColor = colorTable(context)[barrierColorsKnob ?? 40]; + final barrierColor = colorTable(context)[barrierColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -69,7 +69,7 @@ class BottomSheetStory extends Story { Container( height: 4, width: 40, - margin: const EdgeInsets.only(top: 8, bottom: 8), + margin: const EdgeInsets.symmetric(vertical: 8), decoration: ShapeDecoration( color: context.moonColors!.beerus, shape: const StadiumBorder(), diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart index dfbb32dc..8ae2e2ed 100644 --- a/example/lib/src/storybook/stories/button.dart +++ b/example/lib/src/storybook/stories/button.dart @@ -8,13 +8,13 @@ class ButtonStory extends Story { ButtonStory() : super( name: "Button", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "label text", + label: "Label text", initial: "MoonButton", ); - final buttonSizesKnob = context.knobs.nullable.options( + final buttonSizeKnob = context.knobs.nullable.options( label: "buttonSize", description: "Size variants for MoonButton.", enabled: false, @@ -28,7 +28,7 @@ class ButtonStory extends Story { ], ); - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for base MoonButton background.", enabled: false, @@ -37,9 +37,9 @@ class ButtonStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonButton border.", enabled: false, @@ -48,9 +48,9 @@ class ButtonStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonButton text.", enabled: false, @@ -59,7 +59,7 @@ class ButtonStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -75,11 +75,6 @@ class ButtonStory extends Story { initial: true, ); - final showTooltipKnob = context.knobs.boolean( - label: "showTooltip", - description: "Show MoonTooltip for MoonButton.", - ); - final showPulseEffectKnob = context.knobs.boolean( label: "showPulseEffect", description: "Show pulse animation.", @@ -112,7 +107,7 @@ class ButtonStory extends Story { description: "Set MoonButton to full width.", ); - final showDisabledKnob = context.knobs.boolean( + final isDisabledKnob = context.knobs.boolean( label: "Disabled", description: "onTap() or onLongPress() is null.", ); @@ -134,24 +129,25 @@ class ButtonStory extends Story { } } - final resolvedIconVariant = resolveIconVariant(buttonSizesKnob); + final IconData resolvedIconVariant = resolveIconVariant(buttonSizeKnob); + + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Base and MoonIcon MoonButton"), - const SizedBox(height: 32), + const TextDivider( + text: "Base and MoonIcon MoonButton", + paddingTop: 0, + ), MoonButton( - onTap: showDisabledKnob ? null : () {}, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + onTap: isDisabledKnob ? null : () {}, + borderRadius: borderRadius, showBorder: showBorderKnob, - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', - buttonSize: buttonSizesKnob, + buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, backgroundColor: backgroundColor, borderColor: borderColor, @@ -164,13 +160,10 @@ class ButtonStory extends Story { ), const SizedBox(height: 32), MoonButton.icon( - onTap: showDisabledKnob ? null : () {}, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + onTap: isDisabledKnob ? null : () {}, + borderRadius: borderRadius, showBorder: showBorderKnob, - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', - buttonSize: buttonSizesKnob, + buttonSize: buttonSizeKnob, backgroundColor: backgroundColor, iconColor: textColor, borderColor: borderColor, @@ -178,15 +171,11 @@ class ButtonStory extends Story { showPulseEffectJiggle: showPulseEffectJiggleKnob, icon: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, ), - const SizedBox(height: 40), const TextDivider(text: "MoonButton variants"), - const SizedBox(height: 32), MoonFilledButton( - onTap: showDisabledKnob ? null : () {}, - buttonSize: buttonSizesKnob, + onTap: isDisabledKnob ? null : () {}, + buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', showPulseEffect: showPulseEffectKnob, leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonFilledButton") : null, @@ -194,11 +183,9 @@ class ButtonStory extends Story { ), const SizedBox(height: 32), MoonOutlinedButton( - onTap: showDisabledKnob ? null : () {}, - buttonSize: buttonSizesKnob, + onTap: isDisabledKnob ? null : () {}, + buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', showPulseEffect: showPulseEffectKnob, borderColor: borderColor, leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, @@ -207,25 +194,19 @@ class ButtonStory extends Story { ), const SizedBox(height: 32), MoonTextButton( - onTap: showDisabledKnob ? null : () {}, - buttonSize: buttonSizesKnob, + onTap: isDisabledKnob ? null : () {}, + buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', showPulseEffect: showPulseEffectKnob, leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonTextButton") : null, trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null, ), - const SizedBox(height: 40), const TextDivider(text: "Custom MoonButtons with non-standard children"), - const SizedBox(height: 32), MoonButton( - onTap: showDisabledKnob ? null : () {}, + onTap: isDisabledKnob ? null : () {}, height: 40, padding: const EdgeInsets.symmetric(horizontal: 8), - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', showFocusEffect: false, decoration: const ShapeDecoration( image: DecorationImage( @@ -251,11 +232,9 @@ class ButtonStory extends Story { ), const SizedBox(height: 32), MoonButton( - onTap: showDisabledKnob ? null : () {}, + onTap: isDisabledKnob ? null : () {}, height: 72, padding: const EdgeInsets.symmetric(horizontal: 8), - showTooltip: showTooltipKnob, - tooltipMessage: 'This is MoonTooltip', showFocusEffect: false, decoration: ShapeDecorationWithPremultipliedAlpha( shadows: const [ @@ -287,7 +266,6 @@ class ButtonStory extends Story { ), ), ), - const SizedBox(height: 64), ], ), ), diff --git a/example/lib/src/storybook/stories/carousel.dart b/example/lib/src/storybook/stories/carousel.dart index aa88ef21..081452d6 100644 --- a/example/lib/src/storybook/stories/carousel.dart +++ b/example/lib/src/storybook/stories/carousel.dart @@ -10,7 +10,7 @@ class CarouselStory extends Story { CarouselStory() : super( name: "Carousel", - builder: (context) { + builder: (BuildContext context) { final itemExtentKnob = context.knobs.nullable.sliderInt( label: "itemExtent", description: "MoonCarousel item extent.", @@ -64,129 +64,132 @@ class CarouselStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - const TextDivider(text: "Customisable MoonCarousel"), - const SizedBox(height: 32), - SizedBox( - height: 114, - child: OverflowBox( - maxWidth: MediaQuery.of(context).size.width, - child: MoonCarousel( - velocityFactor: velocityFactorKnob ?? 0.5, - gap: gapKnob?.toDouble() ?? 8, - autoPlay: autoPlayKnob, - itemCount: 10, - itemExtent: itemExtentKnob?.toDouble() ?? 114, - isCentered: isCenteredKnob, - anchor: anchorKnob ?? 0.041, - loop: isLoopedKnob, - clampMaxExtent: clampMaxExtentKnob, - itemBuilder: (context, itemIndex, realIndex) => Container( - decoration: ShapeDecoration( - color: context.moonColors!.gohan, - shape: MoonSquircleBorder( - borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), + child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( + children: [ + const TextDivider( + text: "Customisable MoonCarousel", + paddingTop: 0, + ), + SizedBox( + height: 114, + child: OverflowBox( + maxWidth: MediaQuery.of(context).size.width, + child: MoonCarousel( + velocityFactor: velocityFactorKnob ?? 0.5, + gap: gapKnob?.toDouble() ?? 8, + autoPlay: autoPlayKnob, + itemCount: 10, + itemExtent: itemExtentKnob?.toDouble() ?? 114, + isCentered: isCenteredKnob, + anchor: anchorKnob ?? 0.041, + loop: isLoopedKnob, + clampMaxExtent: clampMaxExtentKnob, + itemBuilder: (BuildContext context, int itemIndex, int realIndex) => Container( + decoration: ShapeDecoration( + color: context.moonColors!.gohan, + shape: MoonSquircleBorder( + borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), + ), + ), + child: Center( + child: Text("${itemIndex + 1}"), ), - ), - child: Center( - child: Text("${itemIndex + 1}"), ), ), ), ), - ), - const SizedBox(height: 40), - const TextDivider(text: "Premade MoonCarousel with extras"), - const SizedBox(height: 32), - StatefulBuilder( - builder: (context, setState) { - return Column( - children: [ - SizedBox( - height: 180, - child: OverflowBox( - maxWidth: MediaQuery.of(context).size.width, - child: Stack( - children: [ - MoonCarousel( - gap: 48, - controller: carouselController, - autoPlay: autoPlayKnob, - itemCount: 5, - itemExtent: MediaQuery.of(context).size.width - 64, - loop: isLoopedKnob, - onIndexChanged: (index) => setState(() => selectedDot = index), - itemBuilder: (context, itemIndex, realIndex) => Container( - decoration: ShapeDecoration( - color: context.moonColors!.gohan, - shape: MoonSquircleBorder( - borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), + const TextDivider(text: "Pre-made MoonCarousel with extras"), + StatefulBuilder( + builder: (context, setState) { + return Column( + children: [ + SizedBox( + height: 180, + child: OverflowBox( + maxWidth: MediaQuery.of(context).size.width, + child: Stack( + children: [ + MoonCarousel( + gap: 48, + controller: carouselController, + autoPlay: autoPlayKnob, + itemCount: 5, + itemExtent: MediaQuery.of(context).size.width - 64, + loop: isLoopedKnob, + onIndexChanged: (int index) => setState(() => selectedDot = index), + itemBuilder: (BuildContext context, int itemIndex, int realIndex) => Container( + decoration: ShapeDecoration( + color: context.moonColors!.gohan, + shape: MoonSquircleBorder( + borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), + ), + ), + child: Center( + child: Text("${itemIndex + 1}"), ), - ), - child: Center( - child: Text("${itemIndex + 1}"), ), ), - ), - Align( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - MoonButton.icon( - buttonSize: MoonButtonSize.sm, - showBorder: true, - icon: MoonIcon( - Directionality.of(context) == TextDirection.ltr - ? MoonIcons.chevron_left_small_24 - : MoonIcons.chevron_right_small_24, - ), - decoration: ShapeDecorationWithPremultipliedAlpha( - color: context.moonColors!.gohan, - shadows: context.moonShadows!.sm, - shape: MoonSquircleBorder( - borderRadius: BorderRadius.circular(8).squircleBorderRadius(context), + Align( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + MoonButton.icon( + buttonSize: MoonButtonSize.sm, + showBorder: true, + icon: MoonIcon( + Directionality.of(context) == TextDirection.ltr + ? MoonIcons.chevron_left_small_24 + : MoonIcons.chevron_right_small_24, ), + decoration: ShapeDecorationWithPremultipliedAlpha( + color: context.moonColors!.gohan, + shadows: context.moonShadows!.sm, + shape: MoonSquircleBorder( + borderRadius: BorderRadius.circular(8).squircleBorderRadius(context), + ), + ), + onTap: selectedDot == 0 ? null : () => carouselController.previousItem(), ), - onTap: selectedDot == 0 ? null : () => carouselController.previousItem(), - ), - MoonButton.icon( - buttonSize: MoonButtonSize.sm, - showBorder: true, - icon: MoonIcon( - Directionality.of(context) == TextDirection.ltr - ? MoonIcons.chevron_right_small_24 - : MoonIcons.chevron_left_small_24, - ), - decoration: ShapeDecorationWithPremultipliedAlpha( - color: context.moonColors!.gohan, - shadows: context.moonShadows!.sm, - shape: MoonSquircleBorder( - borderRadius: BorderRadius.circular(8).squircleBorderRadius(context), + MoonButton.icon( + buttonSize: MoonButtonSize.sm, + showBorder: true, + icon: MoonIcon( + Directionality.of(context) == TextDirection.ltr + ? MoonIcons.chevron_right_small_24 + : MoonIcons.chevron_left_small_24, + ), + decoration: ShapeDecorationWithPremultipliedAlpha( + color: context.moonColors!.gohan, + shadows: context.moonShadows!.sm, + shape: MoonSquircleBorder( + borderRadius: BorderRadius.circular(8).squircleBorderRadius(context), + ), ), + onTap: selectedDot == 4 ? null : () => carouselController.nextItem(), ), - onTap: selectedDot == 4 ? null : () => carouselController.nextItem(), - ), - ], + ], + ), ), ), - ), - ], + ], + ), ), ), - ), - const SizedBox(height: 16), - MoonDotIndicator(selectedDot: selectedDot, dotCount: 5) - ], - ); - }, - ), - const SizedBox(height: 64), - ], + const SizedBox(height: 16), + MoonDotIndicator( + selectedDot: selectedDot, + dotCount: 5, + ) + ], + ); + }, + ), + ], + ), ), ); }, diff --git a/example/lib/src/storybook/stories/checkbox.dart b/example/lib/src/storybook/stories/checkbox.dart index 18264946..6a76d666 100644 --- a/example/lib/src/storybook/stories/checkbox.dart +++ b/example/lib/src/storybook/stories/checkbox.dart @@ -11,8 +11,8 @@ class CheckboxStory extends Story { CheckboxStory() : super( name: "Checkbox", - builder: (context) { - final textColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonCheckbox with label text.", enabled: false, @@ -21,9 +21,9 @@ class CheckboxStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final checkColorsKnob = context.knobs.nullable.options( + final checkColorKnob = context.knobs.nullable.options( label: "checkColor", description: "MoonColors variants for MoonCheckbox icon.", enabled: false, @@ -32,9 +32,9 @@ class CheckboxStory extends Story { options: colorOptions, ); - final checkColor = colorTable(context)[checkColorsKnob ?? 40]; + final checkColor = colorTable(context)[checkColorKnob ?? 40]; - final activeColorsKnob = context.knobs.nullable.options( + final activeColorKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for checked MoonCheckbox.", enabled: false, @@ -43,9 +43,9 @@ class CheckboxStory extends Story { options: colorOptions, ); - final activeColor = colorTable(context)[activeColorsKnob ?? 40]; + final activeColor = colorTable(context)[activeColorKnob ?? 40]; - final inactiveColorsKnob = context.knobs.nullable.options( + final inactiveColorKnob = context.knobs.nullable.options( label: "inactiveColor", description: "MoonColors variants for unchecked MoonCheckbox.", enabled: false, @@ -54,9 +54,9 @@ class CheckboxStory extends Story { options: colorOptions, ); - final inactiveColor = colorTable(context)[inactiveColorsKnob ?? 40]; + final inactiveColor = colorTable(context)[inactiveColorKnob ?? 40]; - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonCheckbox border.", enabled: false, @@ -65,7 +65,7 @@ class CheckboxStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; final isTristate = context.knobs.boolean( label: "tristate", @@ -77,13 +77,15 @@ class CheckboxStory extends Story { description: "onChanged() is null.", ); - return Center( + return Padding( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Customisable MoonCheckbox"), - const SizedBox(height: 32), + const TextDivider( + text: "Customisable MoonCheckbox", + paddingTop: 0, + ), StatefulBuilder( builder: (context, setState) { return MoonCheckbox( @@ -93,13 +95,11 @@ class CheckboxStory extends Story { borderColor: borderColor, tristate: isTristate, value: value, - onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), + onChanged: isDisabled ? null : (bool? newValue) => setState(() => value = newValue), ); }, ), - const SizedBox(height: 40), const TextDivider(text: "MoonCheckbox with clickable text"), - const SizedBox(height: 32), StatefulBuilder( builder: (context, setState) { return MoonCheckbox.withLabel( @@ -111,11 +111,10 @@ class CheckboxStory extends Story { checkColor: checkColor, tristate: isTristate, value: value, - onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), + onChanged: isDisabled ? null : (bool? newValue) => setState(() => value = newValue), ); }, ), - const SizedBox(height: 64), ], ), ); diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart index 3770ddcf..5ca9f8af 100644 --- a/example/lib/src/storybook/stories/chip.dart +++ b/example/lib/src/storybook/stories/chip.dart @@ -8,13 +8,13 @@ class ChipStory extends Story { ChipStory() : super( name: "Chip", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "label text", + label: "Label text", initial: "MoonChip", ); - final chipSizesKnob = context.knobs.nullable.options( + final chipSizeKnob = context.knobs.nullable.options( label: "chipSize", description: "Size variants for MoonChip.", enabled: false, @@ -25,7 +25,18 @@ class ChipStory extends Story { ], ); - final activeColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( + label: "textColor", + description: "MoonColors variants for MoonChip text.", + enabled: false, + initial: 0, + // piccolo + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorKnob ?? 40]; + + final activeColorKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for active MoonChip.", enabled: false, @@ -34,9 +45,9 @@ class ChipStory extends Story { options: colorOptions, ); - final activeColor = colorTable(context)[activeColorsKnob ?? 40]; + final activeColor = colorTable(context)[activeColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonChip background.", enabled: false, @@ -45,9 +56,9 @@ class ChipStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final activeBackgroundColorsKnob = context.knobs.nullable.options( + final activeBackgroundColorKnob = context.knobs.nullable.options( label: "activeBackgroundColor", description: "MoonColors variants for active MoonChip background.", enabled: false, @@ -56,9 +67,9 @@ class ChipStory extends Story { options: colorOptions, ); - final activeBackgroundColor = colorTable(context)[activeBackgroundColorsKnob ?? 40]; + final activeBackgroundColor = colorTable(context)[activeBackgroundColorKnob ?? 40]; - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonChip border.", enabled: false, @@ -67,18 +78,7 @@ class ChipStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; - - final textColorsKnob = context.knobs.nullable.options( - label: "textColor", - description: "MoonColors variants for MoonChip text.", - enabled: false, - initial: 0, - // piccolo - options: colorOptions, - ); - - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -92,6 +92,7 @@ class ChipStory extends Story { label: "showBorder", description: "Show border when hovered, focused or isActive is true.", ); + final isActiveKnob = context.knobs.boolean( label: "isActive", description: "Whether MoonChip is active/selected.", @@ -114,16 +115,18 @@ class ChipStory extends Story { description: "Show widget in MoonChip trailing slot.", ); - final resolvedIconVariant = chipSizesKnob == MoonChipSize.sm ? MoonIcons.frame_16 : MoonIcons.frame_24; + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Default MoonChip"), - const SizedBox(height: 32), + const TextDivider( + text: "Default MoonChip", + paddingTop: 0, + ), MoonChip( activeColor: activeColor, borderColor: borderColor, @@ -131,33 +134,27 @@ class ChipStory extends Story { activeBackgroundColor: activeBackgroundColor, textColor: textColor, isActive: isActiveKnob, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, showBorder: showBorderKnob, - chipSize: chipSizesKnob, - leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, + chipSize: chipSizeKnob, + leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, - trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null, + trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null, ), - const SizedBox(height: 40), const TextDivider(text: "Text MoonChip"), - const SizedBox(height: 32), MoonChip.text( activeBackgroundColor: activeBackgroundColor, borderColor: borderColor, textColor: textColor, isActive: isActiveKnob, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, showBorder: showBorderKnob, - chipSize: chipSizesKnob, - leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, + chipSize: chipSizeKnob, + leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, - trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null, + trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null, ), - const SizedBox(height: 40), const TextDivider(text: "Preset MoonChip"), - const SizedBox(height: 32), MoonChip( isActive: isActiveKnob, activeColor: context.moonColors!.dodoria100, @@ -166,12 +163,11 @@ class ChipStory extends Story { textColor: context.moonColors!.goten, borderWidth: 2, showBorder: showBorderKnob, - chipSize: chipSizesKnob, - leading: showLeadingKnob ? MoonIcon(resolvedIconVariant) : null, + chipSize: chipSizeKnob, + leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, - trailing: showTrailingKnob ? MoonIcon(resolvedIconVariant) : null, + trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null, ), - const SizedBox(height: 64), ], ), ), diff --git a/example/lib/src/storybook/stories/circular_loader.dart b/example/lib/src/storybook/stories/circular_loader.dart index bb2e1695..e60666b1 100644 --- a/example/lib/src/storybook/stories/circular_loader.dart +++ b/example/lib/src/storybook/stories/circular_loader.dart @@ -7,8 +7,8 @@ class CircularLoaderStory extends Story { CircularLoaderStory() : super( name: "Loader/CircularLoader", - builder: (context) { - final loaderSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final circularLoaderSizeKnob = context.knobs.nullable.options( label: "circularLoaderSize", description: "Size variants for CircularLoader.", enabled: false, @@ -26,7 +26,8 @@ class CircularLoaderStory extends Story { label: "color", description: "MoonColors variants for CircularLoader color.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -36,7 +37,8 @@ class CircularLoaderStory extends Story { label: "backgroundColor", description: "MoonColors variants for CircularLoader background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -55,18 +57,14 @@ class CircularLoaderStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - MoonCircularLoader( - color: color, - backgroundColor: backgroundColor, - circularLoaderSize: loaderSizesKnob, - strokeCap: loaderStrokeCapKnob, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: MoonCircularLoader( + color: color, + backgroundColor: backgroundColor, + circularLoaderSize: circularLoaderSizeKnob, + strokeCap: loaderStrokeCapKnob, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/circular_progress.dart b/example/lib/src/storybook/stories/circular_progress.dart index 5086b28e..d58ee042 100644 --- a/example/lib/src/storybook/stories/circular_progress.dart +++ b/example/lib/src/storybook/stories/circular_progress.dart @@ -7,8 +7,8 @@ class CircularProgressStory extends Story { CircularProgressStory() : super( name: "Progress/CircularProgress", - builder: (context) { - final circularProgressSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final circularProgressSizeKnob = context.knobs.nullable.options( label: "circularProgressSize", description: "Size variants for CircularProgress.", enabled: false, @@ -26,7 +26,8 @@ class CircularProgressStory extends Story { label: "color", description: "MoonColors variants for CircularProgress color.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -36,7 +37,8 @@ class CircularProgressStory extends Story { label: "backgroundColor", description: "MoonColors variants for CircularProgress background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -61,19 +63,15 @@ class CircularProgressStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - MoonCircularProgress( - value: circularProgressValueKnob, - color: color, - backgroundColor: backgroundColor, - circularProgressSize: circularProgressSizesKnob, - strokeCap: circularProgressStrokeCapKnob, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: MoonCircularProgress( + value: circularProgressValueKnob, + color: color, + backgroundColor: backgroundColor, + circularProgressSize: circularProgressSizeKnob, + strokeCap: circularProgressStrokeCapKnob, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/dot_indicator.dart b/example/lib/src/storybook/stories/dot_indicator.dart index 9ef70454..9bc75c6b 100644 --- a/example/lib/src/storybook/stories/dot_indicator.dart +++ b/example/lib/src/storybook/stories/dot_indicator.dart @@ -9,8 +9,8 @@ class DotIndicatorStory extends Story { DotIndicatorStory() : super( name: "DotIndicator", - builder: (context) { - final selectedColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final selectedColorKnob = context.knobs.nullable.options( label: "selectedColor", description: "MoonColors variants for MoonDotIndicator selected dot.", enabled: false, @@ -19,9 +19,9 @@ class DotIndicatorStory extends Story { options: colorOptions, ); - final selectedColor = colorTable(context)[selectedColorsKnob ?? 40]; + final selectedColor = colorTable(context)[selectedColorKnob ?? 40]; - final unselectedColorsKnob = context.knobs.nullable.options( + final unselectedColorKnob = context.knobs.nullable.options( label: "unselectedColor", description: "MoonColors variants for MoonDotIndicator unselected dots.", enabled: false, @@ -30,7 +30,7 @@ class DotIndicatorStory extends Story { options: colorOptions, ); - final unselectedColor = colorTable(context)[unselectedColorsKnob ?? 40]; + final unselectedColor = colorTable(context)[unselectedColorKnob ?? 40]; final sizeKnob = context.knobs.nullable.sliderInt( label: "size", @@ -48,13 +48,13 @@ class DotIndicatorStory extends Story { max: 32, ); - return Center( - child: StatefulBuilder( - builder: (context, setState) { - return Column( + return StatefulBuilder( + builder: (context, setState) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), MoonDotIndicator( selectedDot: _selectedDot, dotCount: 4, @@ -69,38 +69,29 @@ class DotIndicatorStory extends Story { children: [ MoonFilledButton( label: const Text("1"), - onTap: () => setState(() { - _selectedDot = 0; - }), + onTap: () => setState(() => _selectedDot = 0), ), const SizedBox(width: 8), MoonFilledButton( label: const Text("2"), - onTap: () => setState(() { - _selectedDot = 1; - }), + onTap: () => setState(() => _selectedDot = 1), ), const SizedBox(width: 8), MoonFilledButton( label: const Text("3"), - onTap: () => setState(() { - _selectedDot = 2; - }), + onTap: () => setState(() => _selectedDot = 2), ), const SizedBox(width: 8), MoonFilledButton( label: const Text("4"), - onTap: () => setState(() { - _selectedDot = 3; - }), + onTap: () => setState(() => _selectedDot = 3), ), ], ), - const SizedBox(height: 64), ], - ); - }, - ), + ), + ); + }, ); }, ); diff --git a/example/lib/src/storybook/stories/drawer.dart b/example/lib/src/storybook/stories/drawer.dart index 664da0ff..70a2e539 100644 --- a/example/lib/src/storybook/stories/drawer.dart +++ b/example/lib/src/storybook/stories/drawer.dart @@ -7,26 +7,28 @@ class DrawerStory extends Story { DrawerStory() : super( name: "Drawer", - builder: (context) { - final backgroundColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonDrawer background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final barrierColorsKnob = context.knobs.nullable.options( + final barrierColorKnob = context.knobs.nullable.options( label: "barrierColor", description: "MoonColors variants for MoonDrawer barrier.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final barrierColor = colorTable(context)[barrierColorsKnob ?? 40]; + final barrierColor = colorTable(context)[barrierColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -51,47 +53,40 @@ class DrawerStory extends Story { drawerScrimColor: barrierColor, drawer: MoonDrawer( backgroundColor: backgroundColor, - barrierColor: barrierColorsKnob != null + barrierColor: barrierColorKnob != null ? barrierColor : context.moonTheme?.drawerTheme.colors.barrierColor ?? MoonColors.light.zeno, - borderRadius: BorderRadiusDirectional.only( - topEnd: Radius.circular(borderRadiusKnob?.toDouble() ?? 0), - bottomEnd: Radius.circular(borderRadiusKnob?.toDouble() ?? 0), + borderRadius: BorderRadiusDirectional.horizontal( + end: Radius.circular(borderRadiusKnob?.toDouble() ?? 0), ), width: drawerWidthKnob?.toDouble() ?? MediaQuery.of(context).size.width, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), const Text("MoonDrawer"), const SizedBox(height: 32), Builder( - builder: (context) { + builder: (BuildContext context) { return MoonFilledButton( label: const Text("Close"), onTap: () => Navigator.of(context).pop(), ); }, ), - const SizedBox(height: 64), ], ), ), body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - Builder( - builder: (context) { - return MoonFilledButton( - label: const Text("Tap me"), - onTap: () => Scaffold.of(context).openDrawer(), - ); - }, - ), - const SizedBox(height: 64), - ], + child: Builder( + builder: (BuildContext context) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: MoonFilledButton( + label: const Text("Tap me"), + onTap: () => Scaffold.of(context).openDrawer(), + ), + ); + }, ), ), ), diff --git a/example/lib/src/storybook/stories/icons.dart b/example/lib/src/storybook/stories/icons.dart index 79fb8808..49af4719 100644 --- a/example/lib/src/storybook/stories/icons.dart +++ b/example/lib/src/storybook/stories/icons.dart @@ -9,19 +9,16 @@ class IconsStory extends Story { IconsStory() : super( name: "Icons", - builder: (context) { + builder: (BuildContext context) { return CustomScrollView( slivers: [ - const SliverToBoxAdapter( - child: SizedBox(height: 24), - ), - _IconsGridWithTitle( - title: "MoonIcons", - iconsList: iconsList, - iconsNameList: iconsNameList, - ), - const SliverToBoxAdapter( - child: SizedBox(height: 24), + SliverPadding( + padding: const EdgeInsets.symmetric(vertical: 64), + sliver: _IconsGridWithTitle( + title: "MoonIcons", + iconsList: iconsList, + iconsNameList: iconsNameList, + ), ), ], ); @@ -44,19 +41,24 @@ class _IconsGridWithTitle extends StatelessWidget { Widget build(BuildContext context) { return MultiSliver( children: [ - SliverPadding( - padding: const EdgeInsets.only(top: 40, bottom: 16), - sliver: SliverToBoxAdapter( - child: TextDivider(text: title), + SliverToBoxAdapter( + child: TextDivider( + text: title, + paddingTop: 0, + paddingBottom: 0, ), ), SliverGrid.builder( itemCount: iconsList.length, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 8), - itemBuilder: (context, index) { + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 3, + crossAxisSpacing: 8, + mainAxisExtent: 104, + ), + itemBuilder: (BuildContext context, int index) { return Column( mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.end, children: [ if (iconsNameList[index].contains("16")) MoonIcon(iconsList[index], size: 16) @@ -67,7 +69,10 @@ class _IconsGridWithTitle extends StatelessWidget { const SizedBox(height: 20), Text( iconsNameList[index], - style: TextStyle(fontSize: 10, color: context.moonColors!.trunks), + style: TextStyle( + fontSize: 10, + color: context.moonColors!.trunks, + ), ), ], ); diff --git a/example/lib/src/storybook/stories/linear_loader.dart b/example/lib/src/storybook/stories/linear_loader.dart index 359008ce..38717652 100644 --- a/example/lib/src/storybook/stories/linear_loader.dart +++ b/example/lib/src/storybook/stories/linear_loader.dart @@ -7,8 +7,8 @@ class LinearLoaderStory extends Story { LinearLoaderStory() : super( name: "Loader/LinearLoader", - builder: (context) { - final loaderSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final linearLoaderSizeKnob = context.knobs.nullable.options( label: "linearLoaderSize", description: "Size variants for LinearLoader.", enabled: false, @@ -26,7 +26,8 @@ class LinearLoaderStory extends Story { label: "color", description: "MoonColors variants for LinearLoader color.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -36,7 +37,8 @@ class LinearLoaderStory extends Story { label: "backgroundColor", description: "MoonColors variants for LinearLoader background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -51,18 +53,14 @@ class LinearLoaderStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - MoonLinearLoader( - linearLoaderSize: loaderSizesKnob, - color: color, - backgroundColor: backgroundColor, - borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: MoonLinearLoader( + linearLoaderSize: linearLoaderSizeKnob, + color: color, + backgroundColor: backgroundColor, + borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/linear_progress.dart b/example/lib/src/storybook/stories/linear_progress.dart index 7d9dca7e..e6033dac 100644 --- a/example/lib/src/storybook/stories/linear_progress.dart +++ b/example/lib/src/storybook/stories/linear_progress.dart @@ -7,8 +7,8 @@ class LinearProgressStory extends Story { LinearProgressStory() : super( name: "Progress/LinearProgress", - builder: (context) { - final progressSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final progressSizeKnob = context.knobs.nullable.options( label: "linearProgressSize", description: "Size variants for LinearProgress.", enabled: false, @@ -26,7 +26,8 @@ class LinearProgressStory extends Story { label: "color", description: "MoonColors variants for LinearProgress color.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -36,7 +37,8 @@ class LinearProgressStory extends Story { label: "backgroundColor", description: "MoonColors variants for LinearProgress background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); @@ -57,19 +59,15 @@ class LinearProgressStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - MoonLinearProgress( - value: linearProgressValueKnob, - linearProgressSize: progressSizesKnob, - color: color, - backgroundColor: backgroundColor, - borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: MoonLinearProgress( + value: linearProgressValueKnob, + linearProgressSize: progressSizeKnob, + color: color, + backgroundColor: backgroundColor, + borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/menu_item.dart b/example/lib/src/storybook/stories/menu_item.dart index 0e9c2ee6..2932dd3f 100644 --- a/example/lib/src/storybook/stories/menu_item.dart +++ b/example/lib/src/storybook/stories/menu_item.dart @@ -15,8 +15,8 @@ class MenuItemStory extends Story { MenuItemStory() : super( name: "MenuItem", - builder: (context) { - final leadingColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final leadingColorKnob = context.knobs.nullable.options( label: "Leading color", description: "MoonColors variants for MoonMenuItem leading slot.", enabled: false, @@ -25,9 +25,9 @@ class MenuItemStory extends Story { options: colorOptions, ); - final leadingColor = colorTable(context)[leadingColorsKnob ?? 40]; + final leadingColor = colorTable(context)[leadingColorKnob ?? 40]; - final titleColorsKnob = context.knobs.nullable.options( + final titleColorKnob = context.knobs.nullable.options( label: "Title color", description: "MoonColors variants for MoonMenuItem title slot.", enabled: false, @@ -36,9 +36,9 @@ class MenuItemStory extends Story { options: colorOptions, ); - final titleTextColor = colorTable(context)[titleColorsKnob ?? 40]; + final titleTextColor = colorTable(context)[titleColorKnob ?? 40]; - final descriptionTextColorsKnob = context.knobs.nullable.options( + final descriptionTextColorKnob = context.knobs.nullable.options( label: "Description color", description: "MoonColors variants for MoonMenuItem description slot.", enabled: false, @@ -47,9 +47,9 @@ class MenuItemStory extends Story { options: colorOptions, ); - final descriptionTextColor = colorTable(context)[descriptionTextColorsKnob ?? 40]; + final descriptionTextColor = colorTable(context)[descriptionTextColorKnob ?? 40]; - final trailingColorsKnob = context.knobs.nullable.options( + final trailingColorKnob = context.knobs.nullable.options( label: "Trailing color", description: "MoonColors variants for MoonMenuItem trailing slot.", enabled: false, @@ -58,9 +58,9 @@ class MenuItemStory extends Story { options: colorOptions, ); - final trailingColor = colorTable(context)[trailingColorsKnob ?? 40]; + final trailingColor = colorTable(context)[trailingColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonMenuItem background.", enabled: false, @@ -69,7 +69,7 @@ class MenuItemStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -102,208 +102,209 @@ class MenuItemStory extends Story { description: "MoonMenuItem onTap() is null.", ); - final borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return StatefulBuilder( builder: (BuildContext context, setState) { return Center( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - const SizedBox(height: 64), - const TextDivider(text: "MoonMenuItem"), - const SizedBox(height: 32), - MoonMenuItem( - borderRadius: borderRadius, - backgroundColor: backgroundColor, - title: Text( - "Multi line menu item", - style: TextStyle(color: titleTextColor), + child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const TextDivider( + text: "MoonMenuItem", + paddingTop: 0, ), - description: showDescriptionKnob - ? Text( - "Multi line default description field as an example for menu item component.", - style: TextStyle(color: descriptionTextColor), - ) - : null, - leading: showLeadingKnob - ? MoonAvatar( - borderRadius: borderRadius, - backgroundColor: context.moonColors!.jiren, - avatarSize: MoonAvatarSize.lg, - content: const MoonIcon(MoonIcons.airplane_32, size: 32), - ) - : null, - trailing: showTrailingKnob - ? MoonIcon( - MoonIcons.chevron_right_24, - color: trailingColor, - ) - : null, - onTap: isDisabledKnob ? null : () {}, - ), - const SizedBox(height: 16), - MoonMenuItem( - backgroundColor: backgroundColor, - borderRadius: borderRadius, - title: Text( - "One line menu item", - style: TextStyle(color: titleTextColor), + MoonMenuItem( + borderRadius: borderRadius, + backgroundColor: backgroundColor, + title: Text( + "Multi-line menu item", + style: TextStyle(color: titleTextColor), + ), + description: showDescriptionKnob + ? Text( + "Multi-line default description field as an example for menu item component.", + style: TextStyle(color: descriptionTextColor), + ) + : null, + leading: showLeadingKnob + ? MoonAvatar( + borderRadius: borderRadius, + backgroundColor: context.moonColors!.jiren, + avatarSize: MoonAvatarSize.lg, + content: const MoonIcon(MoonIcons.airplane_32, size: 32), + ) + : null, + trailing: showTrailingKnob + ? MoonIcon( + MoonIcons.chevron_right_24, + color: trailingColor, + ) + : null, + onTap: isDisabledKnob ? null : () {}, ), - description: showDescriptionKnob - ? Text( - 'One line description field example', - style: TextStyle(color: descriptionTextColor), - ) - : null, - leading: showLeadingKnob - ? MoonAvatar( - borderRadius: borderRadius, - backgroundColor: context.moonColors!.jiren, - avatarSize: MoonAvatarSize.md, - content: const MoonIcon(MoonIcons.activity_32, size: 24), - ) - : null, - trailing: showTrailingKnob - ? MoonIcon( - MoonIcons.chevron_right_24, - color: trailingColor, - ) - : null, - onTap: isDisabledKnob ? null : () {}, - ), - const SizedBox(height: 32), - const TextDivider(text: "MoonMenuItem with selection control"), - const SizedBox(height: 32), - MoonMenuItem( - borderRadius: borderRadius, - backgroundColor: backgroundColor, - title: Text( - "Menu item with MoonCheckbox", - style: TextStyle(color: titleTextColor), + const SizedBox(height: 16), + MoonMenuItem( + backgroundColor: backgroundColor, + borderRadius: borderRadius, + title: Text( + "One-line menu item", + style: TextStyle(color: titleTextColor), + ), + description: showDescriptionKnob + ? Text( + 'One-line description field example', + style: TextStyle(color: descriptionTextColor), + ) + : null, + leading: showLeadingKnob + ? MoonAvatar( + borderRadius: borderRadius, + backgroundColor: context.moonColors!.jiren, + avatarSize: MoonAvatarSize.md, + content: const MoonIcon(MoonIcons.activity_32, size: 24), + ) + : null, + trailing: showTrailingKnob + ? MoonIcon( + MoonIcons.chevron_right_24, + color: trailingColor, + ) + : null, + onTap: isDisabledKnob ? null : () {}, ), - leading: showLeadingKnob - ? MoonIcon( - MoonIcons.frame_24, - color: leadingColor, - ) - : null, - trailing: showTrailingKnob - ? MoonCheckbox( - value: checkboxIsSelected, - tapAreaSizeValue: 24, - onChanged: (bool? isSelected) => setState(() => checkboxIsSelected = isSelected), - ) - : null, - onTap: isDisabledKnob ? null : () => setState(() => checkboxIsSelected = !checkboxIsSelected!), - ), - const SizedBox(height: 16), - MoonMenuItem( - borderRadius: borderRadius, - backgroundColor: backgroundColor, - title: Text( - "Menu item with MoonSwitch", - style: TextStyle(color: titleTextColor), + const TextDivider(text: "MoonMenuItem with selection control"), + MoonMenuItem( + borderRadius: borderRadius, + backgroundColor: backgroundColor, + title: Text( + "Menu item with MoonCheckbox", + style: TextStyle(color: titleTextColor), + ), + leading: showLeadingKnob + ? MoonIcon( + MoonIcons.frame_24, + color: leadingColor, + ) + : null, + trailing: showTrailingKnob + ? MoonCheckbox( + value: checkboxIsSelected, + tapAreaSizeValue: 24, + onChanged: (bool? isSelected) => setState(() => checkboxIsSelected = isSelected), + ) + : null, + onTap: + isDisabledKnob ? null : () => setState(() => checkboxIsSelected = !checkboxIsSelected!), ), - leading: showLeadingKnob - ? MoonIcon( - MoonIcons.frame_24, - color: leadingColor, - ) - : null, - trailing: showTrailingKnob - ? MoonSwitch( - switchSize: MoonSwitchSize.x2s, - value: switchIsSelected, - onChanged: (bool isSelected) => setState(() => switchIsSelected = isSelected), - ) - : null, - onTap: isDisabledKnob ? null : () => setState(() => switchIsSelected = !switchIsSelected), - ), - const SizedBox(height: 32), - const TextDivider(text: "Expandable MoonMenuItem with divider"), - const SizedBox(height: 32), - MoonAccordion( - shadows: const [], - isDisabled: isDisabledKnob, - hasContentOutside: true, - borderRadius: borderRadius, - accordionSize: MoonAccordionSize.md, - trailingColor: trailingColor, - backgroundColor: backgroundColor ?? Colors.transparent, - expandedBackgroundColor: backgroundColor ?? context.moonColors!.heles, - title: Text( - 'Expandable menu item', - style: context.moonTypography!.body.textDefault.copyWith( - color: titleTextColor, - fontWeight: FontWeight.w400, + const SizedBox(height: 16), + MoonMenuItem( + borderRadius: borderRadius, + backgroundColor: backgroundColor, + title: Text( + "Menu item with MoonSwitch", + style: TextStyle(color: titleTextColor), ), + leading: showLeadingKnob + ? MoonIcon( + MoonIcons.frame_24, + color: leadingColor, + ) + : null, + trailing: showTrailingKnob + ? MoonSwitch( + switchSize: MoonSwitchSize.x2s, + value: switchIsSelected, + onChanged: (bool isSelected) => setState(() => switchIsSelected = isSelected), + ) + : null, + onTap: isDisabledKnob ? null : () => setState(() => switchIsSelected = !switchIsSelected), ), - leading: showLeadingKnob - ? MoonIcon( - MoonIcons.frame_24, - color: leadingColor, - ) - : null, - childrenPadding: const EdgeInsets.only(top: 8, bottom: 8, left: 24), - children: MoonMenuItem.divideMenuItems( - context: context, - menuItems: [ - MoonMenuItem( - backgroundColor: backgroundColor, - borderRadius: borderRadius, - title: Text( - "Menu item 1 with MoonRadio", - style: TextStyle(color: titleTextColor), - ), - leading: showLeadingKnob - ? MoonRadio( - value: MenuItem.first, - groupValue: currentlySelectedMenuItem, - tapAreaSizeValue: 24, - onChanged: (MenuItem? selectedMenuItem) => setState( - () => currentlySelectedMenuItem = selectedMenuItem!, - ), - ) - : null, - trailing: showTrailingKnob - ? MoonIcon( - MoonIcons.frame_24, - color: trailingColor, - ) - : null, - onTap: () => setState(() => currentlySelectedMenuItem = MenuItem.first), + const TextDivider(text: "Expandable MoonMenuItem with divider"), + MoonAccordion( + shadows: const [], + isDisabled: isDisabledKnob, + hasContentOutside: true, + borderRadius: borderRadius, + accordionSize: MoonAccordionSize.md, + iconColor: trailingColor, + backgroundColor: backgroundColor ?? Colors.transparent, + expandedBackgroundColor: backgroundColor ?? context.moonColors!.heles, + title: Text( + 'Expandable menu item', + style: context.moonTypography!.body.textDefault.copyWith( + color: titleTextColor, + fontWeight: FontWeight.w400, ), - MoonMenuItem( - backgroundColor: backgroundColor, - borderRadius: borderRadius, - title: Text( - "Menu item 2 with MoonRadio", - style: TextStyle(color: titleTextColor), + ), + leading: showLeadingKnob + ? MoonIcon( + MoonIcons.frame_24, + color: leadingColor ?? context.moonColors!.iconPrimary, + ) + : null, + childrenPadding: const EdgeInsets.only(top: 8, bottom: 8, left: 24), + children: MoonMenuItem.divideMenuItems( + context: context, + menuItems: [ + MoonMenuItem( + backgroundColor: backgroundColor, + borderRadius: borderRadius, + title: Text( + "Menu item 1 with MoonRadio", + style: TextStyle(color: titleTextColor), + ), + leading: showLeadingKnob + ? MoonRadio( + value: MenuItem.first, + groupValue: currentlySelectedMenuItem, + tapAreaSizeValue: 24, + onChanged: (MenuItem? selectedMenuItem) => setState( + () => currentlySelectedMenuItem = selectedMenuItem!, + ), + ) + : null, + trailing: showTrailingKnob + ? MoonIcon( + MoonIcons.frame_24, + color: trailingColor, + ) + : null, + onTap: () => setState(() => currentlySelectedMenuItem = MenuItem.first), ), - leading: showLeadingKnob - ? MoonRadio( - value: MenuItem.second, - groupValue: currentlySelectedMenuItem, - tapAreaSizeValue: 24, - onChanged: (MenuItem? selectedMenuItem) => setState( - () => currentlySelectedMenuItem = selectedMenuItem!, - ), - ) - : null, - trailing: showTrailingKnob - ? MoonIcon( - MoonIcons.frame_24, - color: trailingColor, - ) - : null, - onTap: () => setState(() => currentlySelectedMenuItem = MenuItem.second), - ), - ], - ).toList(), - ), - const SizedBox(height: 64), - ], + MoonMenuItem( + backgroundColor: backgroundColor, + borderRadius: borderRadius, + title: Text( + "Menu item 2 with MoonRadio", + style: TextStyle(color: titleTextColor), + ), + leading: showLeadingKnob + ? MoonRadio( + value: MenuItem.second, + groupValue: currentlySelectedMenuItem, + tapAreaSizeValue: 24, + onChanged: (MenuItem? selectedMenuItem) => setState( + () => currentlySelectedMenuItem = selectedMenuItem!, + ), + ) + : null, + trailing: showTrailingKnob + ? MoonIcon( + MoonIcons.frame_24, + color: trailingColor, + ) + : null, + onTap: () => setState(() => currentlySelectedMenuItem = MenuItem.second), + ), + ], + ).toList(), + ), + ], + ), ), ); }, diff --git a/example/lib/src/storybook/stories/modal.dart b/example/lib/src/storybook/stories/modal.dart index 671a41b1..5d696c85 100644 --- a/example/lib/src/storybook/stories/modal.dart +++ b/example/lib/src/storybook/stories/modal.dart @@ -7,8 +7,8 @@ class ModalStory extends Story { ModalStory() : super( name: "Modal", - builder: (context) { - final textColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonModal text.", enabled: false, @@ -17,9 +17,9 @@ class ModalStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonModal background.", enabled: false, @@ -28,9 +28,9 @@ class ModalStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final barrierColorsKnob = context.knobs.nullable.options( + final barrierColorKnob = context.knobs.nullable.options( label: "barrierColor", description: "MoonColors variants for MoonModal barrier.", enabled: false, @@ -39,7 +39,7 @@ class ModalStory extends Story { options: colorOptions, ); - final barrierColor = colorTable(context)[barrierColorsKnob ?? 40]; + final barrierColor = colorTable(context)[barrierColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -54,7 +54,7 @@ class ModalStory extends Story { context: context, useRootNavigator: false, barrierColor: barrierColor, - builder: (_) { + builder: (BuildContext _) { return Directionality( textDirection: Directionality.of(context), child: MoonModal( @@ -74,14 +74,14 @@ class ModalStory extends Story { style: context.moonTypography!.heading.text18.copyWith(color: textColor), ), ), - Container( + Divider( height: 1, color: context.moonColors!.trunks, ), Padding( padding: const EdgeInsets.fromLTRB(24, 16, 24, 16), child: Text( - "Reopen the MoonModal to view the updated knob value.", + "Re-open the MoonModal to view the updated knob value.", style: context.moonTypography!.body.text14.copyWith(color: textColor), ), ), @@ -103,20 +103,21 @@ class ModalStory extends Story { } return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - Builder( - builder: (context) { - return MoonFilledButton( - label: const Text("Tap me"), - onTap: () => modalBuilder(context), - ); - }, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Builder( + builder: (BuildContext context) { + return MoonFilledButton( + label: const Text("Tap me"), + onTap: () => modalBuilder(context), + ); + }, + ), + ], + ), ), ); }, diff --git a/example/lib/src/storybook/stories/popover.dart b/example/lib/src/storybook/stories/popover.dart index 62a2feb9..89be9913 100644 --- a/example/lib/src/storybook/stories/popover.dart +++ b/example/lib/src/storybook/stories/popover.dart @@ -9,13 +9,13 @@ class PopoverStory extends Story { PopoverStory() : super( name: "Popover", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "label text", + label: "Label text", initial: "Custom MoonPopover text", ); - final popoverPositionsKnob = context.knobs.nullable.options( + final popoverPositionKnob = context.knobs.nullable.options( label: "popoverPosition", description: "Position variants for MoonPopover.", enabled: false, @@ -34,7 +34,7 @@ class PopoverStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonPopover text.", enabled: false, @@ -43,9 +43,9 @@ class PopoverStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonPopover background.", enabled: false, @@ -54,9 +54,9 @@ class PopoverStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonPopover border.", enabled: false, @@ -65,7 +65,7 @@ class PopoverStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -90,66 +90,63 @@ class PopoverStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - StatefulBuilder( - builder: (context, setState) { - return MoonPopover( - show: show, - borderColor: borderColor ?? Colors.transparent, - backgroundColor: backgroundColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - distanceToTarget: distanceToTargetKnob, - popoverPosition: popoverPositionsKnob ?? MoonPopoverPosition.top, - popoverShadows: showShadowKnob == true ? null : [], - content: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 190), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - textDirection: Directionality.of(context), - mainAxisSize: MainAxisSize.min, - children: [ - MoonAvatar( - backgroundColor: context.moonColors?.heles, - content: const MoonIcon(MoonIcons.rocket_24), - ), - const SizedBox(width: 12), - Expanded( - child: Text( - customLabelTextKnob, - style: TextStyle(color: textColor), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + StatefulBuilder( + builder: (context, setState) { + return MoonPopover( + show: show, + borderColor: borderColor ?? Colors.transparent, + backgroundColor: backgroundColor, + borderRadius: + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + distanceToTarget: distanceToTargetKnob, + popoverPosition: popoverPositionKnob ?? MoonPopoverPosition.top, + popoverShadows: showShadowKnob == true ? null : [], + content: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 190), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + textDirection: Directionality.of(context), + mainAxisSize: MainAxisSize.min, + children: [ + MoonAvatar( + backgroundColor: context.moonColors?.heles, + content: const MoonIcon(MoonIcons.rocket_24), ), - ), - ], - ), - const SizedBox(height: 16), - MoonFilledButton( - buttonSize: MoonButtonSize.sm, - isFullWidth: true, - onTap: () { - setState(() => show = false); - }, - label: const Text("Close"), - ), - ], + const SizedBox(width: 12), + Expanded( + child: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), + ), + ], + ), + const SizedBox(height: 16), + MoonFilledButton( + buttonSize: MoonButtonSize.sm, + isFullWidth: true, + onTap: () => setState(() => show = false), + label: const Text("Close"), + ), + ], + ), + ), + child: MoonFilledButton( + onTap: () => setState(() => show = true), + label: const Text("Tap me"), ), - ), - child: MoonFilledButton( - onTap: () { - setState(() => show = true); - }, - label: const Text("Tap me"), - ), - ); - }, - ), - const SizedBox(height: 64), - ], + ); + }, + ), + ], + ), ), ); }, diff --git a/example/lib/src/storybook/stories/radio.dart b/example/lib/src/storybook/stories/radio.dart index 2dea0432..e3ce49ca 100644 --- a/example/lib/src/storybook/stories/radio.dart +++ b/example/lib/src/storybook/stories/radio.dart @@ -16,8 +16,8 @@ class RadioStory extends Story { RadioStory() : super( name: "Radio", - builder: (context) { - final textColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonRadio with label text.", enabled: false, @@ -26,9 +26,9 @@ class RadioStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final activeColorsKnob = context.knobs.nullable.options( + final activeColorKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for checked MoonRadio.", enabled: false, @@ -37,9 +37,9 @@ class RadioStory extends Story { options: colorOptions, ); - final activeColor = colorTable(context)[activeColorsKnob ?? 40]; + final activeColor = colorTable(context)[activeColorKnob ?? 40]; - final inactiveColorsKnob = context.knobs.nullable.options( + final inactiveColorKnob = context.knobs.nullable.options( label: "inactiveColor", description: "MoonColors variants for unchecked MoonRadio.", enabled: false, @@ -48,71 +48,75 @@ class RadioStory extends Story { options: colorOptions, ); - final inactiveColor = colorTable(context)[inactiveColorsKnob ?? 40]; + final inactiveColor = colorTable(context)[inactiveColorKnob ?? 40]; - final isToggleable = context.knobs.boolean( + final isToggleableKnob = context.knobs.boolean( label: "toggleable", description: "Whether the selected MoonRadio can be unselected.", ); - final isDisabled = context.knobs.boolean( + final isDisabledKnob = context.knobs.boolean( label: "Disabled", description: "onChanged() is null.", ); - return Center( - child: StatefulBuilder( - builder: (context, setState) { - return Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - const TextDivider(text: "Customisable MoonRadio buttons"), - const SizedBox(height: 32), - MoonRadio( - value: ChoiceCustom.first, - groupValue: valueCustom, - onChanged: isDisabled ? null : (ChoiceCustom? choice) => setState(() => valueCustom = choice), - activeColor: activeColor, - inactiveColor: inactiveColor, - toggleable: isToggleable, - ), - const SizedBox(height: 8), - MoonRadio( - value: ChoiceCustom.second, - groupValue: valueCustom, - onChanged: isDisabled ? null : (ChoiceCustom? choice) => setState(() => valueCustom = choice), - activeColor: activeColor, - inactiveColor: inactiveColor, - toggleable: isToggleable, - ), - const SizedBox(height: 40), - const TextDivider(text: "MoonRadio buttons with clickable text"), - const SizedBox(height: 32), - MoonRadio.withLabel( - context, - textStyle: TextStyle(color: textColor), - value: ChoiceLabel.first, - groupValue: valueLabel, - label: "With label #1", - onChanged: isDisabled ? null : (ChoiceLabel? choice) => setState(() => valueLabel = choice), - toggleable: isToggleable, - ), - const SizedBox(height: 8), - MoonRadio.withLabel( - context, - textStyle: TextStyle(color: textColor), - value: ChoiceLabel.second, - groupValue: valueLabel, - label: "With label #2", - onChanged: isDisabled ? null : (ChoiceLabel? choice) => setState(() => valueLabel = choice), - toggleable: isToggleable, - ), - const SizedBox(height: 64), - ], - ); - }, - ), + return StatefulBuilder( + builder: (context, setState) { + return Center( + child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( + children: [ + const TextDivider( + text: "Customisable MoonRadio buttons", + paddingTop: 0, + ), + MoonRadio( + value: ChoiceCustom.first, + groupValue: valueCustom, + onChanged: + isDisabledKnob ? null : (ChoiceCustom? choice) => setState(() => valueCustom = choice), + activeColor: activeColor, + inactiveColor: inactiveColor, + toggleable: isToggleableKnob, + ), + const SizedBox(height: 8), + MoonRadio( + value: ChoiceCustom.second, + groupValue: valueCustom, + onChanged: + isDisabledKnob ? null : (ChoiceCustom? choice) => setState(() => valueCustom = choice), + activeColor: activeColor, + inactiveColor: inactiveColor, + toggleable: isToggleableKnob, + ), + const TextDivider(text: "MoonRadio buttons with clickable text"), + MoonRadio.withLabel( + context, + textStyle: TextStyle(color: textColor), + value: ChoiceLabel.first, + groupValue: valueLabel, + label: "With label #1", + onChanged: + isDisabledKnob ? null : (ChoiceLabel? choice) => setState(() => valueLabel = choice), + toggleable: isToggleableKnob, + ), + const SizedBox(height: 8), + MoonRadio.withLabel( + context, + textStyle: TextStyle(color: textColor), + value: ChoiceLabel.second, + groupValue: valueLabel, + label: "With label #2", + onChanged: + isDisabledKnob ? null : (ChoiceLabel? choice) => setState(() => valueLabel = choice), + toggleable: isToggleableKnob, + ), + ], + ), + ), + ); + }, ); }, ); diff --git a/example/lib/src/storybook/stories/segmented_control.dart b/example/lib/src/storybook/stories/segmented_control.dart index b9002d5f..2601d5b5 100644 --- a/example/lib/src/storybook/stories/segmented_control.dart +++ b/example/lib/src/storybook/stories/segmented_control.dart @@ -8,8 +8,8 @@ class SegmentedControlStory extends Story { SegmentedControlStory() : super( name: "SegmentedControl", - builder: (context) { - final segmentedControlSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final segmentedControlSizeKnob = context.knobs.nullable.options( label: "segmentedControlSize", description: "Size variants for MoonSegmentedControl.", enabled: false, @@ -20,7 +20,7 @@ class SegmentedControlStory extends Story { ], ); - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonSegmentedControl background.", enabled: false, @@ -29,9 +29,9 @@ class SegmentedControlStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final selectedSegmentColorsKnob = context.knobs.nullable.options( + final selectedSegmentColorKnob = context.knobs.nullable.options( label: "selectedSegmentColor", description: "MoonColors variants for selected segment.", enabled: false, @@ -40,9 +40,9 @@ class SegmentedControlStory extends Story { options: colorOptions, ); - final selectedSegmentColor = colorTable(context)[selectedSegmentColorsKnob ?? 40]; + final selectedSegmentColor = colorTable(context)[selectedSegmentColorKnob ?? 40]; - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for default text.", enabled: false, @@ -51,9 +51,9 @@ class SegmentedControlStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final selectedTextColorsKnob = context.knobs.nullable.options( + final selectedTextColorKnob = context.knobs.nullable.options( label: "selectedTextColor", description: "MoonColors variants for selected segment text.", enabled: false, @@ -62,7 +62,7 @@ class SegmentedControlStory extends Story { options: colorOptions, ); - final selectedTextColor = colorTable(context)[selectedTextColorsKnob ?? 40]; + final selectedTextColor = colorTable(context)[selectedTextColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -114,7 +114,7 @@ class SegmentedControlStory extends Story { description: "Disable MoonSegmentedControl.", ); - final segmentStyle = SegmentStyle( + final SegmentStyle segmentStyle = SegmentStyle( textColor: textColor, selectedTextColor: selectedTextColor, selectedSegmentColor: selectedSegmentColor, @@ -122,24 +122,27 @@ class SegmentedControlStory extends Story { segmentBorderRadiusKnob != null ? BorderRadius.circular(segmentBorderRadiusKnob.toDouble()) : null, ); + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + return Center( child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Default MoonSegmentedControl"), - const SizedBox(height: 32), + const TextDivider( + text: "Default MoonSegmentedControl", + paddingTop: 0, + ), Column( children: [ MoonSegmentedControl( isDisabled: isDisabledKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), - segmentedControlSize: segmentedControlSizesKnob, + segmentedControlSize: segmentedControlSizeKnob, backgroundColor: backgroundColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, segments: [ Segment( leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null, @@ -161,17 +164,14 @@ class SegmentedControlStory extends Story { ), ], ), - const SizedBox(height: 32), const TextDivider(text: "Icon MoonSegmentedControl"), - const SizedBox(height: 32), MoonSegmentedControl( isDisabled: isDisabledKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), - segmentedControlSize: segmentedControlSizesKnob, + segmentedControlSize: segmentedControlSizeKnob, backgroundColor: backgroundColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + borderRadius: borderRadius, segments: [ Segment( trailing: const MoonIcon(MoonIcons.frame_24), @@ -193,7 +193,6 @@ class SegmentedControlStory extends Story { ), ], ), - const SizedBox(height: 64), ], ), ), diff --git a/example/lib/src/storybook/stories/switch.dart b/example/lib/src/storybook/stories/switch.dart index 5fe9acb7..9d2809d9 100644 --- a/example/lib/src/storybook/stories/switch.dart +++ b/example/lib/src/storybook/stories/switch.dart @@ -11,8 +11,8 @@ class SwitchStory extends Story { SwitchStory() : super( name: "Switch", - builder: (context) { - final switchSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final switchSizeKnob = context.knobs.nullable.options( label: "switchSize", description: "Size variants for MoonSwitch.", enabled: false, @@ -24,7 +24,7 @@ class SwitchStory extends Story { ], ); - final thumbColorsKnob = context.knobs.nullable.options( + final thumbColorKnob = context.knobs.nullable.options( label: "thumbColor", description: "MoonColors variants for MoonSwitch thumb.", enabled: false, @@ -33,9 +33,9 @@ class SwitchStory extends Story { options: colorOptions, ); - final thumbColor = colorTable(context)[thumbColorsKnob ?? 40]; + final thumbColor = colorTable(context)[thumbColorKnob ?? 40]; - final activeTrackColorsKnob = context.knobs.nullable.options( + final activeTrackColorKnob = context.knobs.nullable.options( label: "activeTrackColor", description: "MoonColors variants for active MoonSwitch track.", enabled: false, @@ -44,9 +44,9 @@ class SwitchStory extends Story { options: colorOptions, ); - final activeTrackColor = colorTable(context)[activeTrackColorsKnob ?? 40]; + final activeTrackColor = colorTable(context)[activeTrackColorKnob ?? 40]; - final inactiveTrackColorsKnob = context.knobs.nullable.options( + final inactiveTrackColorKnob = context.knobs.nullable.options( label: "inactiveTrackColor", description: "MoonColors variants for inactive MoonSwitch track.", enabled: false, @@ -55,7 +55,7 @@ class SwitchStory extends Story { options: colorOptions, ); - final inactiveTrackColor = colorTable(context)[inactiveTrackColorsKnob ?? 40]; + final inactiveTrackColor = colorTable(context)[inactiveTrackColorKnob ?? 40]; final isDisabled = context.knobs.boolean( label: "Disabled", @@ -63,60 +63,60 @@ class SwitchStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - const TextDivider(text: "Customisable MoonSwitch"), - const SizedBox(height: 32), - StatefulBuilder( - builder: (context, setState) { - return MoonSwitch( - switchSize: switchSizesKnob, - thumbColor: thumbColor, - activeTrackColor: activeTrackColor, - inactiveTrackColor: inactiveTrackColor, - value: value, - onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), - ); - }, - ), - const SizedBox(height: 40), - const TextDivider(text: "MoonSwitches with custom children"), - const SizedBox(height: 32), - StatefulBuilder( - builder: (context, setState) { - return MoonSwitch( - switchSize: switchSizesKnob, - activeThumbWidget: const MoonIcon(MoonIcons.check_alternative_16), - inactiveThumbWidget: const MoonIcon(MoonIcons.close_small_16), - activeTrackWidget: const Text( - "ON", - textAlign: TextAlign.center, - ), - inactiveTrackWidget: const Text( - "OFF", - textAlign: TextAlign.center, - ), - value: value, - onChanged: (newValue) => setState(() => value = newValue), - ); - }, - ), - const SizedBox(height: 32), - StatefulBuilder( - builder: (context, setState) { - return MoonSwitch( - switchSize: switchSizesKnob, - activeTrackWidget: const MoonIcon(MoonIcons.moon_16), - inactiveTrackWidget: const MoonIcon(MoonIcons.sun_16), - value: value, - onChanged: (newValue) => setState(() => value = newValue), - ); - }, - ), - const SizedBox(height: 64), - ], + child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Column( + children: [ + const TextDivider( + text: "Customisable MoonSwitch", + paddingTop: 0, + ), + StatefulBuilder( + builder: (context, setState) { + return MoonSwitch( + switchSize: switchSizeKnob, + thumbColor: thumbColor, + activeTrackColor: activeTrackColor, + inactiveTrackColor: inactiveTrackColor, + value: value, + onChanged: isDisabled ? null : (bool newValue) => setState(() => value = newValue), + ); + }, + ), + const TextDivider(text: "MoonSwitches with custom children"), + StatefulBuilder( + builder: (context, setState) { + return MoonSwitch( + switchSize: switchSizeKnob, + activeThumbWidget: const MoonIcon(MoonIcons.check_alternative_16), + inactiveThumbWidget: const MoonIcon(MoonIcons.close_small_16), + activeTrackWidget: const Text( + "ON", + textAlign: TextAlign.center, + ), + inactiveTrackWidget: const Text( + "OFF", + textAlign: TextAlign.center, + ), + value: value, + onChanged: (bool newValue) => setState(() => value = newValue), + ); + }, + ), + const SizedBox(height: 32), + StatefulBuilder( + builder: (context, setState) { + return MoonSwitch( + switchSize: switchSizeKnob, + activeTrackWidget: const MoonIcon(MoonIcons.moon_16), + inactiveTrackWidget: const MoonIcon(MoonIcons.sun_16), + value: value, + onChanged: (bool newValue) => setState(() => value = newValue), + ); + }, + ), + ], + ), ), ); }, diff --git a/example/lib/src/storybook/stories/tab_bar.dart b/example/lib/src/storybook/stories/tab_bar.dart index de6e4581..0abbc53b 100644 --- a/example/lib/src/storybook/stories/tab_bar.dart +++ b/example/lib/src/storybook/stories/tab_bar.dart @@ -8,8 +8,8 @@ class TabBarStory extends Story { TabBarStory() : super( name: "TabBar", - builder: (context) { - final tabsSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final tabsSizeKnob = context.knobs.nullable.options( label: "tabBarSize", description: "Size variants for MoonTabBar.", enabled: false, @@ -20,7 +20,7 @@ class TabBarStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for default text.", enabled: false, @@ -29,9 +29,9 @@ class TabBarStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final selectedTextColorsKnob = context.knobs.nullable.options( + final selectedTextColorKnob = context.knobs.nullable.options( label: "selectedTextColor", description: "MoonColors variants for selected tab text.", enabled: false, @@ -40,9 +40,9 @@ class TabBarStory extends Story { options: colorOptions, ); - final selectedTextColor = colorTable(context)[selectedTextColorsKnob ?? 40]; + final selectedTextColor = colorTable(context)[selectedTextColorKnob ?? 40]; - final indicatorColorsKnob = context.knobs.nullable.options( + final indicatorColorKnob = context.knobs.nullable.options( label: "indicatorColor", description: "MoonColors variants for default MoonTabBar indicator.", enabled: false, @@ -51,9 +51,9 @@ class TabBarStory extends Story { options: colorOptions, ); - final indicatorColor = colorTable(context)[indicatorColorsKnob ?? 40]; + final indicatorColor = colorTable(context)[indicatorColorKnob ?? 40]; - final selectedTabColorsKnob = context.knobs.nullable.options( + final selectedTabColorKnob = context.knobs.nullable.options( label: "selectedTabColor", description: "MoonColors variants for pill MoonTabBar selected tab.", enabled: false, @@ -62,7 +62,7 @@ class TabBarStory extends Story { options: colorOptions, ); - final selectedTabColor = colorTable(context)[selectedTabColorsKnob ?? 40]; + final selectedTabColor = colorTable(context)[selectedTabColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -125,16 +125,17 @@ class TabBarStory extends Story { return Center( child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Default MoonTabBar"), - const SizedBox(height: 32), + const TextDivider( + text: "Default MoonTabBar", + paddingTop: 0, + ), Column( children: [ MoonTabBar( - tabBarSize: tabsSizesKnob, + tabBarSize: tabsSizeKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), tabs: [ @@ -158,11 +159,9 @@ class TabBarStory extends Story { ), ], ), - const SizedBox(height: 32), const TextDivider(text: "MoonTabBar with disabled tab"), - const SizedBox(height: 32), MoonTabBar( - tabBarSize: tabsSizesKnob, + tabBarSize: tabsSizeKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), tabs: [ @@ -185,11 +184,9 @@ class TabBarStory extends Story { ), ], ), - const SizedBox(height: 32), const TextDivider(text: "Pill MoonTabBar"), - const SizedBox(height: 32), MoonTabBar.pill( - tabBarSize: tabsSizesKnob, + tabBarSize: tabsSizeKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), pillTabs: [ @@ -215,7 +212,6 @@ class TabBarStory extends Story { ), ], ), - const SizedBox(height: 64), ], ), ), diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart index df4cbc40..9c579333 100644 --- a/example/lib/src/storybook/stories/tag.dart +++ b/example/lib/src/storybook/stories/tag.dart @@ -7,13 +7,13 @@ class TagStory extends Story { TagStory() : super( name: "Tag", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "label text", + label: "Tag label text", initial: "MoonTag", ); - final tagSizesKnob = context.knobs.nullable.options( + final tagSizeKnob = context.knobs.nullable.options( label: "tagSize", description: "Size variants for MoonTag.", enabled: false, @@ -24,7 +24,7 @@ class TagStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonTag text.", enabled: false, @@ -33,9 +33,9 @@ class TagStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final iconColorsKnob = context.knobs.nullable.options( + final iconColorKnob = context.knobs.nullable.options( label: "Icon color", description: "MoonColors variants for MoonTag icon.", enabled: false, @@ -44,9 +44,9 @@ class TagStory extends Story { options: colorOptions, ); - final iconColor = colorTable(context)[iconColorsKnob ?? 40]; + final iconColor = colorTable(context)[iconColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTag background.", enabled: false, @@ -55,7 +55,7 @@ class TagStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -88,27 +88,33 @@ class TagStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - MoonTag( - borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - onTap: () {}, - tagSize: tagSizesKnob, - isUpperCase: setUpperCase, - backgroundColor: backgroundColor, - leading: showLeadingKnob ? MoonIcon(MoonIcons.close_small_16, color: iconColor) : null, - label: showLabelKnob - ? Text( - setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob, - style: TextStyle(color: textColor), - ) - : null, - trailing: showTrailingKnob ? MoonIcon(MoonIcons.close_small_16, color: iconColor) : null, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: MoonTag( + borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + onTap: () {}, + tagSize: tagSizeKnob, + isUpperCase: setUpperCase, + backgroundColor: backgroundColor, + leading: showLeadingKnob + ? MoonIcon( + MoonIcons.close_small_16, + color: iconColor, + ) + : null, + label: showLabelKnob + ? Text( + setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob, + style: TextStyle(color: textColor), + ) + : null, + trailing: showTrailingKnob + ? MoonIcon( + MoonIcons.close_small_16, + color: iconColor, + ) + : null, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/text_area.dart b/example/lib/src/storybook/stories/text_area.dart index cd6530a3..47b94592 100644 --- a/example/lib/src/storybook/stories/text_area.dart +++ b/example/lib/src/storybook/stories/text_area.dart @@ -8,66 +8,72 @@ class TextAreaStory extends Story { TextAreaStory() : super( name: "TextArea", - builder: (context) { - final textColorsKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonTextArea text.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final hintTextColorsKnob = context.knobs.nullable.options( + final hintTextColorKnob = context.knobs.nullable.options( label: "hintTextColor", description: "MoonColors variants for MoonTextArea hint text.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final hintTextColor = colorTable(context)[hintTextColorsKnob ?? 40]; + final hintTextColor = colorTable(context)[hintTextColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextArea background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final activeBorderColorsKnob = context.knobs.nullable.options( + final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextArea active border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final activeBorderColor = colorTable(context)[activeBorderColorsKnob ?? 40]; + final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; - final inactiveBorderColorsKnob = context.knobs.nullable.options( + final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextArea inactive border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final inactiveBorderColor = colorTable(context)[inactiveBorderColorsKnob ?? 40]; + final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; - final errorBorderColorsKnob = context.knobs.nullable.options( + final errorBorderColorKnob = context.knobs.nullable.options( label: "errorBorderColor", description: "MoonColors variants for MoonTextArea error border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final errorBorderColor = colorTable(context)[errorBorderColorsKnob ?? 40]; + final errorBorderColor = colorTable(context)[errorBorderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -100,47 +106,44 @@ class TextAreaStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - Form( - child: Builder( - builder: (context) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - MoonTextArea( - enabled: enabledKnob, - showFocusEffect: showFocusEffectKnob, - height: growableKnob ? null : 200, - textColor: textColor, - hintTextColor: hintTextColor, - backgroundColor: backgroundColor, - activeBorderColor: activeBorderColor, - inactiveBorderColor: inactiveBorderColor, - errorBorderColor: errorBorderColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - hintText: "Enter your text here...", - validator: (value) => value?.length != null && value!.length < 10 - ? "The text should be longer than 10 characters." - : null, - helper: showHelperKnob ? const Text("Supporting text") : null, - errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!), - ), - const SizedBox(height: 16), - MoonFilledButton( - label: const Text("Submit"), - onTap: () => Form.of(context).validate(), - ) - ], - ); - }, - ), + child: SingleChildScrollView( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Form( + child: Builder( + builder: (BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + MoonTextArea( + enabled: enabledKnob, + showFocusEffect: showFocusEffectKnob, + height: growableKnob ? null : 200, + textColor: textColor, + hintTextColor: hintTextColor, + backgroundColor: backgroundColor, + activeBorderColor: activeBorderColor, + inactiveBorderColor: inactiveBorderColor, + errorBorderColor: errorBorderColor, + borderRadius: + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + hintText: "Enter your text here...", + validator: (String? value) => value?.length != null && value!.length < 10 + ? "The text should be longer than 10 characters." + : null, + helper: showHelperKnob ? const Text("Supporting text") : null, + errorBuilder: (BuildContext context, String? errorText) => + StoryErrorWidget(errorText: errorText!), + ), + const SizedBox(height: 32), + MoonFilledButton( + label: const Text("Submit"), + onTap: () => Form.of(context).validate(), + ) + ], + ); + }, ), - const SizedBox(height: 64), - ], + ), ), ); }, diff --git a/example/lib/src/storybook/stories/text_input.dart b/example/lib/src/storybook/stories/text_input.dart index eaa1352e..ee079d31 100644 --- a/example/lib/src/storybook/stories/text_input.dart +++ b/example/lib/src/storybook/stories/text_input.dart @@ -13,8 +13,8 @@ class TextInputStory extends Story { TextInputStory() : super( name: "TextInput", - builder: (context) { - final textInputSizesKnob = context.knobs.nullable.options( + builder: (BuildContext context) { + final textInputSizeKnob = context.knobs.nullable.options( label: "textInputSize", description: "Size variants for MoonTextInput.", enabled: false, @@ -27,65 +27,71 @@ class TextInputStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonTextInput text.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final hintTextColorsKnob = context.knobs.nullable.options( + final hintTextColorKnob = context.knobs.nullable.options( label: "hintTextColor", description: "MoonColors variants for MoonTextInput hint text.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final hintTextColor = colorTable(context)[hintTextColorsKnob ?? 40]; + final hintTextColor = colorTable(context)[hintTextColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInput background.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final activeBorderColorsKnob = context.knobs.nullable.options( + final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInput active border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final activeBorderColor = colorTable(context)[activeBorderColorsKnob ?? 40]; + final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; - final inactiveBorderColorsKnob = context.knobs.nullable.options( + final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextInput inactive border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final inactiveBorderColor = colorTable(context)[inactiveBorderColorsKnob ?? 40]; + final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; - final errorBorderColorsKnob = context.knobs.nullable.options( + final errorBorderColorKnob = context.knobs.nullable.options( label: "errorBorderColor", description: "MoonColors variants for MoonTextInput error border.", enabled: false, - initial: 0, // piccolo + initial: 0, + // piccolo options: colorOptions, ); - final errorBorderColor = colorTable(context)[errorBorderColorsKnob ?? 40]; + final errorBorderColor = colorTable(context)[errorBorderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -129,20 +135,65 @@ class TextInputStory extends Story { description: "Show widget in MoonTextInput helper slot.", ); - return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - Form( - child: Builder( - builder: (context) { - return Column( - children: [ - MoonFormTextInput( - controller: _textController, + final BorderRadiusGeometry? borderRadius = + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + + return Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Form( + child: Builder( + builder: (BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + MoonFormTextInput( + controller: _textController, + enabled: enabledKnob, + textInputSize: textInputSizeKnob, + showFocusEffect: showFocusEffectKnob, + hasFloatingLabel: hasFloatingLabelKnob, + textColor: textColor, + hintTextColor: hintTextColor, + backgroundColor: backgroundColor, + activeBorderColor: activeBorderColor, + inactiveBorderColor: inactiveBorderColor, + errorBorderColor: errorBorderColor, + borderRadius: borderRadius, + hintText: "Enter your text here (over 10 characters)", + validator: (String? value) => value?.length != null && value!.length < 10 + ? "The text should be longer than 10 characters." + : null, + leading: showLeadingKnob + ? const MoonIcon( + MoonIcons.search_24, + size: 24, + ) + : null, + trailing: showTrailingKnob + ? MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + child: const MoonIcon( + MoonIcons.close_small_24, + size: 24, + ), + onTap: () => _textController.clear(), + ), + ) + : null, + helper: showHelperKnob ? const Text("Supporting text") : null, + errorBuilder: (BuildContext context, String? errorText) => + StoryErrorWidget(errorText: errorText!), + ), + const SizedBox(height: 16), + StatefulBuilder( + builder: (context, setState) { + return MoonFormTextInput( + controller: _passwordController, enabled: enabledKnob, - textInputSize: textInputSizesKnob, + keyboardType: TextInputType.visiblePassword, + obscureText: _hidePassword, + textInputSize: textInputSizeKnob, showFocusEffect: showFocusEffectKnob, hasFloatingLabel: hasFloatingLabelKnob, textColor: textColor, @@ -151,12 +202,9 @@ class TextInputStory extends Story { activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, errorBorderColor: errorBorderColor, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - hintText: "Enter your text here (over 10 characters)", - validator: (value) => value?.length != null && value!.length < 10 - ? "The text should be longer than 10 characters." - : null, + borderRadius: borderRadius, + hintText: "Enter password (123abc)", + validator: (String? value) => value != "123abc" ? "Wrong password." : null, leading: showLeadingKnob ? const MoonIcon( MoonIcons.search_24, @@ -167,81 +215,36 @@ class TextInputStory extends Story { ? MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( - child: const MoonIcon( - MoonIcons.close_small_24, - size: 24, + child: IntrinsicWidth( + child: Align( + alignment: Alignment.centerRight, + child: Text( + _hidePassword ? "Show" : "Hide", + style: DefaultTextStyle.of(context) + .style + .copyWith(decoration: TextDecoration.underline), + ), + ), ), - onTap: () => _textController.clear(), + onTap: () => setState(() => _hidePassword = !_hidePassword), ), ) : null, helper: showHelperKnob ? const Text("Supporting text") : null, - errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!), - ), - const SizedBox(height: 16), - StatefulBuilder( - builder: (context, setState) { - return MoonFormTextInput( - controller: _passwordController, - enabled: enabledKnob, - keyboardType: TextInputType.visiblePassword, - obscureText: _hidePassword, - textInputSize: textInputSizesKnob, - showFocusEffect: showFocusEffectKnob, - hasFloatingLabel: hasFloatingLabelKnob, - textColor: textColor, - hintTextColor: hintTextColor, - backgroundColor: backgroundColor, - activeBorderColor: activeBorderColor, - inactiveBorderColor: inactiveBorderColor, - errorBorderColor: errorBorderColor, - borderRadius: borderRadiusKnob != null - ? BorderRadius.circular(borderRadiusKnob.toDouble()) - : null, - hintText: "Enter password (123abc)", - validator: (value) => value != "123abc" ? "Wrong password." : null, - leading: showLeadingKnob - ? const MoonIcon( - MoonIcons.search_24, - size: 24, - ) - : null, - trailing: showTrailingKnob - ? MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - child: IntrinsicWidth( - child: Align( - alignment: Alignment.centerRight, - child: Text( - _hidePassword ? "Show" : "Hide", - style: DefaultTextStyle.of(context) - .style - .copyWith(decoration: TextDecoration.underline), - ), - ), - ), - onTap: () => setState(() => _hidePassword = !_hidePassword), - ), - ) - : null, - helper: showHelperKnob ? const Text("Supporting text") : null, - errorBuilder: (context, errorText) => StoryErrorWidget(errorText: errorText!), - ); - }, - ), - const SizedBox(height: 24), - MoonFilledButton( - label: const Text("Submit"), - onTap: () => Form.of(context).validate(), - ) - ], - ); - }, - ), - ), - const SizedBox(height: 64), - ], + errorBuilder: (BuildContext context, String? errorText) => + StoryErrorWidget(errorText: errorText!), + ); + }, + ), + const SizedBox(height: 32), + MoonFilledButton( + label: const Text("Submit"), + onTap: () => Form.of(context).validate(), + ) + ], + ); + }, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/toast.dart b/example/lib/src/storybook/stories/toast.dart index a790bb16..8ebdd471 100644 --- a/example/lib/src/storybook/stories/toast.dart +++ b/example/lib/src/storybook/stories/toast.dart @@ -7,9 +7,9 @@ class ToastStory extends Story { ToastStory() : super( name: "Toast", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "label text", + label: "Toast label text", initial: "This is a custom MoonToast text", ); @@ -42,7 +42,7 @@ class ToastStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonToast text.", enabled: false, @@ -51,9 +51,9 @@ class ToastStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final iconColorsKnob = context.knobs.nullable.options( + final iconColorKnob = context.knobs.nullable.options( label: "Icon color", description: "MoonColors variants for MoonToast icon.", enabled: false, @@ -62,9 +62,9 @@ class ToastStory extends Story { options: colorOptions, ); - final iconColor = colorTable(context)[iconColorsKnob ?? 40]; + final iconColor = colorTable(context)[iconColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonToast background.", enabled: false, @@ -73,7 +73,7 @@ class ToastStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -114,40 +114,38 @@ class ToastStory extends Story { ); return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const SizedBox(height: 64), - Builder( - builder: (context) { - return MoonFilledButton( - label: const Text("Tap me"), - onTap: () { - MoonToast.show( - context, - backgroundColor: backgroundColor, - isPersistent: isPersistentKnob, - useSafeArea: useSafeAreaKnob, - width: widthKnob, - toastAlignment: toastAlignmentKnob ?? Alignment.bottomCenter, - variant: toastVariantKnob ?? MoonToastVariant.original, - displayDuration: - displayDurationKnob != null ? Duration(seconds: displayDurationKnob) : null, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - leading: MoonIcon(MoonIcons.info_24, color: iconColor), - title: Text( - customLabelTextKnob, - style: TextStyle(color: textColor), - ), - trailing: MoonIcon(MoonIcons.star_24, color: iconColor), - ); - }, - ); - }, - ), - const SizedBox(height: 64), - ], + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 64), + child: Builder( + builder: (BuildContext context) { + return MoonFilledButton( + label: const Text("Tap me"), + onTap: () { + MoonToast.show( + context, + backgroundColor: backgroundColor, + isPersistent: isPersistentKnob, + useSafeArea: useSafeAreaKnob, + width: widthKnob, + toastAlignment: toastAlignmentKnob ?? Alignment.bottomCenter, + variant: toastVariantKnob ?? MoonToastVariant.original, + displayDuration: displayDurationKnob != null ? Duration(seconds: displayDurationKnob) : null, + borderRadius: + borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, + leading: MoonIcon(MoonIcons.info_24, color: iconColor), + title: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), + trailing: MoonIcon( + MoonIcons.star_24, + color: iconColor, + ), + ); + }, + ); + }, + ), ), ); }, diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart index dcb5337a..d83726b4 100644 --- a/example/lib/src/storybook/stories/tooltip.dart +++ b/example/lib/src/storybook/stories/tooltip.dart @@ -4,19 +4,20 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; -bool show = false; +bool showOnTap = false; +bool showOnLongPress = false; class TooltipStory extends Story { TooltipStory() : super( name: "Tooltip", - builder: (context) { + builder: (BuildContext context) { final customLabelTextKnob = context.knobs.text( - label: "label text", + label: "Custom MoonTooltip text", initial: "Custom MoonTooltip text", ); - final tooltipPositionsKnob = context.knobs.nullable.options( + final tooltipPositionKnob = context.knobs.nullable.options( label: "tooltipPosition", description: "Position variants for MoonTooltip.", enabled: false, @@ -35,7 +36,7 @@ class TooltipStory extends Story { ], ); - final textColorsKnob = context.knobs.nullable.options( + final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonTooltip text.", enabled: false, @@ -44,9 +45,9 @@ class TooltipStory extends Story { options: colorOptions, ); - final textColor = colorTable(context)[textColorsKnob ?? 40]; + final textColor = colorTable(context)[textColorKnob ?? 40]; - final backgroundColorsKnob = context.knobs.nullable.options( + final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTooltip background.", enabled: false, @@ -55,9 +56,9 @@ class TooltipStory extends Story { options: colorOptions, ); - final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40]; + final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; - final borderColorsKnob = context.knobs.nullable.options( + final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonTooltip border.", enabled: false, @@ -66,7 +67,7 @@ class TooltipStory extends Story { options: colorOptions, ); - final borderColor = colorTable(context)[borderColorsKnob ?? 40]; + final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", @@ -121,23 +122,26 @@ class TooltipStory extends Story { initial: true, ); - return Center( + final borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; + + return Padding( + padding: const EdgeInsets.symmetric(vertical: 64), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox(height: 64), - const TextDivider(text: "Customisable MoonTooltip"), - const SizedBox(height: 32), + const TextDivider( + text: "Customisable MoonTooltip", + paddingTop: 0, + ), StatefulBuilder( builder: (context, setState) { return MoonTooltip( - show: show, + show: showOnTap, backgroundColor: backgroundColor, borderWidth: 1, borderColor: borderColor ?? Colors.transparent, - borderRadius: - borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, - tooltipPosition: tooltipPositionsKnob ?? MoonTooltipPosition.top, + borderRadius: borderRadius, + tooltipPosition: tooltipPositionKnob ?? MoonTooltipPosition.top, hasArrow: showArrowKnob, arrowBaseWidth: arrowBaseWidthKnob, arrowLength: arrowLengthKnob, @@ -149,34 +153,43 @@ class TooltipStory extends Story { style: TextStyle(color: textColor), ), child: MoonFilledButton( - onTap: () { - setState(() => show = true); - }, + onTap: () => setState(() => showOnTap = true), label: const Text("Tap me"), ), ); }, ), - const SizedBox(height: 40), - const TextDivider(text: "Default on hover MoonTooltip"), - const SizedBox(height: 32), - MoonFilledButton( - showTooltip: true, - tooltipMessage: customLabelTextKnob, - onTap: () {}, - label: const Text("MoonFilledButton"), - ), - const SizedBox(height: 32), - MoonChip( - showTooltip: true, - tooltipMessage: customLabelTextKnob, - borderRadius: BorderRadius.circular(20), - backgroundColor: context.moonColors!.hit, - leading: const MoonIcon(MoonIcons.frame_24), - textColor: context.moonColors!.goten, - label: const Text("MoonChip"), + const TextDivider(text: "Show MoonTooltip on long-press"), + StatefulBuilder( + builder: (context, setState) { + return MoonTooltip( + show: showOnLongPress, + backgroundColor: backgroundColor, + borderWidth: 1, + borderColor: borderColor ?? Colors.transparent, + borderRadius: borderRadius, + tooltipPosition: tooltipPositionKnob ?? MoonTooltipPosition.top, + hasArrow: showArrowKnob, + arrowBaseWidth: arrowBaseWidthKnob, + arrowLength: arrowLengthKnob, + arrowOffsetValue: arrowOffsetKnob ?? 0, + arrowTipDistance: arrowTipDistanceKnob, + tooltipShadows: showShadowKnob == true ? null : [], + content: Text( + customLabelTextKnob, + style: TextStyle(color: textColor), + ), + child: MoonChip( + borderRadius: BorderRadius.circular(20), + backgroundColor: context.moonColors!.hit, + leading: const MoonIcon(MoonIcons.frame_24), + textColor: context.moonColors!.goten, + label: const Text("MoonChip"), + onLongPress: () => setState(() => showOnLongPress = true), + ), + ); + }, ), - const SizedBox(height: 64), ], ), ); diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart index 494393da..86bf686a 100644 --- a/example/lib/src/storybook/storybook.dart +++ b/example/lib/src/storybook/storybook.dart @@ -56,7 +56,7 @@ class StorybookPage extends StatelessWidget { initialStory: "Accordion", plugins: _plugins, brandingWidget: const MoonVersionWidget(), - wrapperBuilder: (context, child) => MaterialApp( + wrapperBuilder: (BuildContext context, Widget? child) => MaterialApp( title: "Moon Design for Flutter", theme: ThemeData.light().copyWith(extensions: >[MoonTheme(tokens: MoonTokens.light)]), @@ -77,9 +77,13 @@ class StorybookPage extends StatelessWidget { extendBody: true, extendBodyBehindAppBar: true, resizeToAvoidBottomInset: false, - body: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: child, + body: SafeArea( + top: false, + bottom: false, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: child, + ), ), ), ), diff --git a/lib/src/theme/accordion/accordion_colors.dart b/lib/src/theme/accordion/accordion_colors.dart index 5bf74327..42145b8f 100644 --- a/lib/src/theme/accordion/accordion_colors.dart +++ b/lib/src/theme/accordion/accordion_colors.dart @@ -5,27 +5,21 @@ import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonAccordionColors extends ThemeExtension with DiagnosticableTreeMixin { - /// Collapsed accordion item leading slot widget's text and icon color. - final Color leadingColor; + /// Collapsed accordion item header text color. + final Color textColor; - /// Expanded accordion item leading slot widget's text and icon color. - final Color expandedLeadingColor; - - /// Collapsed accordion item title slot widget's text and icon color. - final Color titleColor; - - /// Expanded accordion item title slot widget's text and icon color. - final Color expandedTitleColor; - - /// Collapsed accordion item trailing slot widget's text and icon color. - final Color trailingColor; - - /// Expanded accordion item trailing slot widget's text and icon color. - final Color expandedTrailingColor; + /// Expanded accordion item header text color. + final Color expandedTextColor; /// Accordion item content slot widget's text and icon color. final Color contentColor; + /// Collapsed accordion item header icon color. + final Color iconColor; + + /// Expanded accordion item header icon color. + final Color expandedIconColor; + /// Collapsed accordion item default pre-set trailing icon color. final Color trailingIconColor; @@ -45,13 +39,11 @@ class MoonAccordionColors extends ThemeExtension with Diagn final Color dividerColor; const MoonAccordionColors({ - required this.leadingColor, - required this.expandedLeadingColor, - required this.titleColor, - required this.expandedTitleColor, - required this.trailingColor, - required this.expandedTrailingColor, + required this.textColor, + required this.expandedTextColor, required this.contentColor, + required this.iconColor, + required this.expandedIconColor, required this.trailingIconColor, required this.expandedTrailingIconColor, required this.backgroundColor, @@ -62,13 +54,11 @@ class MoonAccordionColors extends ThemeExtension with Diagn @override MoonAccordionColors copyWith({ - Color? leadingColor, - Color? expandedLeadingColor, - Color? titleColor, - Color? expandedTitleColor, - Color? trailingColor, - Color? expandedTrailingColor, + Color? textColor, + Color? expandedTextColor, Color? contentColor, + Color? iconColor, + Color? expandedIconColor, Color? trailingIconColor, Color? expandedTrailingIconColor, Color? backgroundColor, @@ -77,13 +67,11 @@ class MoonAccordionColors extends ThemeExtension with Diagn Color? dividerColor, }) { return MoonAccordionColors( - leadingColor: leadingColor ?? this.leadingColor, - expandedLeadingColor: expandedLeadingColor ?? this.expandedLeadingColor, - titleColor: titleColor ?? this.titleColor, - expandedTitleColor: expandedTitleColor ?? this.expandedTitleColor, - trailingColor: trailingColor ?? this.trailingColor, - expandedTrailingColor: expandedTrailingColor ?? this.expandedTrailingColor, + textColor: textColor ?? this.textColor, + expandedTextColor: expandedTextColor ?? this.expandedTextColor, contentColor: contentColor ?? this.contentColor, + iconColor: iconColor ?? this.iconColor, + expandedIconColor: expandedIconColor ?? this.expandedIconColor, trailingIconColor: trailingIconColor ?? this.trailingIconColor, expandedTrailingIconColor: expandedTrailingIconColor ?? this.expandedTrailingIconColor, backgroundColor: backgroundColor ?? this.backgroundColor, @@ -98,13 +86,11 @@ class MoonAccordionColors extends ThemeExtension with Diagn if (other is! MoonAccordionColors) return this; return MoonAccordionColors( - leadingColor: colorPremulLerp(leadingColor, other.leadingColor, t)!, - expandedLeadingColor: colorPremulLerp(expandedLeadingColor, other.expandedLeadingColor, t)!, - titleColor: colorPremulLerp(titleColor, other.titleColor, t)!, - expandedTitleColor: colorPremulLerp(expandedTitleColor, other.expandedTitleColor, t)!, - trailingColor: colorPremulLerp(trailingColor, other.trailingColor, t)!, - expandedTrailingColor: colorPremulLerp(expandedTrailingColor, other.expandedTrailingColor, t)!, + textColor: colorPremulLerp(textColor, other.textColor, t)!, + expandedTextColor: colorPremulLerp(expandedTextColor, other.expandedTextColor, t)!, contentColor: colorPremulLerp(contentColor, other.contentColor, t)!, + iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, + expandedIconColor: colorPremulLerp(expandedIconColor, other.expandedIconColor, t)!, trailingIconColor: colorPremulLerp(trailingIconColor, other.trailingIconColor, t)!, expandedTrailingIconColor: colorPremulLerp(expandedTrailingIconColor, other.expandedTrailingIconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, @@ -119,13 +105,11 @@ class MoonAccordionColors extends ThemeExtension with Diagn super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAccordionColors")) - ..add(ColorProperty("leadingColor", leadingColor)) - ..add(ColorProperty("expandedLeadingColor", expandedLeadingColor)) - ..add(ColorProperty("titleColor", titleColor)) - ..add(ColorProperty("expandedTitleColor", expandedTitleColor)) - ..add(ColorProperty("trailingColor", trailingColor)) - ..add(ColorProperty("expandedTrailingColor", expandedTrailingColor)) + ..add(ColorProperty("textColor", textColor)) + ..add(ColorProperty("expandedTextColor", expandedTextColor)) ..add(ColorProperty("contentColor", contentColor)) + ..add(ColorProperty("iconColor", iconColor)) + ..add(ColorProperty("expandedIconColor", expandedIconColor)) ..add(ColorProperty("trailingIconColor", trailingIconColor)) ..add(ColorProperty("expandedTrailingIconColor", expandedTrailingIconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)) diff --git a/lib/src/theme/accordion/accordion_theme.dart b/lib/src/theme/accordion/accordion_theme.dart index cc24cc4b..4560d93c 100644 --- a/lib/src/theme/accordion/accordion_theme.dart +++ b/lib/src/theme/accordion/accordion_theme.dart @@ -32,19 +32,17 @@ class MoonAccordionTheme extends ThemeExtension with Diagnos MoonAccordionSizes? sizes, }) : colors = colors ?? MoonAccordionColors( + textColor: tokens.colors.textPrimary, + expandedTextColor: tokens.colors.textPrimary, + contentColor: tokens.colors.textPrimary, + iconColor: tokens.colors.iconPrimary, + expandedIconColor: tokens.colors.iconPrimary, + trailingIconColor: tokens.colors.iconPrimary, + expandedTrailingIconColor: tokens.colors.iconSecondary, backgroundColor: tokens.colors.gohan, + expandedBackgroundColor: tokens.colors.gohan, borderColor: tokens.colors.beerus, - contentColor: tokens.colors.textPrimary, dividerColor: tokens.colors.beerus, - expandedBackgroundColor: tokens.colors.gohan, - expandedLeadingColor: tokens.colors.textPrimary, - expandedTitleColor: tokens.colors.textPrimary, - expandedTrailingColor: tokens.colors.textPrimary, - expandedTrailingIconColor: tokens.colors.textPrimary, - leadingColor: tokens.colors.textPrimary, - titleColor: tokens.colors.textPrimary, - trailingColor: tokens.colors.textPrimary, - trailingIconColor: tokens.colors.textSecondary, ), properties = properties ?? MoonAccordionProperties( diff --git a/lib/src/theme/chip/chip_sizes.dart b/lib/src/theme/chip/chip_sizes.dart index a178c881..6584bb44 100644 --- a/lib/src/theme/chip/chip_sizes.dart +++ b/lib/src/theme/chip/chip_sizes.dart @@ -24,9 +24,9 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre borderRadius: tokens.borders.interactiveXs, gap: tokens.sizes.x4s, height: tokens.sizes.sm, - iconSizeValue: tokens.sizes.x2s, + iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), - textStyle: tokens.typography.heading.textDefault, + textStyle: tokens.typography.body.textDefault, ), md = md ?? MoonChipSizeProperties( @@ -34,8 +34,8 @@ class MoonChipSizes extends ThemeExtension with DiagnosticableTre gap: tokens.sizes.x4s, height: tokens.sizes.md, iconSizeValue: tokens.sizes.xs, - padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), - textStyle: tokens.typography.heading.textDefault, + padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), + textStyle: tokens.typography.body.textDefault, ); @override diff --git a/lib/src/theme/tag/tag_sizes.dart b/lib/src/theme/tag/tag_sizes.dart index 8036445a..0087e1ef 100644 --- a/lib/src/theme/tag/tag_sizes.dart +++ b/lib/src/theme/tag/tag_sizes.dart @@ -26,7 +26,7 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM height: tokens.sizes.x2s, iconSizeValue: tokens.sizes.x3s, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), - textStyle: tokens.typography.body.text10.copyWith(fontWeight: FontWeight.w400), + textStyle: tokens.typography.body.text10, upperCaseTextStyle: tokens.typography.caption.text9, ), xs = xs ?? @@ -36,7 +36,7 @@ class MoonTagSizes extends ThemeExtension with DiagnosticableTreeM height: tokens.sizes.xs, iconSizeValue: tokens.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), - textStyle: tokens.typography.body.text12.copyWith(fontWeight: FontWeight.w400), + textStyle: tokens.typography.body.text12, upperCaseTextStyle: tokens.typography.caption.text10, ); diff --git a/lib/src/utils/measure_size.dart b/lib/src/utils/measure_size.dart index 3de84706..2b08b0a4 100644 --- a/lib/src/utils/measure_size.dart +++ b/lib/src/utils/measure_size.dart @@ -41,7 +41,7 @@ class MeasureSizeRenderObject extends RenderProxyBox { if (getInitialSize) { onChange(child!.size); } else { - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { onChange(newSize); }); } diff --git a/lib/src/widgets/accordion/accordion.dart b/lib/src/widgets/accordion/accordion.dart index f39cce6c..4e5a6a08 100644 --- a/lib/src/widgets/accordion/accordion.dart +++ b/lib/src/widgets/accordion/accordion.dart @@ -85,27 +85,17 @@ class MoonAccordion extends StatefulWidget { /// {@macro flutter.material.Material.clipBehavior} final Clip? clipBehavior; - /// The text and icon color of the widget in leading slot of the collapsed accordion. - final Color? leadingColor; + /// The icon color of the collapsed accordion header. + final Color? iconColor; - /// The text and icon color of the widget in leading slot of the expanded accordion. - final Color? expandedLeadingColor; + /// The icon color of the expanded accordion header. + final Color? expandedIconColor; - /// The text and icon color of the widget in title slot of the collapsed accordion. - final Color? titleColor; + /// The text color of the collapsed accordion header. + final Color? textColor; - /// The text and icon color of the widget in title slot of the expanded accordion. - final Color? expandedTitleColor; - - /// The text and icon color of the widget in trailing slot of the collapsed accordion. - /// - /// If trailing widget is not provided, default is 'downward caret' icon. - final Color? trailingColor; - - /// The text and icon color of the widget in trailing slot of the expanded accordion. - /// - /// If trailing widget is not provided, default is 'upward caret' icon. - final Color? expandedTrailingColor; + /// The text color of the expanded accordion header. + final Color? expandedTextColor; /// The background color of the collapsed accordion. final Color? backgroundColor; @@ -198,12 +188,10 @@ class MoonAccordion extends StatefulWidget { this.showDivider = true, this.borderRadius, this.clipBehavior, - this.leadingColor, - this.expandedLeadingColor, - this.titleColor, - this.expandedTitleColor, - this.trailingColor, - this.expandedTrailingColor, + this.iconColor, + this.expandedIconColor, + this.textColor, + this.expandedTextColor, this.backgroundColor, this.expandedBackgroundColor, this.borderColor, @@ -247,15 +235,13 @@ class _MoonAccordionState extends State> with TickerProvider late EdgeInsets _resolvedDirectionalHeaderPadding; late double _effectiveHeaderHeight; - final ColorTweenWithPremultipliedAlpha _leadingColorTween = ColorTweenWithPremultipliedAlpha(); - final ColorTweenWithPremultipliedAlpha _titleColorTween = ColorTweenWithPremultipliedAlpha(); - final ColorTweenWithPremultipliedAlpha _trailingColorTween = ColorTweenWithPremultipliedAlpha(); + final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); + final ColorTweenWithPremultipliedAlpha _iconColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _backgroundColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _hoverColorTween = ColorTweenWithPremultipliedAlpha(); - Animation? _leadingColor; - Animation? _titleColor; - Animation? _trailingColor; + Animation? _textColor; + Animation? _iconColor; Animation? _backgroundColor; Animation? _hoverColor; @@ -296,10 +282,7 @@ class _MoonAccordionState extends State> with TickerProvider widget.onExpansionChanged?.call(_isExpanded ? widget.identityValue : null); } - MoonAccordionSizeProperties _getMoonAccordionSize( - BuildContext context, - MoonAccordionSize? moonAccordionSize, - ) { + MoonAccordionSizeProperties _getMoonAccordionSize(BuildContext context, MoonAccordionSize? moonAccordionSize) { switch (moonAccordionSize) { case MoonAccordionSize.sm: return context.moonTheme?.accordionTheme.sizes.sm ?? MoonAccordionSizes(tokens: MoonTokens.light).sm; @@ -321,7 +304,7 @@ class _MoonAccordionState extends State> with TickerProvider _isExpanded = PageStorage.maybeOf(context)?.readState(context) as bool? ?? widget.initiallyExpanded || widget._selected; - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; if (_isExpanded) { @@ -369,22 +352,22 @@ class _MoonAccordionState extends State> with TickerProvider Widget? _buildIcon(BuildContext context) { final double iconSize = _getMoonAccordionSize(context, widget.accordionSize).iconSizeValue; - final Color effectiveTrailingIconColor = widget.trailingColor ?? + final Color effectiveTrailingIconColor = widget.iconColor ?? context.moonTheme?.accordionTheme.colors.trailingIconColor ?? MoonColors.light.textSecondary; - final Color effectiveExpandedTrailingIconColor = widget.expandedTrailingColor ?? + final Color effectiveExpandedTrailingIconColor = widget.expandedIconColor ?? context.moonTheme?.accordionTheme.colors.expandedTrailingIconColor ?? MoonColors.light.textPrimary; - _trailingColor ??= _trailingColorTween.animate(_expansionCurvedAnimation!); + _iconColor ??= _iconColorTween.animate(_expansionCurvedAnimation!); - _trailingColorTween + _iconColorTween ..begin = effectiveTrailingIconColor ..end = effectiveExpandedTrailingIconColor; return IconTheme( - data: IconThemeData(color: _trailingColor?.value), + data: IconThemeData(color: _iconColor?.value), child: RotationTransition( turns: _halfTween.animate(_expansionCurvedAnimation!), child: MoonIcon( @@ -408,13 +391,13 @@ class _MoonAccordionState extends State> with TickerProvider focusNode: _effectiveFocusNode, borderRadius: _effectiveBorderRadius.squircleBorderRadius(context), showScaleAnimation: false, - builder: (context, isEnabled, isHovered, isFocused, isPressed) { + builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool isActive = isHovered || isFocused; _handleActiveState(isActive); return AnimatedBuilder( animation: _hoverAnimationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return Container( clipBehavior: widget.clipBehavior ?? Clip.none, decoration: widget.decoration ?? @@ -456,31 +439,25 @@ class _MoonAccordionState extends State> with TickerProvider context.moonTheme?.accordionTheme.colors.expandedBackgroundColor ?? MoonColors.light.gohan; - final Color effectiveLeadingColor = - widget.leadingColor ?? context.moonTheme?.accordionTheme.colors.leadingColor ?? MoonColors.light.textPrimary; - - final Color effectiveExpandedLeadingColor = widget.expandedLeadingColor ?? - context.moonTheme?.accordionTheme.colors.expandedLeadingColor ?? - MoonColors.light.textPrimary; - - final Color effectiveTitleColor = - widget.titleColor ?? context.moonTheme?.accordionTheme.colors.titleColor ?? MoonColors.light.textPrimary; + final Color effectiveIconColor = + widget.iconColor ?? context.moonTheme?.accordionTheme.colors.iconColor ?? MoonColors.light.iconPrimary; - final Color effectiveExpandedTitleColor = widget.expandedTitleColor ?? - context.moonTheme?.accordionTheme.colors.expandedTitleColor ?? - MoonColors.light.textPrimary; + final Color effectiveExpandedIconColor = widget.expandedIconColor ?? + context.moonTheme?.accordionTheme.colors.expandedIconColor ?? + MoonColors.light.iconPrimary; - final Color effectiveTrailingColor = - widget.trailingColor ?? context.moonTheme?.accordionTheme.colors.trailingColor ?? MoonColors.light.textPrimary; + final Color effectiveTextColor = + widget.textColor ?? context.moonTheme?.accordionTheme.colors.textColor ?? MoonColors.light.textPrimary; - final Color effectiveExpandedTrailingColor = widget.expandedTrailingColor ?? - context.moonTheme?.accordionTheme.colors.expandedTrailingColor ?? + final Color effectiveExpandedTextColor = widget.expandedTextColor ?? + context.moonTheme?.accordionTheme.colors.expandedTextColor ?? MoonColors.light.textPrimary; final Color effectiveContentTextColor = context.moonTheme?.accordionTheme.colors.contentColor ?? MoonColors.light.textPrimary; final TextStyle effectiveHeaderTextStyle = _effectiveMoonAccordionSize.headerTextStyle; + final TextStyle effectiveContentTextStyle = _effectiveMoonAccordionSize.contentTextStyle; final Color effectiveHoverEffectColor = context.moonEffects?.controlHoverEffect.primaryHoverColor ?? @@ -518,56 +495,39 @@ class _MoonAccordionState extends State> with TickerProvider ..begin = _backgroundColor!.value ..end = Color.alphaBlend(effectiveHoverEffectColor, _backgroundColor!.value!); - _leadingColor ??= _leadingColorTween.animate(_expansionCurvedAnimation!); - _leadingColorTween - ..begin = effectiveLeadingColor - ..end = effectiveExpandedLeadingColor; - - _titleColor ??= _titleColorTween.animate(_expansionCurvedAnimation!); - _titleColorTween - ..begin = effectiveTitleColor - ..end = effectiveExpandedTitleColor; + _textColor ??= _textColorTween.animate(_expansionCurvedAnimation!); + _textColorTween + ..begin = effectiveTextColor + ..end = effectiveExpandedTextColor; - _trailingColor ??= _trailingColorTween.animate(_expansionCurvedAnimation!); - _trailingColorTween - ..begin = effectiveTrailingColor - ..end = effectiveExpandedTrailingColor; + _iconColor ??= _iconColorTween.animate(_expansionCurvedAnimation!); + _iconColorTween + ..begin = effectiveIconColor + ..end = effectiveExpandedIconColor; final Widget header = SizedBox( height: _effectiveHeaderHeight, child: Padding( padding: _resolvedDirectionalHeaderPadding, - child: Row( - children: [ - if (widget.leading != null) - IconTheme( - data: IconThemeData(color: _leadingColor!.value), - child: DefaultTextStyle( - style: effectiveHeaderTextStyle.copyWith(color: _leadingColor!.value), - child: Padding( + child: IconTheme( + data: IconThemeData(color: _iconColor!.value), + child: DefaultTextStyle( + style: effectiveHeaderTextStyle.copyWith(color: _textColor!.value), + child: Row( + children: [ + if (widget.leading != null) + Padding( padding: EdgeInsetsDirectional.only(end: widget.gap ?? _resolvedDirectionalHeaderPadding.left), child: widget.leading, ), - ), - ), - IconTheme( - data: IconThemeData(color: _titleColor!.value), - child: DefaultTextStyle( - style: effectiveHeaderTextStyle.copyWith(color: _titleColor!.value), - child: Expanded(child: widget.title), - ), - ), - IconTheme( - data: IconThemeData(color: _trailingColor!.value), - child: DefaultTextStyle( - style: effectiveHeaderTextStyle.copyWith(color: _trailingColor!.value), - child: Padding( + Expanded(child: widget.title), + Padding( padding: EdgeInsetsDirectional.only(start: widget.gap ?? _resolvedDirectionalHeaderPadding.right), child: widget.trailing ?? _buildIcon(context)!, ), - ), + ], ), - ], + ), ), ), ); @@ -626,6 +586,7 @@ class _MoonAccordionState extends State> with TickerProvider _expansionAnimationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this); final bool isClosed = !_isExpanded && _expansionAnimationController!.isDismissed; + final bool shouldRemoveChildren = isClosed && !widget.maintainState; final Widget result = Offstage( diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart index 4de66fd0..c059cdbf 100644 --- a/lib/src/widgets/alert/alert.dart +++ b/lib/src/widgets/alert/alert.dart @@ -133,12 +133,10 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix void initState() { super.initState(); - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; - if (_isVisible) { - _animationController!.value = 1.0; - } + if (_isVisible) _animationController!.value = 1.0; }); } @@ -147,17 +145,14 @@ class _MoonAlertState extends State with SingleTickerProviderStateMix super.didUpdateWidget(oldWidget); if (oldWidget.show != widget.show) { - if (widget.show) { - _showAlert(); - } else { - _hideAlert(); - } + widget.show ? _showAlert() : _hideAlert(); } } @override void dispose() { _animationController!.dispose(); + super.dispose(); } diff --git a/lib/src/widgets/authcode/authcode.dart b/lib/src/widgets/authcode/authcode.dart index 589b9c90..1f58d607 100644 --- a/lib/src/widgets/authcode/authcode.dart +++ b/lib/src/widgets/authcode/authcode.dart @@ -15,9 +15,16 @@ import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; -enum AuthFieldShape { box, underline, circle } +enum AuthFieldShape { + box, + underline, + circle, +} -enum ErrorAnimationType { noAnimation, shake } +enum ErrorAnimationType { + noAnimation, + shake, +} typedef MoonAuthCodeErrorBuilder = Widget Function(BuildContext context, String? errorText); @@ -368,15 +375,15 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix } void _initializeErrorAnimationListener() { - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; - _errorAnimationController!.addStatusListener((status) { + _errorAnimationController!.addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) _errorAnimationController!.reverse(); }); if (widget.errorStreamController != null) { - _errorAnimationSubscription = widget.errorStreamController!.stream.listen((errorAnimation) { + _errorAnimationSubscription = widget.errorStreamController!.stream.listen((ErrorAnimationType errorAnimation) { if (errorAnimation == ErrorAnimationType.shake) { _errorAnimationController!.forward(); } @@ -457,7 +464,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix } ShapeBorder _getAuthInputFieldShape({required int elementIndex}) { - final borderSide = BorderSide( + final BorderSide borderSide = BorderSide( color: _getBorderColorFromIndex(elementIndex), width: _getBorderWidthFromIndex(elementIndex), ); @@ -476,7 +483,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix } Future _updateTextField(String text) async { - final updatedList = List.filled(widget.authInputFieldCount, ''); + final List updatedList = List.filled(widget.authInputFieldCount, ''); for (int i = 0; i < widget.authInputFieldCount; i++) { updatedList[i] = text.length > i ? text[i] : ''; @@ -488,9 +495,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix }); } - String? _validateInput() { - return widget.validator.call(_textEditingController.text); - } + String? _validateInput() => widget.validator.call(_textEditingController.text); void _setState(void Function() function) { if (mounted) setState(function); @@ -499,6 +504,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix @override void initState() { super.initState(); + _initializeFields(); } @@ -514,7 +520,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix } List _generateAuthInputFields() { - final authInputFields = []; + final List authInputFields = []; for (int i = 0; i < widget.authInputFieldCount; i++) { authInputFields.add( @@ -539,6 +545,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix ), ); } + return authInputFields; } @@ -546,7 +553,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus && widget.showAuthFieldCursor) { - final cursorHeight = _resolvedTextStyle.fontSize!; + final double cursorHeight = _resolvedTextStyle.fontSize!; if (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount) { return Stack( @@ -593,7 +600,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix Widget _renderAuthInputFieldText({@required int? index}) { assert(index != null); - final showObscured = !widget.peekWhenObscuring || + final bool showObscured = !widget.peekWhenObscuring || (widget.peekWhenObscuring && _hasPeeked) || index != _inputList.where((x) => x.isNotEmpty).length - 1; @@ -609,7 +616,7 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix ); } - final text = widget.obscureText && _inputList[index].isNotEmpty && showObscured + final String text = widget.obscureText && _inputList[index].isNotEmpty && showObscured ? widget.obscuringCharacter : _inputList[index]; @@ -766,7 +773,9 @@ class _MoonAuthCodeState extends State with TickerProviderStateMix child: Stack( children: [ AbsorbPointer( - child: AutofillGroup(child: _getTextFormField()), + child: AutofillGroup( + child: _getTextFormField(), + ), ), Positioned( top: 0, @@ -807,11 +816,12 @@ class _CursorPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - const p1 = Offset.zero; - final p2 = Offset(0, size.height); - final paint = Paint() + const Offset p1 = Offset.zero; + final Offset p2 = Offset(0, size.height); + final Paint paint = Paint() ..color = cursorColor ..strokeWidth = 2; + canvas.drawLine(p1, p2, paint); } diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart index 26912a4e..5af40922 100644 --- a/lib/src/widgets/avatar/avatar.dart +++ b/lib/src/widgets/avatar/avatar.dart @@ -86,7 +86,8 @@ class MoonAvatar extends StatelessWidget { }); Alignment _avatarAlignmentMapper(BuildContext context) { - final isRTL = Directionality.of(context) == TextDirection.rtl; + final bool isRTL = Directionality.of(context) == TextDirection.rtl; + if (isRTL) { switch (badgeAlignment) { case MoonBadgeAlignment.topLeft: diff --git a/lib/src/widgets/avatar/avatar_clipper.dart b/lib/src/widgets/avatar/avatar_clipper.dart index fdedfd33..0b966951 100644 --- a/lib/src/widgets/avatar/avatar_clipper.dart +++ b/lib/src/widgets/avatar/avatar_clipper.dart @@ -25,7 +25,7 @@ class AvatarClipper extends CustomClipper { }); Path _getBadgePath() { - final badgeRadius = badgeSize / 2; + final double badgeRadius = badgeSize / 2; if (textDirection == TextDirection.rtl) { switch (badgeAlignment) { @@ -118,7 +118,7 @@ class AvatarClipper extends CustomClipper { @override Path getClip(Size size) { - final pathWithBadge = Path.combine( + final Path pathWithBadge = Path.combine( PathOperation.difference, // Avatar shape properties Path() @@ -138,7 +138,7 @@ class AvatarClipper extends CustomClipper { _getBadgePath(), ); - final pathWithoutBadge = Path() + final Path pathWithoutBadge = Path() ..addRRect( RRect.fromLTRBAndCorners( 0, diff --git a/lib/src/widgets/bottom_sheet/bottom_sheet.dart b/lib/src/widgets/bottom_sheet/bottom_sheet.dart index d23ae673..f073b33f 100644 --- a/lib/src/widgets/bottom_sheet/bottom_sheet.dart +++ b/lib/src/widgets/bottom_sheet/bottom_sheet.dart @@ -166,7 +166,7 @@ class MoonBottomSheetState extends State with TickerProviderSta if (_verifyingShouldClose) return false; _verifyingShouldClose = true; - final result = await widget.shouldClose?.call(); + final bool? result = await widget.shouldClose?.call(); _verifyingShouldClose = false; return result ?? false; @@ -180,12 +180,12 @@ class MoonBottomSheetState extends State with TickerProviderSta if (_dismissUnderway) return; _isDragging = true; - final progress = primaryDelta / (_childHeight ?? primaryDelta); + final double progress = primaryDelta / (_childHeight ?? primaryDelta); if (widget.shouldClose != null) { _cancelClose(); - final canClose = await shouldClose(); + final bool canClose = await shouldClose(); if (canClose) { _close(); @@ -213,10 +213,10 @@ class MoonBottomSheetState extends State with TickerProviderSta Future tryClose() async { if (widget.shouldClose != null) { _cancelClose(); + final bool canClose = await shouldClose(); - if (canClose) { - _close(); - } + + if (canClose) _close(); } else { _close(); } @@ -252,8 +252,9 @@ class MoonBottomSheetState extends State with TickerProviderSta if (scrollPosition.axis == Axis.horizontal) return; - final isScrollReversed = scrollPosition.axisDirection == AxisDirection.down; - final offset = isScrollReversed ? scrollPosition.pixels : scrollPosition.maxScrollExtent - scrollPosition.pixels; + final bool isScrollReversed = scrollPosition.axisDirection == AxisDirection.down; + final double offset = + isScrollReversed ? scrollPosition.pixels : scrollPosition.maxScrollExtent - scrollPosition.pixels; if (offset <= 0) { // Clamping Scroll Physics ends with a ScrollEndNotification providing DragEndDetail class while @@ -261,35 +262,32 @@ class MoonBottomSheetState extends State with TickerProviderSta // We use the velocity from DragEndDetails if available. if (notification is ScrollEndNotification) { - final dragDetails = notification.dragDetails; + final DragEndDetails? dragDetails = notification.dragDetails; + if (dragDetails != null) { _handleDragEnd(dragDetails.primaryVelocity ?? 0); _velocityTracker = null; _startTime = null; + return; } } // Otherwise calculate the velocity with a VelocityTracker. if (_velocityTracker == null) { - final pointerKind = _defaultPointerDeviceKind(context); + final PointerDeviceKind pointerKind = _defaultPointerDeviceKind(context); + _velocityTracker = VelocityTracker.withKind(pointerKind); _startTime = DateTime.now(); } DragUpdateDetails? dragDetails; - if (notification is ScrollUpdateNotification) { - dragDetails = notification.dragDetails; - } + if (notification is ScrollUpdateNotification) dragDetails = notification.dragDetails; - if (notification is OverscrollNotification) { - dragDetails = notification.dragDetails; - } + if (notification is OverscrollNotification) dragDetails = notification.dragDetails; - if (notification is UserScrollNotification) { - return; - } + if (notification is UserScrollNotification) return; assert(_velocityTracker != null); assert(_startTime != null); @@ -298,7 +296,7 @@ class MoonBottomSheetState extends State with TickerProviderSta final velocityTracker = _velocityTracker!; if (dragDetails != null) { - final duration = startTime.difference(DateTime.now()); + final Duration duration = startTime.difference(DateTime.now()); velocityTracker.addPosition(duration, Offset(0, offset)); @@ -306,7 +304,7 @@ class MoonBottomSheetState extends State with TickerProviderSta return; } else if (_isDragging) { - final velocity = velocityTracker.getVelocity().pixelsPerSecond.dy; + final double velocity = velocityTracker.getVelocity().pixelsPerSecond.dy; _velocityTracker = null; _startTime = null; @@ -351,7 +349,7 @@ class MoonBottomSheetState extends State with TickerProviderSta builder: (BuildContext context, Widget? child) { assert(child != null); - final animationValue = transitionCurve!.transform(widget.animationController.value); + final double animationValue = transitionCurve!.transform(widget.animationController.value); final draggableChild = widget.enableDrag ? KeyedSubtree( @@ -457,7 +455,8 @@ class _ModalBottomSheetLayout extends SingleChildLayoutDelegate { // Used with VelocityTracker // https://github.com/flutter/flutter/pull/64267#issuecomment-694196304 PointerDeviceKind _defaultPointerDeviceKind(BuildContext context) { - final platform = Theme.of(context).platform; + final TargetPlatform platform = Theme.of(context).platform; + switch (platform) { case TargetPlatform.iOS: case TargetPlatform.android: diff --git a/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart b/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart index 994aee87..5896cc34 100644 --- a/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart +++ b/lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart @@ -29,8 +29,10 @@ Future showMoonModalBottomSheet({ assert(debugCheckHasMediaQuery(context)); assert(debugCheckHasMaterialLocalizations(context)); - final hasMaterialLocalizations = Localizations.of(context, MaterialLocalizations) != null; - final barrierLabel = hasMaterialLocalizations ? MaterialLocalizations.of(context).modalBarrierDismissLabel : ''; + final bool hasMaterialLocalizations = Localizations.of(context, MaterialLocalizations) != null; + + final String barrierLabel = + hasMaterialLocalizations ? MaterialLocalizations.of(context).modalBarrierDismissLabel : ''; final CapturedThemes themes = InheritedTheme.capture( from: context, @@ -48,7 +50,7 @@ Future showMoonModalBottomSheet({ context.moonTheme?.bottomSheetTheme.properties.transitionCurve ?? const Cubic(0.0, 0.0, 0.2, 1.0); - final result = await Navigator.of(context, rootNavigator: useRootNavigator).push( + final T? result = await Navigator.of(context, rootNavigator: useRootNavigator).push( MoonModalBottomSheetRoute( enableDrag: enableDrag, isExpanded: isExpanded, @@ -217,7 +219,8 @@ class _ModalBottomSheetState extends State<_ModalBottomSheet> { ScrollController? _scrollController; String _getRouteLabel() { - final platform = Theme.of(context).platform; + final TargetPlatform platform = Theme.of(context).platform; + switch (platform) { case TargetPlatform.iOS: case TargetPlatform.linux: @@ -235,12 +238,13 @@ class _ModalBottomSheetState extends State<_ModalBottomSheet> { } Future _handleShouldClose() async { - final willPop = await widget.route.willPop(); + final RoutePopDisposition willPop = await widget.route.willPop(); + return willPop != RoutePopDisposition.doNotPop; } void _updateController() { - final animation = widget.route.animation; + final Animation? animation = widget.route.animation; // Used to relay the state of bottom sheet internal animation controller. if (animation != null) { @@ -269,15 +273,17 @@ class _ModalBottomSheetState extends State<_ModalBottomSheet> { assert(debugCheckHasMediaQuery(context)); assert(widget.route._animationController != null); - final scrollController = PrimaryScrollController.maybeOf(context) ?? (_scrollController ??= ScrollController()); + final ScrollController scrollController = + PrimaryScrollController.maybeOf(context) ?? (_scrollController ??= ScrollController()); return PrimaryScrollController( controller: scrollController, child: Builder( - builder: (context) => AnimatedBuilder( + builder: (BuildContext context) => AnimatedBuilder( animation: widget.route._animationController!, builder: (BuildContext context, Widget? child) { assert(child != null); + return Semantics( explicitChildNodes: true, label: _getRouteLabel(), diff --git a/lib/src/widgets/bottom_sheet/utils/scroll_to_top_status_bar.dart b/lib/src/widgets/bottom_sheet/utils/scroll_to_top_status_bar.dart index 59470eb4..8bc2e535 100644 --- a/lib/src/widgets/bottom_sheet/utils/scroll_to_top_status_bar.dart +++ b/lib/src/widgets/bottom_sheet/utils/scroll_to_top_status_bar.dart @@ -7,11 +7,7 @@ class ScrollToTopStatusBarHandler extends StatefulWidget { final ScrollController scrollController; final Widget child; - const ScrollToTopStatusBarHandler({ - super.key, - required this.scrollController, - required this.child, - }); + const ScrollToTopStatusBarHandler({super.key, required this.scrollController, required this.child}); @override ScrollToTopStatusBarState createState() => ScrollToTopStatusBarState(); @@ -19,7 +15,8 @@ class ScrollToTopStatusBarHandler extends StatefulWidget { class ScrollToTopStatusBarState extends State { void _handleStatusBarTap(BuildContext context) { - final controller = widget.scrollController; + final ScrollController controller = widget.scrollController; + if (controller.hasClients) { controller.animateTo( 0.0, @@ -46,7 +43,7 @@ class ScrollToTopStatusBarState extends State { right: 0, height: MediaQuery.of(context).padding.top, child: Builder( - builder: (context) => GestureDetector( + builder: (BuildContext context) => GestureDetector( behavior: HitTestBehavior.opaque, onTap: () => _handleStatusBarTap(context), // iOS accessibility automatically adds scroll-to-top to the clock in the status bar diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart index d6533522..3bf215aa 100644 --- a/lib/src/widgets/buttons/button.dart +++ b/lib/src/widgets/buttons/button.dart @@ -48,9 +48,6 @@ class MoonButton extends StatefulWidget { /// Whether the button should show a scale animation. final bool showScaleAnimation; - /// Whether the button should show a tooltip. - final bool showTooltip; - /// The border radius of the button. final BorderRadiusGeometry? borderRadius; @@ -141,9 +138,6 @@ class MoonButton extends StatefulWidget { /// The semantic label for the button. final String? semanticLabel; - /// The tooltip message for the button. - final String tooltipMessage; - /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -177,7 +171,6 @@ class MoonButton extends StatefulWidget { this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleAnimation = true, - this.showTooltip = false, this.borderRadius, this.backgroundColor, this.borderColor, @@ -208,7 +201,6 @@ class MoonButton extends StatefulWidget { this.buttonSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, this.leading, @@ -228,7 +220,6 @@ class MoonButton extends StatefulWidget { this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleAnimation = true, - this.showTooltip = false, this.borderRadius, this.backgroundColor, this.borderColor, @@ -258,7 +249,6 @@ class MoonButton extends StatefulWidget { this.buttonSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, Color? iconColor, @@ -284,11 +274,7 @@ class _MoonButtonState extends State with SingleTickerProviderStateM bool get _isEnabled => widget.onTap != null || widget.onLongPress != null; void _handleHoverEffect(bool shouldAnimate) { - if (shouldAnimate) { - _animationController?.forward(); - } else { - _animationController?.reverse(); - } + shouldAnimate ? _animationController?.forward() : _animationController?.reverse(); } MoonButtonSizeProperties _getMoonButtonSize(BuildContext context, MoonButtonSize? moonButtonSize) { @@ -311,6 +297,7 @@ class _MoonButtonState extends State with SingleTickerProviderStateM @override void dispose() { _animationController?.dispose(); + super.dispose(); } @@ -384,7 +371,6 @@ class _MoonButtonState extends State with SingleTickerProviderStateM showPulseEffect: widget.showPulseEffect, showPulseEffectJiggle: widget.showPulseEffectJiggle, showScaleAnimation: widget.showScaleAnimation, - showTooltip: widget.showTooltip, borderRadius: effectiveBorderRadius, backgroundColor: widget.backgroundColor, focusEffectColor: widget.focusEffectColor, @@ -402,23 +388,23 @@ class _MoonButtonState extends State with SingleTickerProviderStateM scaleEffectCurve: widget.scaleEffectCurve, focusNode: widget.focusNode, semanticLabel: widget.semanticLabel, - tooltipMessage: widget.tooltipMessage, onTap: widget.onTap, onLongPress: widget.onLongPress, - builder: (context, isEnabled, isHovered, isFocused, isPressed) { + builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool canAnimate = _isEnabled && (isHovered || isFocused || isPressed); + _handleHoverEffect(canAnimate); return AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _textColor!.value, size: effectiveMoonButtonSize.iconSizeValue, ), child: DefaultTextStyle( - style: TextStyle(color: _textColor!.value, fontSize: effectiveMoonButtonSize.textStyle.fontSize), + style: effectiveMoonButtonSize.textStyle.copyWith(color: _textColor!.value), child: Container( width: widget.width, height: effectiveHeight, diff --git a/lib/src/widgets/buttons/filled_button.dart b/lib/src/widgets/buttons/filled_button.dart index 72908931..b3a7a611 100644 --- a/lib/src/widgets/buttons/filled_button.dart +++ b/lib/src/widgets/buttons/filled_button.dart @@ -20,9 +20,6 @@ class MoonFilledButton extends StatelessWidget { /// Whether this button should show a pulse effect. final bool showPulseEffect; - /// Whether this button should show a tooltip. - final bool showTooltip; - /// The border radius of the button. final BorderRadiusGeometry? borderRadius; @@ -50,9 +47,6 @@ class MoonFilledButton extends StatelessWidget { /// The semantic label for the button. final String? semanticLabel; - /// The tooltip message for the button. - final String tooltipMessage; - /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -81,7 +75,6 @@ class MoonFilledButton extends StatelessWidget { this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showPulseEffect = false, - this.showTooltip = false, this.borderRadius, this.backgroundColor, this.height, @@ -91,7 +84,6 @@ class MoonFilledButton extends StatelessWidget { this.buttonSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, this.leading, @@ -101,11 +93,12 @@ class MoonFilledButton extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveBackgroundColor = backgroundColor ?? + final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.buttonTheme.colors.filledVariantBackgroundColor ?? MoonColors.light.piccolo; - final effectiveTextColor = context.moonTheme?.buttonTheme.colors.filledVariantTextColor ?? MoonColors.light.goten; + final Color effectiveTextColor = + context.moonTheme?.buttonTheme.colors.filledVariantTextColor ?? MoonColors.light.goten; return MoonButton( autofocus: autofocus, @@ -113,7 +106,6 @@ class MoonFilledButton extends StatelessWidget { ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, showPulseEffect: showPulseEffect, - showTooltip: showTooltip, textColor: effectiveTextColor, borderRadius: borderRadius, backgroundColor: effectiveBackgroundColor, @@ -124,7 +116,6 @@ class MoonFilledButton extends StatelessWidget { buttonSize: buttonSize, decoration: decoration, semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, onTap: onTap, onLongPress: onLongPress, label: label, diff --git a/lib/src/widgets/buttons/outlined_button.dart b/lib/src/widgets/buttons/outlined_button.dart index 7f5a7a18..1f871961 100644 --- a/lib/src/widgets/buttons/outlined_button.dart +++ b/lib/src/widgets/buttons/outlined_button.dart @@ -18,9 +18,6 @@ class MoonOutlinedButton extends StatelessWidget { /// Whether this button should show a pulse effect. final bool showPulseEffect; - /// Whether the button should show a tooltip. - final bool showTooltip; - /// The border radius of the button. final BorderRadiusGeometry? borderRadius; @@ -48,9 +45,6 @@ class MoonOutlinedButton extends StatelessWidget { /// The semantic label for the button. final String? semanticLabel; - /// The tooltip message for the button. - final String tooltipMessage; - /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -79,7 +73,6 @@ class MoonOutlinedButton extends StatelessWidget { this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showPulseEffect = false, - this.showTooltip = false, this.borderRadius, this.borderColor, this.height, @@ -89,7 +82,6 @@ class MoonOutlinedButton extends StatelessWidget { this.buttonSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, this.label, @@ -105,7 +97,6 @@ class MoonOutlinedButton extends StatelessWidget { ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, showPulseEffect: showPulseEffect, - showTooltip: showTooltip, showBorder: true, borderRadius: borderRadius, borderColor: borderColor, @@ -116,7 +107,6 @@ class MoonOutlinedButton extends StatelessWidget { buttonSize: buttonSize, decoration: decoration, semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, onTap: onTap, onLongPress: onLongPress, label: label, diff --git a/lib/src/widgets/buttons/text_button.dart b/lib/src/widgets/buttons/text_button.dart index 9d5f8921..433b40a0 100644 --- a/lib/src/widgets/buttons/text_button.dart +++ b/lib/src/widgets/buttons/text_button.dart @@ -21,9 +21,6 @@ class MoonTextButton extends StatelessWidget { /// Whether this button should show a pulse effect. final bool showPulseEffect; - /// Whether this button should show a tooltip. - final bool showTooltip; - /// The height of the button. final double? height; @@ -45,9 +42,6 @@ class MoonTextButton extends StatelessWidget { /// The semantic label for the button. final String? semanticLabel; - /// The tooltip message for the button. - final String tooltipMessage; - /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -76,7 +70,6 @@ class MoonTextButton extends StatelessWidget { this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showPulseEffect = false, - this.showTooltip = false, this.height, this.width, this.minTouchTargetSize = 40, @@ -84,7 +77,6 @@ class MoonTextButton extends StatelessWidget { this.buttonSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, this.label, @@ -94,14 +86,16 @@ class MoonTextButton extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveTextColor = + final Color effectiveTextColor = context.moonTheme?.buttonTheme.colors.textVariantTextColor ?? MoonColors.light.textSecondary; - final effectiveHoverTextColor = context.moonTheme?.buttonTheme.colors.textColor ?? MoonColors.light.textPrimary; + final Color effectiveHoverTextColor = + context.moonTheme?.buttonTheme.colors.textColor ?? MoonColors.light.textPrimary; - final effectiveHoverColor = context.moonTheme?.buttonTheme.colors.textVariantHoverColor ?? MoonColors.light.jiren; + final Color effectiveHoverColor = + context.moonTheme?.buttonTheme.colors.textVariantHoverColor ?? MoonColors.light.jiren; - final effectiveFocusColor = + final Color effectiveFocusColor = context.moonTheme?.buttonTheme.colors.textVariantFocusColor.withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? MoonColors.light.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2); @@ -111,7 +105,6 @@ class MoonTextButton extends StatelessWidget { ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, showPulseEffect: showPulseEffect, - showTooltip: showTooltip, textColor: effectiveTextColor, hoverTextColor: effectiveHoverTextColor, hoverEffectColor: effectiveHoverColor, @@ -123,7 +116,6 @@ class MoonTextButton extends StatelessWidget { buttonSize: buttonSize, decoration: decoration, semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, onTap: onTap, onLongPress: onLongPress, label: label, diff --git a/lib/src/widgets/carousel/carousel.dart b/lib/src/widgets/carousel/carousel.dart index 5e2cc213..42337b45 100644 --- a/lib/src/widgets/carousel/carousel.dart +++ b/lib/src/widgets/carousel/carousel.dart @@ -120,10 +120,11 @@ class MoonCarousel extends StatefulWidget { class _MoonCarouselState extends State { final Key _forwardListKey = const ValueKey("moon_carousel_key"); + late double _effectiveGap = 0; + late int _lastReportedItemIndex; - late MoonCarouselScrollController _scrollController; - late double _effectiveGap = 0; + late MoonCarouselScrollController _scrollController; // Get the anchor for the viewport to place the item at the isCentered. double _getCenteredAnchor(BoxConstraints constraints) { @@ -158,7 +159,7 @@ class _MoonCarouselState extends State { _lastReportedItemIndex = _scrollController.initialItem; if (widget.autoPlay) { - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { final Duration effectiveAutoPlayDelay = widget.autoPlayDelay ?? context.moonTheme?.carouselTheme.properties.autoPlayDelay ?? const Duration(seconds: 3); @@ -212,6 +213,7 @@ class _MoonCarouselState extends State { @override void dispose() { _scrollController.dispose(); + super.dispose(); } @@ -281,10 +283,12 @@ class _MoonCarouselState extends State { return NotificationListener( onNotification: (ScrollUpdateNotification notification) { final MoonCarouselExtentMetrics metrics = notification.metrics as MoonCarouselExtentMetrics; + final int currentItem = metrics.itemIndex; if (currentItem != _lastReportedItemIndex) { _lastReportedItemIndex = currentItem; + final int trueIndex = _getTrueIndex(_lastReportedItemIndex, widget.itemCount); if (widget.onIndexChanged != null) { @@ -297,7 +301,7 @@ class _MoonCarouselState extends State { }, child: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { - final centeredAnchor = _getCenteredAnchor(constraints); + final double centeredAnchor = _getCenteredAnchor(constraints); return IconTheme( data: IconThemeData( @@ -367,11 +371,17 @@ class _MoonCarouselScrollable extends Scrollable { class _MoonCarouselScrollableState extends ScrollableState { bool get clampMaxExtent => (widget as _MoonCarouselScrollable).clampMaxExtent; + bool get loop => (widget as _MoonCarouselScrollable).loop; + double get anchor => (widget as _MoonCarouselScrollable).anchor; + double get gap => (widget as _MoonCarouselScrollable).gap; + double get itemExtent => (widget as _MoonCarouselScrollable).itemExtent; + double get velocityFactor => (widget as _MoonCarouselScrollable).velocityFactor; + int get itemCount => (widget as _MoonCarouselScrollable).itemCount; } @@ -386,11 +396,7 @@ class MoonCarouselScrollController extends ScrollController { // Timer for autoplay. Timer? _autoplayTimer; - void startAutoPlay({ - Duration delay = const Duration(seconds: 3), - Duration? duration, - Curve? curve, - }) { + void startAutoPlay({Duration delay = const Duration(seconds: 3), Duration? duration, Curve? curve}) { _autoplayTimer?.cancel(); _autoplayTimer = Timer.periodic(delay, (timer) { @@ -410,6 +416,7 @@ class MoonCarouselScrollController extends ScrollController { @override void dispose() { stopAutoplay(); + super.dispose(); } @@ -420,11 +427,7 @@ class MoonCarouselScrollController extends ScrollController { ); /// Animate to specific item index. - Future animateToItem( - int itemIndex, { - Duration? duration, - Curve? curve, - }) async { + Future animateToItem(int itemIndex, {Duration? duration, Curve? curve}) async { if (!hasClients) return; await Future.wait([ @@ -445,10 +448,7 @@ class MoonCarouselScrollController extends ScrollController { } /// Animate to the next item in the viewport. - Future nextItem({ - Duration? duration, - Curve? curve, - }) async { + Future nextItem({Duration? duration, Curve? curve}) async { if (!hasClients) return; await Future.wait([ @@ -540,9 +540,7 @@ double _clipOffsetToScrollableRange(double offset, double minScrollExtent, doubl /// Get the modded item index from the real index. int _getTrueIndex(int currentIndex, int totalCount) { - if (currentIndex >= 0) { - return currentIndex % totalCount; - } + if (currentIndex >= 0) return currentIndex % totalCount; return (totalCount + (currentIndex % totalCount)) % totalCount; } @@ -557,39 +555,36 @@ class _MoonCarouselScrollPosition extends ScrollPositionWithSingleContext implem super(initialPixels: _getItemExtentFromScrollContext(context) * initialItem); double get anchor => _getAnchorFromScrollContext(context); - static double _getAnchorFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).anchor; - } + + static double _getAnchorFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).anchor; double get itemExtent => _getItemExtentFromScrollContext(context); - static double _getItemExtentFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).itemExtent; - } + + static double _getItemExtentFromScrollContext(ScrollContext context) => + (context as _MoonCarouselScrollableState).itemExtent; double get gap => _getGapFromScrollContext(context); - static double _getGapFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).gap; - } + + static double _getGapFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).gap; int get itemCount => _getItemCountFromScrollContext(context); - static int _getItemCountFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).itemCount; - } + + static int _getItemCountFromScrollContext(ScrollContext context) => + (context as _MoonCarouselScrollableState).itemCount; bool get clampMaxExtent => _getDeferMaxExtentFromScrollContext(context); - static bool _getDeferMaxExtentFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).clampMaxExtent; - } + + static bool _getDeferMaxExtentFromScrollContext(ScrollContext context) => + (context as _MoonCarouselScrollableState).clampMaxExtent; bool get loop => _getLoopFromScrollContext(context); - static bool _getLoopFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).loop; - } + + static bool _getLoopFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).loop; double get velocityFactor => _getVelocityFactorFromScrollContext(context); - static double _getVelocityFactorFromScrollContext(ScrollContext context) { - return (context as _MoonCarouselScrollableState).velocityFactor; - } + + static double _getVelocityFactorFromScrollContext(ScrollContext context) => + (context as _MoonCarouselScrollableState).velocityFactor; @override int get itemIndex { @@ -648,9 +643,7 @@ class MoonCarouselScrollPhysics extends ScrollPhysics { @override MoonCarouselScrollPhysics applyTo(ScrollPhysics? ancestor) { - return MoonCarouselScrollPhysics( - parent: buildParent(ancestor), - ); + return MoonCarouselScrollPhysics(parent: buildParent(ancestor)); } @override @@ -677,6 +670,7 @@ class MoonCarouselScrollPhysics extends ScrollPhysics { ), ]); } + return true; }()); if (value < position.pixels && position.pixels <= position.minScrollExtent) { @@ -737,7 +731,8 @@ class MoonCarouselScrollPhysics extends ScrollPhysics { // Scenario 3: // If there's no velocity and we're already at where we intend to land, do nothing. - final tolerance = toleranceFor(metrics); + final Tolerance tolerance = toleranceFor(metrics); + if (velocity.abs() < tolerance.velocity && (settlingPixels - metrics.pixels).abs() < tolerance.distance) { return null; } diff --git a/lib/src/widgets/checkbox/checkbox.dart b/lib/src/widgets/checkbox/checkbox.dart index e868ab63..3a9ab3ba 100644 --- a/lib/src/widgets/checkbox/checkbox.dart +++ b/lib/src/widgets/checkbox/checkbox.dart @@ -166,12 +166,10 @@ class _MoonCheckboxState extends State with TickerProviderStateMix bool? get value => widget.value; BorderSide? _resolveSide(BorderSide? side) { - if (side is MaterialStateBorderSide) { - return MaterialStateProperty.resolveAs(side, states); - } - if (!states.contains(MaterialState.selected)) { - return side; - } + if (side is MaterialStateBorderSide) return MaterialStateProperty.resolveAs(side, states); + + if (!states.contains(MaterialState.selected)) return side; + return null; } diff --git a/lib/src/widgets/checkbox/checkbox_painter.dart b/lib/src/widgets/checkbox/checkbox_painter.dart index 6dd55f90..b2cc506c 100644 --- a/lib/src/widgets/checkbox/checkbox_painter.dart +++ b/lib/src/widgets/checkbox/checkbox_painter.dart @@ -8,56 +8,57 @@ class MoonCheckboxPainter extends ToggleablePainter { Color get checkColor => _checkColor!; Color? _checkColor; + set checkColor(Color value) { - if (_checkColor == value) { - return; - } + if (_checkColor == value) return; + _checkColor = value; notifyListeners(); } bool? get value => _value; bool? _value; + set value(bool? value) { - if (_value == value) { - return; - } + if (_value == value) return; + _value = value; notifyListeners(); } bool? get previousValue => _previousValue; bool? _previousValue; + set previousValue(bool? value) { - if (_previousValue == value) { - return; - } + if (_previousValue == value) return; + _previousValue = value; notifyListeners(); } OutlinedBorder get shape => _shape!; OutlinedBorder? _shape; + set shape(OutlinedBorder value) { - if (_shape == value) { - return; - } + if (_shape == value) return; + _shape = value; notifyListeners(); } BorderSide? get side => _side; BorderSide? _side; + set side(BorderSide? value) { - if (_side == value) { - return; - } + if (_side == value) return; + _side = value; notifyListeners(); } Rect _outerRectAt(Offset origin, double t) { final Rect rect = Rect.fromLTWH(origin.dx, origin.dy, _kEdgeSize, _kEdgeSize); + return rect; } @@ -77,12 +78,9 @@ class MoonCheckboxPainter extends ToggleablePainter { } void _drawBox(Canvas canvas, Rect outer, Paint paint, BorderSide? side, bool fill) { - if (fill) { - canvas.drawPath(shape.getOuterPath(outer), paint); - } - if (side != null) { - shape.copyWith(side: side).paint(canvas, outer); - } + if (fill) canvas.drawPath(shape.getOuterPath(outer), paint); + + if (side != null) shape.copyWith(side: side).paint(canvas, outer); } void _drawCheck(Canvas canvas, Offset origin, double t, Paint paint) { @@ -90,21 +88,26 @@ class MoonCheckboxPainter extends ToggleablePainter { // As t goes from 0.0 to 1.0, animate the two check mark strokes from the // short side to the long side. final Path path = Path(); + const Offset start = Offset(_kEdgeSize * 0.15, _kEdgeSize * 0.45); const Offset mid = Offset(_kEdgeSize * 0.4, _kEdgeSize * 0.7); const Offset end = Offset(_kEdgeSize * 0.85, _kEdgeSize * 0.25); + if (t < 0.5) { final double strokeT = t * 2.0; final Offset drawMid = Offset.lerp(start, mid, strokeT)!; + path.moveTo(origin.dx + start.dx, origin.dy + start.dy); path.lineTo(origin.dx + drawMid.dx, origin.dy + drawMid.dy); } else { final double strokeT = (t - 0.5) * 2.0; final Offset drawEnd = Offset.lerp(mid, end, strokeT)!; + path.moveTo(origin.dx + start.dx, origin.dy + start.dy); path.lineTo(origin.dx + mid.dx, origin.dy + mid.dy); path.lineTo(origin.dx + drawEnd.dx, origin.dy + drawEnd.dy); } + canvas.drawPath(path, paint); } @@ -115,15 +118,15 @@ class MoonCheckboxPainter extends ToggleablePainter { const Offset start = Offset(_kEdgeSize * 0.2, _kEdgeSize * 0.5); const Offset mid = Offset(_kEdgeSize * 0.5, _kEdgeSize * 0.5); const Offset end = Offset(_kEdgeSize * 0.8, _kEdgeSize * 0.5); + final Offset drawStart = Offset.lerp(start, mid, 1.0 - t)!; final Offset drawEnd = Offset.lerp(mid, end, t)!; + canvas.drawLine(origin + drawStart, origin + drawEnd, paint); } @override void paint(Canvas canvas, Size size) { - //paintRadialReaction(canvas: canvas, origin: size.center(Offset.zero)); - final Paint strokePaint = _createStrokePaint(); final Offset origin = size / 2.0 - const Size.square(_kEdgeSize) / 2.0 as Offset; final AnimationStatus status = position.status; @@ -139,10 +142,13 @@ class MoonCheckboxPainter extends ToggleablePainter { if (t <= 0.5) { final BorderSide border = side ?? BorderSide(color: paint.color); + _drawBox(canvas, outer, paint, border, true); // only paint the border } else { _drawBox(canvas, outer, paint, side, true); + final double tShrink = (t - 0.5) * 2.0; + if (previousValue == null || value == null) { _drawDash(canvas, origin, tShrink, strokePaint); } else { @@ -155,8 +161,10 @@ class MoonCheckboxPainter extends ToggleablePainter { final Paint paint = Paint()..color = _colorAt(1.0); _drawBox(canvas, outer, paint, side, true); + if (tNormalized <= 0.5) { final double tShrink = 1.0 - tNormalized * 2.0; + if (previousValue ?? false) { _drawCheck(canvas, origin, tShrink, strokePaint); } else { @@ -164,6 +172,7 @@ class MoonCheckboxPainter extends ToggleablePainter { } } else { final double tExpand = (tNormalized - 0.5) * 2.0; + if (value ?? false) { _drawCheck(canvas, origin, tExpand, strokePaint); } else { diff --git a/lib/src/widgets/chips/chip.dart b/lib/src/widgets/chips/chip.dart index 0952e9ed..57706679 100644 --- a/lib/src/widgets/chips/chip.dart +++ b/lib/src/widgets/chips/chip.dart @@ -36,9 +36,6 @@ class MoonChip extends StatefulWidget { /// Whether the chip should show a focus effect. final bool showFocusEffect; - /// Whether the chip should show a tooltip. - final bool showTooltip; - /// The border radius of the chip. final BorderRadiusGeometry? borderRadius; @@ -108,9 +105,6 @@ class MoonChip extends StatefulWidget { /// The semantic label for the chip. final String? semanticLabel; - /// The tooltip message for the chip. - final String tooltipMessage; - /// The callback that is called when the chip is tapped or pressed. final VoidCallback? onTap; @@ -135,7 +129,6 @@ class MoonChip extends StatefulWidget { this.isActive = false, this.showBorder = false, this.showFocusEffect = true, - this.showTooltip = false, this.borderRadius, this.activeColor, this.backgroundColor, @@ -159,7 +152,6 @@ class MoonChip extends StatefulWidget { this.chipSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, this.label, @@ -176,7 +168,6 @@ class MoonChip extends StatefulWidget { this.isActive = false, this.showBorder = false, this.showFocusEffect = true, - this.showTooltip = false, this.borderRadius, this.activeColor, this.activeBackgroundColor, @@ -199,7 +190,6 @@ class MoonChip extends StatefulWidget { this.chipSize, this.decoration, this.semanticLabel, - this.tooltipMessage = "", this.onTap, this.onLongPress, this.label, @@ -223,11 +213,7 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin AnimationController? _animationController; void _handleActiveEffect(bool shouldAnimate) { - if (shouldAnimate) { - _animationController?.forward(); - } else { - _animationController?.reverse(); - } + shouldAnimate ? _animationController?.forward() : _animationController?.reverse(); } MoonChipSizeProperties _getMoonChipSize(BuildContext context, MoonChipSize? moonChipSize) { @@ -236,7 +222,6 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin return context.moonTheme?.chipTheme.sizes.sm ?? MoonChipSizes(tokens: MoonTokens.light).sm; case MoonChipSize.md: return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizes(tokens: MoonTokens.light).md; - default: return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizes(tokens: MoonTokens.light).md; } @@ -245,6 +230,7 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin @override void dispose() { _animationController?.dispose(); + super.dispose(); } @@ -323,7 +309,6 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin ensureMinimalTouchTargetSize: widget.ensureMinimalTouchTargetSize, showFocusEffect: widget.showFocusEffect, showScaleAnimation: false, - showTooltip: widget.showTooltip, borderRadius: effectiveBorderRadius, backgroundColor: widget.backgroundColor, focusEffectColor: widget.focusEffectColor, @@ -333,27 +318,24 @@ class _MoonChipState extends State with SingleTickerProviderStateMixin focusEffectDuration: widget.focusEffectDuration, focusEffectCurve: widget.focusEffectCurve, focusNode: widget.focusNode, - tooltipMessage: widget.tooltipMessage, semanticLabel: widget.semanticLabel, onTap: widget.onTap ?? () {}, onLongPress: widget.onLongPress, - builder: (context, isEnabled, isHovered, isFocused, isPressed) { + builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool canAnimate = widget.isActive || isHovered || isFocused; + _handleActiveEffect(canAnimate); return AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _textColor!.value, size: effectiveMoonChipSize.iconSizeValue, ), child: DefaultTextStyle( - style: TextStyle( - color: _textColor!.value, - fontSize: effectiveMoonChipSize.textStyle.fontSize, - ), + style: effectiveMoonChipSize.textStyle.copyWith(color: _textColor!.value), child: Container( width: widget.width, height: effectiveHeight, diff --git a/lib/src/widgets/common/base_control.dart b/lib/src/widgets/common/base_control.dart index b9e57056..83a47cf3 100644 --- a/lib/src/widgets/common/base_control.dart +++ b/lib/src/widgets/common/base_control.dart @@ -9,7 +9,6 @@ import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/common/effects/pulse_effect.dart'; -import 'package:moon_design/src/widgets/tooltip/tooltip.dart'; typedef MoonBaseControlBuilder = Widget Function( BuildContext context, @@ -44,9 +43,6 @@ class MoonBaseControl extends StatefulWidget { /// Whether this control should show a scale animation. final bool showScaleAnimation; - /// Whether this control should show a tooltip. - final bool showTooltip; - /// The border radius of the control. final BorderRadiusGeometry? borderRadius; @@ -106,9 +102,6 @@ class MoonBaseControl extends StatefulWidget { /// The semantic label for this control. final String? semanticLabel; - /// The tooltip message for this control. - final String tooltipMessage; - /// The callback that is called when the control is focused or unfocused. final void Function(bool)? onFocus; @@ -137,7 +130,6 @@ class MoonBaseControl extends StatefulWidget { this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleAnimation = true, - this.showTooltip = false, this.borderRadius = BorderRadius.zero, this.backgroundColor, this.focusEffectColor, @@ -157,7 +149,6 @@ class MoonBaseControl extends StatefulWidget { this.builder, this.cursor = SystemMouseCursors.click, this.semanticLabel, - this.tooltipMessage = "", this.onFocus, this.onHover, this.onTap, @@ -184,8 +175,6 @@ class _MoonBaseControlState extends State { bool get _isEnabled => widget.onTap != null || widget.onLongPress != null; - bool get _canShowTooltip => widget.showTooltip && _isEnabled && (_isFocused || _isHovered || _isLongPressed); - bool get _canAnimateFocus => widget.showFocusEffect && _isEnabled && _isFocused; bool get _canAnimatePulse => widget.showPulseEffect && _isEnabled; @@ -395,73 +384,69 @@ class _MoonBaseControlState extends State { _isPressed, ); - return MoonTooltip( - show: _canShowTooltip, - content: Text(widget.tooltipMessage), - child: MergeSemantics( - child: Semantics( - label: widget.semanticLabel, - button: widget.semanticTypeIsButton, - enabled: _isEnabled, - focusable: _isEnabled, - focused: _isFocused, - child: AbsorbPointer( - absorbing: !_isEnabled, - child: FocusableActionDetector( - enabled: _isEnabled && widget.isFocusable, - actions: _actions, - mouseCursor: _cursor, - focusNode: _effectiveFocusNode, - autofocus: _isEnabled && widget.autofocus, - onFocusChange: _handleFocusChange, - onShowFocusHighlight: _handleFocus, - onShowHoverHighlight: _handleHover, - child: GestureDetector( - excludeFromSemantics: true, - behavior: HitTestBehavior.opaque, - onTap: _handleTap, - onTapDown: _handleTapDown, - onTapUp: _handleTapUp, - onLongPress: _handleLongPress, - onLongPressStart: _handleLongPressStart, - onLongPressUp: _handleLongPressUp, - onTapCancel: _handleTapCancel, - onHorizontalDragStart: _handleHorizontalDragStart, - onHorizontalDragEnd: _handleHorizontalDragEnd, - onVerticalDragStart: _handleVerticalDragStart, - onVerticalDragEnd: _handleVerticalDragEnd, - child: TouchTargetPadding( - minSize: widget.ensureMinimalTouchTargetSize - ? Size(widget.minTouchTargetSize, widget.minTouchTargetSize) - : Size.zero, - child: RepaintBoundary( - child: AnimatedScale( - scale: _canAnimateScale ? effectiveScaleEffectScalar : 1, - duration: effectiveScaleEffectDuration, - curve: effectiveScaleEffectCurve, - child: MoonPulseEffect( - show: _canAnimatePulse, - showJiggle: widget.showPulseEffectJiggle, - childBorderRadius: widget.borderRadius, - effectColor: effectivePulseEffectColor, - effectExtent: effectivePulseEffectExtent, - effectCurve: effectivePulseEffectCurve, - effectDuration: effectivePulseEffectDuration, - child: AnimatedOpacity( - opacity: _isEnabled ? 1 : effectiveDisabledOpacityValue, - duration: context.moonTransitions?.defaultTransitionDuration ?? - MoonTransitions.transitions.defaultTransitionDuration, - curve: context.moonTransitions?.defaultTransitionCurve ?? - MoonTransitions.transitions.defaultTransitionCurve, - child: MoonFocusEffect( - show: _canAnimateFocus, - effectColor: focusColor, - effectExtent: effectiveFocusEffectExtent, - effectCurve: effectiveFocusEffectCurve, - effectDuration: effectiveFocusEffectDuration, - childBorderRadius: widget.borderRadius, - child: child, - ), + return MergeSemantics( + child: Semantics( + label: widget.semanticLabel, + button: widget.semanticTypeIsButton, + enabled: _isEnabled, + focusable: _isEnabled, + focused: _isFocused, + child: AbsorbPointer( + absorbing: !_isEnabled, + child: FocusableActionDetector( + enabled: _isEnabled && widget.isFocusable, + actions: _actions, + mouseCursor: _cursor, + focusNode: _effectiveFocusNode, + autofocus: _isEnabled && widget.autofocus, + onFocusChange: _handleFocusChange, + onShowFocusHighlight: _handleFocus, + onShowHoverHighlight: _handleHover, + child: GestureDetector( + excludeFromSemantics: true, + behavior: HitTestBehavior.opaque, + onTap: _handleTap, + onTapDown: _handleTapDown, + onTapUp: _handleTapUp, + onLongPress: _handleLongPress, + onLongPressStart: _handleLongPressStart, + onLongPressUp: _handleLongPressUp, + onTapCancel: _handleTapCancel, + onHorizontalDragStart: _handleHorizontalDragStart, + onHorizontalDragEnd: _handleHorizontalDragEnd, + onVerticalDragStart: _handleVerticalDragStart, + onVerticalDragEnd: _handleVerticalDragEnd, + child: TouchTargetPadding( + minSize: widget.ensureMinimalTouchTargetSize + ? Size(widget.minTouchTargetSize, widget.minTouchTargetSize) + : Size.zero, + child: RepaintBoundary( + child: AnimatedScale( + scale: _canAnimateScale ? effectiveScaleEffectScalar : 1, + duration: effectiveScaleEffectDuration, + curve: effectiveScaleEffectCurve, + child: MoonPulseEffect( + show: _canAnimatePulse, + showJiggle: widget.showPulseEffectJiggle, + childBorderRadius: widget.borderRadius, + effectColor: effectivePulseEffectColor, + effectExtent: effectivePulseEffectExtent, + effectCurve: effectivePulseEffectCurve, + effectDuration: effectivePulseEffectDuration, + child: AnimatedOpacity( + opacity: _isEnabled ? 1 : effectiveDisabledOpacityValue, + duration: context.moonTransitions?.defaultTransitionDuration ?? + MoonTransitions.transitions.defaultTransitionDuration, + curve: context.moonTransitions?.defaultTransitionCurve ?? + MoonTransitions.transitions.defaultTransitionCurve, + child: MoonFocusEffect( + show: _canAnimateFocus, + effectColor: focusColor, + effectExtent: effectiveFocusEffectExtent, + effectCurve: effectiveFocusEffectCurve, + effectDuration: effectiveFocusEffectDuration, + childBorderRadius: widget.borderRadius, + child: child, ), ), ), diff --git a/lib/src/widgets/common/effects/focus_effect.dart b/lib/src/widgets/common/effects/focus_effect.dart index 295c8172..752493b1 100644 --- a/lib/src/widgets/common/effects/focus_effect.dart +++ b/lib/src/widgets/common/effects/focus_effect.dart @@ -42,11 +42,7 @@ class _MoonFocusEffectState extends State with SingleTickerProv void didUpdateWidget(MoonFocusEffect oldWidget) { super.didUpdateWidget(oldWidget); - if (widget.show) { - _animationController.forward(); - } else { - _animationController.reverse(); - } + widget.show ? _animationController.forward() : _animationController.reverse(); } @override @@ -62,7 +58,7 @@ class _MoonFocusEffectState extends State with SingleTickerProv return AnimatedBuilder( animation: _animationController, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return RepaintBoundary( child: CustomPaint( willChange: true, diff --git a/lib/src/widgets/common/effects/painters/pulse_effect_painter.dart b/lib/src/widgets/common/effects/painters/pulse_effect_painter.dart index 04db2ce0..55018fd5 100644 --- a/lib/src/widgets/common/effects/painters/pulse_effect_painter.dart +++ b/lib/src/widgets/common/effects/painters/pulse_effect_painter.dart @@ -8,6 +8,7 @@ import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; class PulseEffectPainter extends CustomPainter { static const double _animationRangeStartValue = 0.286; + final Color color; final Animation animation; final double effectExtent; @@ -20,11 +21,7 @@ class PulseEffectPainter extends CustomPainter { required this.borderRadius, }) : super(repaint: animation); - double animationRange({ - required double begin, - required double end, - required double animationValue, - }) { + double animationRange({required double begin, required double end, required double animationValue}) { return clampDouble((animationValue - begin) / (end - begin), 0.0, 1.0); } @@ -76,7 +73,5 @@ class PulseEffectPainter extends CustomPainter { } @override - bool shouldRepaint(PulseEffectPainter oldDelegate) { - return false; - } + bool shouldRepaint(PulseEffectPainter oldDelegate) => false; } diff --git a/lib/src/widgets/common/effects/pulse_effect.dart b/lib/src/widgets/common/effects/pulse_effect.dart index 9788f4a7..6ef72aa6 100644 --- a/lib/src/widgets/common/effects/pulse_effect.dart +++ b/lib/src/widgets/common/effects/pulse_effect.dart @@ -94,11 +94,12 @@ class _MoonPulseEffectState extends State with SingleTickerProv // TODO: Review at a later date (when Impeller is stable?) if CurvedAnimation with Interval can be used. Currently //interval has a bug where the curve parameters curve.transform(t) internal method causes uneven buggy animation. - final resolvedBorderRadius = widget.childBorderRadius?.resolve(Directionality.of(context)) ?? BorderRadius.zero; + final BorderRadius resolvedBorderRadius = + widget.childBorderRadius?.resolve(Directionality.of(context)) ?? BorderRadius.zero; return AnimatedBuilder( animation: _animationController, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return RepaintBoundary( child: Transform.translate( offset: Offset(widget.showJiggle ? _jiggleAnimation.value : 0.0, 0.0), diff --git a/lib/src/widgets/dot_indicator/dot_indicator.dart b/lib/src/widgets/dot_indicator/dot_indicator.dart index b1a4363a..ac85c7c5 100644 --- a/lib/src/widgets/dot_indicator/dot_indicator.dart +++ b/lib/src/widgets/dot_indicator/dot_indicator.dart @@ -57,7 +57,7 @@ class _CarouselIndicatorState extends State with TickerProvide void initState() { super.initState(); - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { _animationControllers![widget.selectedDot].forward(); }); } @@ -128,7 +128,7 @@ class _CarouselIndicatorState extends State with TickerProvide widget.dotCount, (int index) => AnimatedBuilder( animation: _animations![index], - builder: (BuildContext context, _) { + builder: (BuildContext context, Widget? _) { return Container( width: effectiveSize, height: effectiveSize, diff --git a/lib/src/widgets/loaders/circular_loader.dart b/lib/src/widgets/loaders/circular_loader.dart index 480d2679..d4a7966f 100644 --- a/lib/src/widgets/loaders/circular_loader.dart +++ b/lib/src/widgets/loaders/circular_loader.dart @@ -58,7 +58,6 @@ class MoonCircularLoader extends StatelessWidget { return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).md; case MoonCircularLoaderSize.lg: return context.moonTheme?.circularLoaderTheme.sizes.lg ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).lg; - default: return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).md; } diff --git a/lib/src/widgets/loaders/linear_loader.dart b/lib/src/widgets/loaders/linear_loader.dart index 1ed32e97..7ccc3135 100644 --- a/lib/src/widgets/loaders/linear_loader.dart +++ b/lib/src/widgets/loaders/linear_loader.dart @@ -53,7 +53,6 @@ class MoonLinearLoader extends StatelessWidget { return context.moonTheme?.linearLoaderTheme.sizes.x3s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x3s; case MoonLinearLoaderSize.x2s: return context.moonTheme?.linearLoaderTheme.sizes.x2s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x2s; - default: return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x4s; } diff --git a/lib/src/widgets/menu_item/menu_item.dart b/lib/src/widgets/menu_item/menu_item.dart index e58f3fc7..2442e882 100644 --- a/lib/src/widgets/menu_item/menu_item.dart +++ b/lib/src/widgets/menu_item/menu_item.dart @@ -227,6 +227,7 @@ class _MoonMenuItemState extends State with TickerProviderStateMix showScaleAnimation: false, builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool isActive = isHovered || isFocused; + _handleActiveStatus(isActive); return AnimatedBuilder( diff --git a/lib/src/widgets/modal/modal.dart b/lib/src/widgets/modal/modal.dart index 6a32bfdc..bb122176 100644 --- a/lib/src/widgets/modal/modal.dart +++ b/lib/src/widgets/modal/modal.dart @@ -104,8 +104,12 @@ class MoonModalRoute extends RawDialogRoute { return modal; }, - transitionBuilder: - (BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) { + transitionBuilder: ( + BuildContext context, + Animation animation, + Animation secondaryAnimation, + Widget child, + ) { return RepaintBoundary( child: FadeTransition( opacity: CurvedAnimation( diff --git a/lib/src/widgets/popover/popover.dart b/lib/src/widgets/popover/popover.dart index 633fcfa9..b1d12be3 100644 --- a/lib/src/widgets/popover/popover.dart +++ b/lib/src/widgets/popover/popover.dart @@ -120,10 +120,10 @@ class MoonPopover extends StatefulWidget { if (_openedPopovers.isNotEmpty) { // Avoid concurrent modification. final List openedPopovers = _openedPopovers.toList(); + for (final MoonPopoverState state in openedPopovers) { - if (state == current) { - continue; - } + if (state == current) continue; + state._clearOverlayEntry(); } } @@ -147,7 +147,7 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP bool get shouldShowPopover => widget.show && _routeIsShowing; void _showPopover() { - _overlayEntry = OverlayEntry(builder: (context) => _createOverlayContent()); + _overlayEntry = OverlayEntry(builder: (BuildContext context) => _createOverlayContent()); Overlay.of(context).insert(_overlayEntry!); MoonPopover._openedPopovers.add(this); @@ -264,8 +264,10 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP // Route was pushed onto navigator and is now topmost route. if (shouldShowPopover) { _removePopover(); - WidgetsBinding.instance.addPostFrameCallback((_) { + + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; + _showPopover(); }); } @@ -274,6 +276,7 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP @override void didPushNext() { _routeIsShowing = false; + _removePopover(); } @@ -284,6 +287,7 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP if (shouldShowPopover) { // Covering route was popped off the navigator. _removePopover(); + await Future.delayed(const Duration(milliseconds: 100), () { if (mounted) _showPopover(); }); @@ -294,7 +298,7 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP void initState() { super.initState(); - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { widget.routeObserver?.subscribe(this, ModalRoute.of(context)! as PageRoute); }); } @@ -308,8 +312,9 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP widget.routeObserver?.subscribe(this, ModalRoute.of(context)! as PageRoute); } - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!_routeIsShowing) return; + if (oldWidget.popoverPosition != widget.popoverPosition) { _removePopover(immediately: true); _showPopover(); @@ -325,18 +330,14 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP @override void deactivate() { - if (_overlayEntry != null) { - _removePopover(immediately: true); - } + if (_overlayEntry != null) _removePopover(immediately: true); super.deactivate(); } @override void dispose() { - if (_overlayEntry != null) { - _removePopover(immediately: true); - } + if (_overlayEntry != null) _removePopover(immediately: true); widget.routeObserver?.unsubscribe(this); @@ -432,7 +433,7 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP targetAnchor: popoverPositionParameters.targetAnchor, child: TapRegion( behavior: HitTestBehavior.translucent, - onTapOutside: (_) => _removePopover(), + onTapOutside: (PointerDownEvent _) => _removePopover(), child: RepaintBoundary( child: FadeTransition( opacity: _curvedAnimation!, diff --git a/lib/src/widgets/progress/circular_progress.dart b/lib/src/widgets/progress/circular_progress.dart index c30270de..4ec6eed2 100644 --- a/lib/src/widgets/progress/circular_progress.dart +++ b/lib/src/widgets/progress/circular_progress.dart @@ -73,7 +73,6 @@ class MoonCircularProgress extends StatelessWidget { case MoonCircularProgressSize.lg: return context.moonTheme?.circularProgressTheme.sizes.lg ?? MoonCircularProgressSizes(tokens: MoonTokens.light).lg; - default: return context.moonTheme?.circularProgressTheme.sizes.md ?? MoonCircularProgressSizes(tokens: MoonTokens.light).md; diff --git a/lib/src/widgets/progress/linear_progress.dart b/lib/src/widgets/progress/linear_progress.dart index 4dcf14e3..9b960944 100644 --- a/lib/src/widgets/progress/linear_progress.dart +++ b/lib/src/widgets/progress/linear_progress.dart @@ -69,7 +69,6 @@ class MoonLinearProgress extends StatelessWidget { case MoonLinearProgressSize.x2s: return context.moonTheme?.linearProgressTheme.sizes.x2s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x2s; - default: return context.moonTheme?.linearProgressTheme.sizes.x4s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x4s; diff --git a/lib/src/widgets/radio/radio.dart b/lib/src/widgets/radio/radio.dart index adb7b021..139726e5 100644 --- a/lib/src/widgets/radio/radio.dart +++ b/lib/src/widgets/radio/radio.dart @@ -167,6 +167,7 @@ class _RadioState extends State> with TickerProviderStateMixin, void _handleChanged(bool? selected) { if (selected == null) { widget.onChanged!(null); + return; } if (selected) { @@ -177,6 +178,7 @@ class _RadioState extends State> with TickerProviderStateMixin, @override void didUpdateWidget(MoonRadio oldWidget) { super.didUpdateWidget(oldWidget); + if (widget._selected != oldWidget._selected) { animateToValue(); } @@ -185,6 +187,7 @@ class _RadioState extends State> with TickerProviderStateMixin, @override void dispose() { _painter.dispose(); + super.dispose(); } diff --git a/lib/src/widgets/radio/radio_painter.dart b/lib/src/widgets/radio/radio_painter.dart index 3006e940..8dbd3c83 100644 --- a/lib/src/widgets/radio/radio_painter.dart +++ b/lib/src/widgets/radio/radio_painter.dart @@ -15,11 +15,13 @@ class MoonRadioPainter extends ToggleablePainter { ..color = colorPremulLerp(inactiveColor, activeColor, position.value)! ..style = PaintingStyle.stroke ..strokeWidth = 1.0; + canvas.drawCircle(center, _kOuterRadius, paint); // Inner circle if (!position.isDismissed) { paint.style = PaintingStyle.fill; + canvas.drawCircle(center, _kInnerRadius * position.value, paint); } } diff --git a/lib/src/widgets/segmented_control/segmented_control.dart b/lib/src/widgets/segmented_control/segmented_control.dart index e26484e1..ea5aa92f 100644 --- a/lib/src/widgets/segmented_control/segmented_control.dart +++ b/lib/src/widgets/segmented_control/segmented_control.dart @@ -129,6 +129,7 @@ class MoonSegmentedControl extends StatefulWidget { class _MoonSegmentedControlState extends State { late final bool _hasDefaultSegments = widget.segments != null; + late int _selectedIndex = widget.selectedIndex; MoonSegmentedControlSizeProperties _getMoonSegmentedControlSize( @@ -287,11 +288,7 @@ class _SegmentBuilderState extends State<_SegmentBuilder> with SingleTickerProvi AnimationController? _animationController; void _handleActiveEffect(bool isActive) { - if (isActive) { - _animationController?.forward(); - } else { - _animationController?.reverse(); - } + isActive ? _animationController?.forward() : _animationController?.reverse(); } @override @@ -370,14 +367,14 @@ class _SegmentBuilderState extends State<_SegmentBuilder> with SingleTickerProvi semanticLabel: widget.segment.semanticLabel, borderRadius: effectiveSegmentBorderRadius.squircleBorderRadius(context), cursor: widget.isSelected ? SystemMouseCursors.basic : SystemMouseCursors.click, - builder: (context, isEnabled, isHovered, isFocused, isPressed) { + builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool isActive = isEnabled && (widget.isSelected || isHovered || isPressed); _handleActiveEffect(isActive); return AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return DecoratedBox( decoration: segmentStyle?.decoration ?? ShapeDecoration( diff --git a/lib/src/widgets/switch/switch.dart b/lib/src/widgets/switch/switch.dart index ae8bc1d7..0f92d938 100644 --- a/lib/src/widgets/switch/switch.dart +++ b/lib/src/widgets/switch/switch.dart @@ -165,11 +165,7 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM ..curve = isLinear ? Curves.linear : Curves.ease ..reverseCurve = isLinear ? Curves.linear : Curves.ease.flipped; - if (widget.value) { - _animationController!.forward(); - } else { - _animationController!.reverse(); - } + widget.value ? _animationController!.forward() : _animationController!.reverse(); } void _handleFocus(bool focus) { @@ -232,9 +228,7 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM void _handleDragEnd(DragEndDetails details) { // Deferring the animation to the next build phase. - setState(() { - _needsPositionAnimation = true; - }); + setState(() => _needsPositionAnimation = true); // Call onChanged when the user's intent to change value is clear. if (_curvedAnimationWithOvershoot!.value >= 0.5 != widget.value) { widget.onChanged!(!widget.value); @@ -242,9 +236,7 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM } void _emitVibration() { - if (widget.hasHapticFeedback) { - HapticFeedback.lightImpact(); - } + if (widget.hasHapticFeedback) HapticFeedback.lightImpact(); } @override @@ -265,14 +257,13 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM @override void dispose() { _animationController!.dispose(); + super.dispose(); } @override Widget build(BuildContext context) { - if (_needsPositionAnimation) { - _resumePositionAnimation(); - } + if (_needsPositionAnimation) _resumePositionAnimation(); final MoonSwitchSizeProperties effectiveMoonSwitchSize = _getMoonSwitchSize(context, widget.switchSize); @@ -426,7 +417,7 @@ class _MoonSwitchState extends State with SingleTickerProviderStateM child: RepaintBoundary( child: AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return AnimatedOpacity( opacity: _isInteractive ? 1 : effectiveDisabledOpacityValue, duration: effectiveDuration, diff --git a/lib/src/widgets/tab_bar/tab_bar.dart b/lib/src/widgets/tab_bar/tab_bar.dart index 794f42a9..718ad1f2 100644 --- a/lib/src/widgets/tab_bar/tab_bar.dart +++ b/lib/src/widgets/tab_bar/tab_bar.dart @@ -320,11 +320,7 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT AnimationController? _animationController; void _handleActiveEffect(bool isActive) { - if (isActive) { - _animationController?.forward(); - } else { - _animationController?.reverse(); - } + isActive ? _animationController?.forward() : _animationController?.reverse(); } @override @@ -403,7 +399,7 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT focusEffectColor: tabStyle?.focusEffectColor, showScaleAnimation: false, cursor: widget.isSelected ? SystemMouseCursors.basic : SystemMouseCursors.click, - builder: (context, isEnabled, isHovered, isFocused, isPressed) { + builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool isActive = isEnabled && (widget.isSelected || isHovered || isPressed); _handleActiveEffect(isActive); @@ -414,7 +410,7 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT children: [ AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _textColor!.value, @@ -458,7 +454,7 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT left: 0, right: 0, child: LayoutBuilder( - builder: (context, constraints) { + builder: (BuildContext context, BoxConstraints constraints) { _indicatorWidthTween.end = constraints.maxWidth; return Align( @@ -467,7 +463,7 @@ class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleT : Alignment.bottomRight, child: AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return Container( color: effectiveIndicatorColor, height: effectiveIndicatorHeight, @@ -516,11 +512,7 @@ class _PillTabBuilderState extends State<_PillTabBuilder> with SingleTickerProvi AnimationController? _animationController; void _handleActiveEffect(bool isActive) { - if (isActive) { - _animationController?.forward(); - } else { - _animationController?.reverse(); - } + isActive ? _animationController?.forward() : _animationController?.reverse(); } @override @@ -597,14 +589,14 @@ class _PillTabBuilderState extends State<_PillTabBuilder> with SingleTickerProvi showScaleAnimation: false, borderRadius: effectiveTabBorderRadius.squircleBorderRadius(context), cursor: widget.isSelected ? SystemMouseCursors.basic : SystemMouseCursors.click, - builder: (context, isEnabled, isHovered, isFocused, isPressed) { + builder: (BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed) { final bool isActive = isEnabled && (widget.isSelected || isHovered || isPressed); _handleActiveEffect(isActive); return AnimatedBuilder( animation: _animationController!, - builder: (context, child) { + builder: (BuildContext context, Widget? child) { return DecoratedBox( decoration: tabStyle?.decoration ?? ShapeDecoration( diff --git a/lib/src/widgets/text_input/form_text_input.dart b/lib/src/widgets/text_input/form_text_input.dart index f50aca9f..460ecfe7 100644 --- a/lib/src/widgets/text_input/form_text_input.dart +++ b/lib/src/widgets/text_input/form_text_input.dart @@ -191,9 +191,8 @@ class MoonFormTextInput extends FormField { void onChangedHandler(String value) { field.didChange(value); - if (onChanged != null) { - onChanged(value); - } + + if (onChanged != null) onChanged(value); } return UnmanagedRestorationScope( @@ -292,9 +291,7 @@ class MoonFormTextInput extends FormField { final TextEditingController? controller; static Widget _defaultContextMenuBuilder(BuildContext context, EditableTextState editableTextState) { - return AdaptiveTextSelectionToolbar.editableText( - editableTextState: editableTextState, - ); + return AdaptiveTextSelectionToolbar.editableText(editableTextState: editableTextState); } @override @@ -311,9 +308,9 @@ class _TextFormFieldState extends FormFieldState { @override void restoreState(RestorationBucket? oldBucket, bool initialRestore) { super.restoreState(oldBucket, initialRestore); - if (_controller != null) { - _registerController(); - } + + if (_controller != null) _registerController(); + // Make sure to update the internal [FormFieldState] value to sync up with // text editing controller value. setValue(_effectiveController.text); @@ -321,20 +318,22 @@ class _TextFormFieldState extends FormFieldState { void _registerController() { assert(_controller != null); + registerForRestoration(_controller!, 'controller'); } void _createLocalController([TextEditingValue? value]) { assert(_controller == null); + _controller = value == null ? RestorableTextEditingController() : RestorableTextEditingController.fromValue(value); - if (!restorePending) { - _registerController(); - } + + if (!restorePending) _registerController(); } @override void initState() { super.initState(); + if (_textFormField.controller == null) { _createLocalController(widget.initialValue != null ? TextEditingValue(text: widget.initialValue!) : null); } else { @@ -345,6 +344,7 @@ class _TextFormFieldState extends FormFieldState { @override void didUpdateWidget(MoonFormTextInput oldWidget) { super.didUpdateWidget(oldWidget); + if (_textFormField.controller != oldWidget.controller) { oldWidget.controller?.removeListener(_handleControllerChanged); _textFormField.controller?.addListener(_handleControllerChanged); @@ -355,8 +355,10 @@ class _TextFormFieldState extends FormFieldState { if (_textFormField.controller != null) { setValue(_textFormField.controller!.text); + if (oldWidget.controller == null) { unregisterFromRestoration(_controller!); + _controller!.dispose(); _controller = null; } @@ -368,6 +370,7 @@ class _TextFormFieldState extends FormFieldState { void dispose() { _textFormField.controller?.removeListener(_handleControllerChanged); _controller?.dispose(); + super.dispose(); } @@ -385,6 +388,7 @@ class _TextFormFieldState extends FormFieldState { // setState will be called in the superclass, so even though state is being // manipulated, no setState call is needed here. _effectiveController.text = widget.initialValue ?? ''; + super.reset(); } diff --git a/lib/src/widgets/tooltip/tooltip.dart b/lib/src/widgets/tooltip/tooltip.dart index 5bd50fca..edd99a34 100644 --- a/lib/src/widgets/tooltip/tooltip.dart +++ b/lib/src/widgets/tooltip/tooltip.dart @@ -141,10 +141,10 @@ class MoonTooltip extends StatefulWidget { if (_openedTooltips.isNotEmpty) { // Avoid concurrent modification. final List<_MoonTooltipState> openedTooltips = _openedTooltips.toList(); + for (final _MoonTooltipState state in openedTooltips) { - if (state == current) { - continue; - } + if (state == current) continue; + state._clearOverlayEntry(); } } @@ -168,7 +168,7 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker bool get shouldShowTooltip => widget.show && _routeIsShowing; void _showTooltip() { - _overlayEntry = OverlayEntry(builder: (context) => _createOverlayContent()); + _overlayEntry = OverlayEntry(builder: (BuildContext context) => _createOverlayContent()); Overlay.of(context).insert(_overlayEntry!); MoonTooltip._openedTooltips.add(this); @@ -202,7 +202,7 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker void _handleTap(TapDownDetails details) { final RenderBox? tooltipRenderBox = _tooltipKey.currentContext?.findRenderObject() as RenderBox?; final RenderBox? overlayRenderBox = Overlay.of(context).context.findRenderObject() as RenderBox?; - final tooltipPosition = tooltipRenderBox?.localToGlobal(Offset.zero, ancestor: overlayRenderBox); + final Offset? tooltipPosition = tooltipRenderBox?.localToGlobal(Offset.zero, ancestor: overlayRenderBox); if (widget.hideOnTap || tooltipPosition != null && !tooltipRenderBox!.size.contains(details.localPosition - tooltipPosition)) { @@ -300,8 +300,10 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker // Route was pushed onto navigator and is now topmost route. if (shouldShowTooltip) { _removeTooltip(); - WidgetsBinding.instance.addPostFrameCallback((_) { + + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; + _showTooltip(); }); } @@ -320,6 +322,7 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker if (shouldShowTooltip) { // Covering route was popped off the navigator. _removeTooltip(); + await Future.delayed(const Duration(milliseconds: 100), () { if (mounted) _showTooltip(); }); @@ -330,7 +333,7 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker void initState() { super.initState(); - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { widget.routeObserver?.subscribe(this, ModalRoute.of(context)! as PageRoute); }); } @@ -344,8 +347,9 @@ class _MoonTooltipState extends State with RouteAware, SingleTicker widget.routeObserver?.subscribe(this, ModalRoute.of(context)! as PageRoute); } - WidgetsBinding.instance.addPostFrameCallback((_) { + WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!_routeIsShowing) return; + if (oldWidget.tooltipPosition != widget.tooltipPosition) { _removeTooltip(immediately: true); _showTooltip();