-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [MDS-448] Create Modal widget (#87)
- Loading branch information
Showing
10 changed files
with
506 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import 'package:example/src/storybook/common/options.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| class ModalStory extends Story { | ||
| ModalStory() | ||
| : super( | ||
| name: "Modal", | ||
| builder: (context) { | ||
| final backgroundColorsKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for Modal background.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[backgroundColorsKnob]; | ||
|
|
||
| final barrierColorsKnob = context.knobs.options( | ||
| label: "barrierColor", | ||
| description: "MoonColors variants for Modal barrier.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final barrierColor = colorTable(context)[barrierColorsKnob]; | ||
|
|
||
| final borderRadiusKnob = context.knobs.sliderInt( | ||
| max: 20, | ||
| initial: 8, | ||
| label: "borderRadius", | ||
| description: "Border radius for Modal.", | ||
| ); | ||
|
|
||
| final setRtlModeKnob = context.knobs.boolean( | ||
| label: "RTL mode", | ||
| description: "Switch between LTR and RTL modes.", | ||
| ); | ||
|
|
||
| Future<void> modalBuilder(BuildContext context) { | ||
| return showMoonModal<void>( | ||
| context: context, | ||
| useRootNavigator: false, | ||
| barrierColor: barrierColor, | ||
| builder: (_) { | ||
| return MoonModal( | ||
| backgroundColor: backgroundColor, | ||
| borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), | ||
| child: Directionality( | ||
| textDirection: Directionality.of(context), | ||
| child: SizedBox( | ||
| width: 300, | ||
| child: Column( | ||
| mainAxisSize: MainAxisSize.min, | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| Padding( | ||
| padding: const EdgeInsets.fromLTRB(24, 20, 24, 16), | ||
| child: Text( | ||
| "Modal title", | ||
| style: context.moonTypography!.heading.text18, | ||
| ), | ||
| ), | ||
| Container( | ||
| height: 1, | ||
| color: context.moonColors!.trunks, | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.fromLTRB(24, 16, 24, 16), | ||
| child: Text( | ||
| "Reopen the modal to see the new knob value changes.", | ||
| style: context.moonTypography!.body.text14, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.fromLTRB(24, 16, 24, 24), | ||
| child: MoonPrimaryButton( | ||
| label: const Text("Okay"), | ||
| isFullWidth: true, | ||
| onTap: () => Navigator.of(context).pop(), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| return Directionality( | ||
| textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, | ||
| child: Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| Builder( | ||
| builder: (context) { | ||
| return MoonPrimaryButton( | ||
| label: const Text("Open Modal"), | ||
| onTap: () => modalBuilder(context), | ||
| ); | ||
| }, | ||
| ), | ||
| const SizedBox(height: 64), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/colors.dart'; | ||
|
|
||
| @immutable | ||
| class MoonModalColors extends ThemeExtension<MoonModalColors> with DiagnosticableTreeMixin { | ||
| static final light = MoonModalColors( | ||
| backgroundColor: MoonColors.light.gohan, | ||
| barrierColor: MoonColors.light.zeno, | ||
| ); | ||
|
|
||
| static final dark = MoonModalColors( | ||
| backgroundColor: MoonColors.dark.gohan, | ||
| barrierColor: MoonColors.dark.zeno, | ||
| ); | ||
|
|
||
| /// Modal background color. | ||
| final Color backgroundColor; | ||
|
|
||
| /// Modal barrier color. | ||
| final Color barrierColor; | ||
|
|
||
| const MoonModalColors({ | ||
| required this.backgroundColor, | ||
| required this.barrierColor, | ||
| }); | ||
|
|
||
| @override | ||
| MoonModalColors copyWith({ | ||
| Color? backgroundColor, | ||
| Color? barrierColor, | ||
| }) { | ||
| return MoonModalColors( | ||
| backgroundColor: backgroundColor ?? this.backgroundColor, | ||
| barrierColor: barrierColor ?? this.barrierColor, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonModalColors lerp(ThemeExtension<MoonModalColors>? other, double t) { | ||
| if (other is! MoonModalColors) return this; | ||
|
|
||
| return MoonModalColors( | ||
| backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, | ||
| barrierColor: Color.lerp(barrierColor, other.barrierColor, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonModalColors")) | ||
| ..add(ColorProperty("backgroundColor", backgroundColor)) | ||
| ..add(ColorProperty("barrierColor", barrierColor)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/borders.dart'; | ||
|
|
||
| @immutable | ||
| class MoonModalProperties extends ThemeExtension<MoonModalProperties> with DiagnosticableTreeMixin { | ||
| static final properties = MoonModalProperties( | ||
| borderRadius: MoonBorders.borders.surfaceSm, | ||
| transitionDuration: const Duration(milliseconds: 200), | ||
| transitionCurve: Curves.easeInOutCubic, | ||
| ); | ||
|
|
||
| /// Modal border radius. | ||
| final BorderRadius borderRadius; | ||
|
|
||
| /// Modal transition duration. | ||
| final Duration transitionDuration; | ||
|
|
||
| /// Modal transition curve. | ||
| final Curve transitionCurve; | ||
|
|
||
| const MoonModalProperties({ | ||
| required this.borderRadius, | ||
| required this.transitionDuration, | ||
| required this.transitionCurve, | ||
| }); | ||
|
|
||
| @override | ||
| MoonModalProperties copyWith({ | ||
| BorderRadius? borderRadius, | ||
| Duration? transitionDuration, | ||
| Curve? transitionCurve, | ||
| }) { | ||
| return MoonModalProperties( | ||
| borderRadius: borderRadius ?? this.borderRadius, | ||
| transitionDuration: transitionDuration ?? this.transitionDuration, | ||
| transitionCurve: transitionCurve ?? this.transitionCurve, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonModalProperties lerp(ThemeExtension<MoonModalProperties>? other, double t) { | ||
| if (other is! MoonModalProperties) return this; | ||
|
|
||
| return MoonModalProperties( | ||
| borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!, | ||
| transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), | ||
| transitionCurve: other.transitionCurve, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonModalProperties")) | ||
| ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius)) | ||
| ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration)) | ||
| ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/modal/modal_colors.dart'; | ||
| import 'package:moon_design/src/theme/modal/modal_properties.dart'; | ||
|
|
||
| @immutable | ||
| class MoonModalTheme extends ThemeExtension<MoonModalTheme> with DiagnosticableTreeMixin { | ||
| static final light = MoonModalTheme( | ||
| colors: MoonModalColors.light, | ||
| properties: MoonModalProperties.properties, | ||
| ); | ||
|
|
||
| static final dark = MoonModalTheme( | ||
| colors: MoonModalColors.dark, | ||
| properties: MoonModalProperties.properties, | ||
| ); | ||
|
|
||
| /// Checkbox colors. | ||
| final MoonModalColors colors; | ||
|
|
||
| /// Checkbox properties. | ||
| final MoonModalProperties properties; | ||
|
|
||
| const MoonModalTheme({ | ||
| required this.colors, | ||
| required this.properties, | ||
| }); | ||
|
|
||
| @override | ||
| MoonModalTheme copyWith({ | ||
| MoonModalColors? colors, | ||
| MoonModalProperties? properties, | ||
| }) { | ||
| return MoonModalTheme( | ||
| colors: colors ?? this.colors, | ||
| properties: properties ?? this.properties, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonModalTheme lerp(ThemeExtension<MoonModalTheme>? other, double t) { | ||
| if (other is! MoonModalTheme) return this; | ||
|
|
||
| return MoonModalTheme( | ||
| colors: colors.lerp(other.colors, t), | ||
| properties: properties.lerp(other.properties, t), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { | ||
| super.debugFillProperties(diagnosticProperties); | ||
| diagnosticProperties | ||
| ..add(DiagnosticsProperty("type", "MoonModalTheme")) | ||
| ..add(DiagnosticsProperty<MoonModalColors>("colors", colors)) | ||
| ..add(DiagnosticsProperty<MoonModalProperties>("properties", properties)); | ||
| } | ||
| } |
Oops, something went wrong.