-
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-412] Create LinearProgress and LinearLoader widgets (#60)
- Loading branch information
Showing
31 changed files
with
1,449 additions
and
281 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,70 @@ | ||
| 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 CircularLoaderStory extends Story { | ||
| CircularLoaderStory() | ||
| : super( | ||
| name: "Loader/CircularLoader", | ||
| builder: (context) { | ||
| final loaderSizesKnob = context.knobs.options( | ||
| label: "MoonCircularLoaderSize", | ||
| description: "CircularLoader size variants.", | ||
| initial: MoonCircularLoaderSize.md, | ||
| options: const [ | ||
| Option(label: "x2s", value: MoonCircularLoaderSize.x2s), | ||
| Option(label: "xs", value: MoonCircularLoaderSize.xs), | ||
| Option(label: "sm", value: MoonCircularLoaderSize.sm), | ||
| Option(label: "md", value: MoonCircularLoaderSize.md), | ||
| Option(label: "lg", value: MoonCircularLoaderSize.lg), | ||
| ], | ||
| ); | ||
|
|
||
| final loaderColorKnob = context.knobs.options( | ||
| label: "color", | ||
| description: "MoonColors variants for CircularLoader color.", | ||
| initial: 1, // hit | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final color = colorTable(context)[loaderColorKnob]; | ||
|
|
||
| final loaderBackgroundColorKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for CircularLoader background.", | ||
| initial: 39, // none | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[loaderBackgroundColorKnob]; | ||
|
|
||
| final loaderStrokeCapKnob = context.knobs.options( | ||
| label: "strokeCap", | ||
| description: "CircularLoader stroke cap.", | ||
| initial: StrokeCap.round, | ||
| options: const [ | ||
| Option(label: "round", value: StrokeCap.round), | ||
| Option(label: "square", value: StrokeCap.square), | ||
| Option(label: "butt", value: StrokeCap.butt), | ||
| ], | ||
| ); | ||
|
|
||
| return Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| MoonCircularLoader( | ||
| color: color, | ||
| backgroundColor: backgroundColor, | ||
| loaderSize: loaderSizesKnob, | ||
| strokeCap: loaderStrokeCapKnob, | ||
| ), | ||
| 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,73 @@ | ||
| 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 LinearProgressStory extends Story { | ||
| LinearProgressStory() | ||
| : super( | ||
| name: "Progress/LinearProgress", | ||
| builder: (context) { | ||
| final loaderSizesKnob = context.knobs.options( | ||
| label: "MoonLinearProgressSize", | ||
| description: "LinearProgress size variants.", | ||
| initial: MoonLinearProgressSize.x4s, | ||
| options: const [ | ||
| Option(label: "x6s", value: MoonLinearProgressSize.x6s), | ||
| Option(label: "x5s", value: MoonLinearProgressSize.x5s), | ||
| Option(label: "x4s", value: MoonLinearProgressSize.x4s), | ||
| Option(label: "x3s", value: MoonLinearProgressSize.x3s), | ||
| Option(label: "x2s", value: MoonLinearProgressSize.x2s), | ||
| ], | ||
| ); | ||
|
|
||
| final loaderColorKnob = context.knobs.options( | ||
| label: "color", | ||
| description: "MoonColors variants for LinearProgress color.", | ||
| initial: 0, // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final color = colorTable(context)[loaderColorKnob]; | ||
|
|
||
| final loaderBackgroundColorKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for LinearProgress background.", | ||
| initial: 6, // trunks | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[loaderBackgroundColorKnob]; | ||
|
|
||
| final borderRadiusValueKnob = context.knobs.sliderInt( | ||
| label: "bordeRadiusValue", | ||
| description: "LinearProgress border radius value.", | ||
| initial: 8, | ||
| max: 12, | ||
| ); | ||
|
|
||
| final linearProgressValueKnob = context.knobs.slider( | ||
| label: "value", | ||
| description: "LinearProgress value.", | ||
| initial: 0.5, | ||
| ); | ||
|
|
||
| return Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| MoonLinearProgress( | ||
| value: linearProgressValueKnob, | ||
| loaderSize: loaderSizesKnob, | ||
| color: color, | ||
| backgroundColor: backgroundColor, | ||
| borderRadiusValue: borderRadiusValueKnob.toDouble(), | ||
| ), | ||
| 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
Oops, something went wrong.