-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [MDS-431] Create Switch widget (#77)
- Loading branch information
Showing
18 changed files
with
1,124 additions
and
75 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import 'package:example/src/storybook/common/options.dart'; | ||
| import 'package:example/src/storybook/common/widgets/text_divider.dart'; | ||
| import 'package:flutter/cupertino.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| bool value = false; | ||
|
|
||
| class SwitchStory extends Story { | ||
| SwitchStory() | ||
| : super( | ||
| name: "Switch", | ||
| builder: (context) { | ||
| final switchSizesKnob = context.knobs.options( | ||
| label: "MoonSwitchSize", | ||
| description: "Switch size variants.", | ||
| initial: MoonSwitchSize.xs, | ||
| options: const [ | ||
| Option(label: "x2s", value: MoonSwitchSize.x2s), | ||
| Option(label: "xs", value: MoonSwitchSize.xs), | ||
| Option(label: "sm", value: MoonSwitchSize.sm), | ||
| ], | ||
| ); | ||
|
|
||
| final thumbColorsKnob = context.knobs.options( | ||
| label: "thumbColor", | ||
| description: "MoonColors variants for the Switch thumb.", | ||
| initial: 7, // goten | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final thumbColor = colorTable(context)[thumbColorsKnob]; | ||
|
|
||
| final activeTrackColorsKnob = context.knobs.options( | ||
| label: "activeTrackColor", | ||
| description: "MoonColors variants for the active Switch track.", | ||
| initial: 0, // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final activeTrackColor = colorTable(context)[activeTrackColorsKnob]; | ||
|
|
||
| final inactiveTrackColorsKnob = context.knobs.options( | ||
| label: "inactiveTrackColor", | ||
| description: "MoonColors variants for the active Switch track.", | ||
| initial: 2, // beerus | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final inactiveTrackColor = colorTable(context)[inactiveTrackColorsKnob]; | ||
|
|
||
| final isDisabled = context.knobs.boolean( | ||
| label: "Disabled", | ||
| description: "onChanged() is null.", | ||
| ); | ||
|
|
||
| final setRtlModeKnob = context.knobs.boolean( | ||
| label: "RTL mode", | ||
| description: "Switch between LTR and RTL modes.", | ||
| ); | ||
|
|
||
| return Directionality( | ||
| textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, | ||
| child: Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| const TextDivider(text: "Customisable Switch"), | ||
| 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: "Switches with custom children"), | ||
| const SizedBox(height: 32), | ||
| StatefulBuilder( | ||
| builder: (context, setState) { | ||
| return MoonSwitch( | ||
| activeThumbWidget: const Icon( | ||
| MoonIconsGeneric.check_alternative24, | ||
| size: 14, | ||
| ), | ||
| inactiveThumbWidget: const Icon( | ||
| MoonIconsControls.close24, | ||
| size: 12, | ||
| ), | ||
| activeTrackWidget: const Text( | ||
| "ON", | ||
| style: TextStyle(fontSize: 8), | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| inactiveTrackWidget: const Text( | ||
| "OFF", | ||
| style: TextStyle(fontSize: 8), | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| value: value, | ||
| onChanged: (newValue) => setState(() => value = newValue), | ||
| ); | ||
| }, | ||
| ), | ||
| const SizedBox(height: 32), | ||
| StatefulBuilder( | ||
| builder: (context, setState) { | ||
| return MoonSwitch( | ||
| activeTrackWidget: const Icon( | ||
| MoonIconsGeneric.check_alternative24, | ||
| size: 14, | ||
| ), | ||
| inactiveTrackWidget: const Icon( | ||
| MoonIconsControls.close24, | ||
| size: 12, | ||
| ), | ||
| value: value, | ||
| onChanged: (newValue) => setState(() => value = newValue), | ||
| ); | ||
| }, | ||
| ), | ||
| 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
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,68 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/colors.dart'; | ||
|
|
||
| @immutable | ||
| class MoonSwitchColors extends ThemeExtension<MoonSwitchColors> with DiagnosticableTreeMixin { | ||
| static final light = MoonSwitchColors( | ||
| activeTrackColor: MoonColors.light.piccolo, | ||
| inactiveTrackColor: MoonColors.light.beerus, | ||
| thumbColor: MoonColors.light.goten, | ||
| ); | ||
|
|
||
| static final dark = MoonSwitchColors( | ||
| activeTrackColor: MoonColors.dark.piccolo, | ||
| inactiveTrackColor: MoonColors.dark.beerus, | ||
| thumbColor: MoonColors.dark.goten, | ||
| ); | ||
|
|
||
| /// Switch active track color. | ||
| final Color activeTrackColor; | ||
|
|
||
| /// Switch inactive track color. | ||
| final Color inactiveTrackColor; | ||
|
|
||
| /// Switch thumbcolor. | ||
| final Color thumbColor; | ||
|
|
||
| const MoonSwitchColors({ | ||
| required this.activeTrackColor, | ||
| required this.inactiveTrackColor, | ||
| required this.thumbColor, | ||
| }); | ||
|
|
||
| @override | ||
| MoonSwitchColors copyWith({ | ||
| Color? activeTrackColor, | ||
| Color? inactiveTrackColor, | ||
| Color? thumbColor, | ||
| }) { | ||
| return MoonSwitchColors( | ||
| activeTrackColor: activeTrackColor ?? this.activeTrackColor, | ||
| inactiveTrackColor: inactiveTrackColor ?? this.inactiveTrackColor, | ||
| thumbColor: thumbColor ?? this.thumbColor, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonSwitchColors lerp(ThemeExtension<MoonSwitchColors>? other, double t) { | ||
| if (other is! MoonSwitchColors) return this; | ||
|
|
||
| return MoonSwitchColors( | ||
| activeTrackColor: Color.lerp(activeTrackColor, other.activeTrackColor, t)!, | ||
| inactiveTrackColor: Color.lerp(inactiveTrackColor, other.inactiveTrackColor, t)!, | ||
| thumbColor: Color.lerp(thumbColor, other.thumbColor, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonSwitchColors")) | ||
| ..add(ColorProperty("activeTrackColor", activeTrackColor)) | ||
| ..add(ColorProperty("inactiveTrackColor", inactiveTrackColor)) | ||
| ..add(ColorProperty("thumbColor", thumbColor)); | ||
| } | ||
| } |
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,51 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| @immutable | ||
| class MoonSwitchProperties extends ThemeExtension<MoonSwitchProperties> with DiagnosticableTreeMixin { | ||
| static const properties = MoonSwitchProperties( | ||
| transitionDuration: Duration(milliseconds: 200), | ||
| transitionCurve: Curves.easeInOutCubic, | ||
| ); | ||
|
|
||
| /// Switch transition duration. | ||
| final Duration transitionDuration; | ||
|
|
||
| /// Switch transition curve. | ||
| final Curve transitionCurve; | ||
|
|
||
| const MoonSwitchProperties({ | ||
| required this.transitionDuration, | ||
| required this.transitionCurve, | ||
| }); | ||
|
|
||
| @override | ||
| MoonSwitchProperties copyWith({ | ||
| Duration? transitionDuration, | ||
| Curve? transitionCurve, | ||
| }) { | ||
| return MoonSwitchProperties( | ||
| transitionDuration: transitionDuration ?? this.transitionDuration, | ||
| transitionCurve: transitionCurve ?? this.transitionCurve, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonSwitchProperties lerp(ThemeExtension<MoonSwitchProperties>? other, double t) { | ||
| if (other is! MoonSwitchProperties) return this; | ||
|
|
||
| return MoonSwitchProperties( | ||
| transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), | ||
| transitionCurve: other.transitionCurve, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonSwitchProperties")) | ||
| ..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,46 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/shadows.dart'; | ||
|
|
||
| @immutable | ||
| class MoonSwitchShadows extends ThemeExtension<MoonSwitchShadows> with DiagnosticableTreeMixin { | ||
| static final light = MoonSwitchShadows( | ||
| thumbShadows: MoonShadows.light.sm, | ||
| ); | ||
|
|
||
| static final dark = MoonSwitchShadows( | ||
| thumbShadows: MoonShadows.dark.sm, | ||
| ); | ||
|
|
||
| /// Switch thumb shadows. | ||
| final List<BoxShadow> thumbShadows; | ||
|
|
||
| const MoonSwitchShadows({ | ||
| required this.thumbShadows, | ||
| }); | ||
|
|
||
| @override | ||
| MoonSwitchShadows copyWith({List<BoxShadow>? thumbShadows}) { | ||
| return MoonSwitchShadows( | ||
| thumbShadows: thumbShadows ?? this.thumbShadows, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonSwitchShadows lerp(ThemeExtension<MoonSwitchShadows>? other, double t) { | ||
| if (other is! MoonSwitchShadows) return this; | ||
|
|
||
| return MoonSwitchShadows( | ||
| thumbShadows: BoxShadow.lerpList(thumbShadows, other.thumbShadows, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonSwitchShadows")) | ||
| ..add(DiagnosticsProperty<List<BoxShadow>>("shadows", thumbShadows)); | ||
| } | ||
| } |
Oops, something went wrong.