-
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-405] Create CircularProgress widget (#58)
- Loading branch information
Showing
9 changed files
with
316 additions
and
6 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,65 @@ | ||
| 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 CircularProgressStory extends Story { | ||
| CircularProgressStory() | ||
| : super( | ||
| name: "CircularProgress", | ||
| builder: (context) { | ||
| final circularProgressSizesKnob = context.knobs.options( | ||
| label: "MoonCircularProgressSize", | ||
| description: "CircularProgress size variants.", | ||
| initial: MoonCircularProgressSize.md, | ||
| options: const [ | ||
| Option(label: "x2s", value: MoonCircularProgressSize.x2s), | ||
| Option(label: "xs", value: MoonCircularProgressSize.xs), | ||
| Option(label: "sm", value: MoonCircularProgressSize.sm), | ||
| Option(label: "md", value: MoonCircularProgressSize.md), | ||
| Option(label: "lg", value: MoonCircularProgressSize.lg), | ||
| ], | ||
| ); | ||
|
|
||
| final circularProgressColorKnob = context.knobs.options( | ||
| label: "color", | ||
| description: "MoonColors variants for CircularProgress color.", | ||
| initial: 0, // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final color = colorTable(context)[circularProgressColorKnob]; | ||
|
|
||
| final circularProgressBackgroundColorKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for CircularProgress background.", | ||
| initial: 6, // trunks | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[circularProgressBackgroundColorKnob]; | ||
|
|
||
| final circularProgressValueKnob = context.knobs.slider( | ||
| label: "value", | ||
| description: "CircularProgress value.", | ||
| initial: 0.75, | ||
| ); | ||
|
|
||
| return Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| MoonCircularProgress( | ||
| value: circularProgressValueKnob, | ||
| color: color, | ||
| backgroundColor: backgroundColor, | ||
| circularProgressSize: circularProgressSizesKnob, | ||
| ), | ||
| 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
75 changes: 75 additions & 0 deletions
75
lib/src/theme/circular_progress/circular_progress_sizes.dart
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,75 @@ | ||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/sizes.dart'; | ||
|
|
||
| @immutable | ||
| class MoonCircularProgressSizes extends ThemeExtension<MoonCircularProgressSizes> with DiagnosticableTreeMixin { | ||
| static final x2s = MoonCircularProgressSizes( | ||
| circularProgressSizeValue: MoonSizes.sizes.x2s, | ||
| circularProgressStrokeWidth: MoonSizes.sizes.x6s, | ||
| ); | ||
|
|
||
| static final xs = MoonCircularProgressSizes( | ||
| circularProgressSizeValue: MoonSizes.sizes.xs, | ||
| circularProgressStrokeWidth: MoonSizes.sizes.x6s, | ||
| ); | ||
|
|
||
| static final sm = MoonCircularProgressSizes( | ||
| circularProgressSizeValue: MoonSizes.sizes.sm, | ||
| circularProgressStrokeWidth: MoonSizes.sizes.x6s, | ||
| ); | ||
|
|
||
| static final md = MoonCircularProgressSizes( | ||
| circularProgressSizeValue: MoonSizes.sizes.md, | ||
| circularProgressStrokeWidth: MoonSizes.sizes.x5s, | ||
| ); | ||
|
|
||
| static final lg = MoonCircularProgressSizes( | ||
| circularProgressSizeValue: MoonSizes.sizes.lg, | ||
| circularProgressStrokeWidth: MoonSizes.sizes.x5s, | ||
| ); | ||
|
|
||
| /// Circular progress size value. | ||
| final double circularProgressSizeValue; | ||
|
|
||
| /// Circular progress stroke width. | ||
| final double circularProgressStrokeWidth; | ||
|
|
||
| const MoonCircularProgressSizes({ | ||
| required this.circularProgressSizeValue, | ||
| required this.circularProgressStrokeWidth, | ||
| }); | ||
|
|
||
| @override | ||
| MoonCircularProgressSizes copyWith({ | ||
| double? circularProgressSizeValue, | ||
| double? circularProgressStrokeWidth, | ||
| }) { | ||
| return MoonCircularProgressSizes( | ||
| circularProgressSizeValue: circularProgressSizeValue ?? this.circularProgressSizeValue, | ||
| circularProgressStrokeWidth: circularProgressStrokeWidth ?? this.circularProgressStrokeWidth, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonCircularProgressSizes lerp(ThemeExtension<MoonCircularProgressSizes>? other, double t) { | ||
| if (other is! MoonCircularProgressSizes) return this; | ||
|
|
||
| return MoonCircularProgressSizes( | ||
| circularProgressSizeValue: lerpDouble(circularProgressSizeValue, other.circularProgressSizeValue, t)!, | ||
| circularProgressStrokeWidth: lerpDouble(circularProgressStrokeWidth, other.circularProgressStrokeWidth, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonCircularProgressSizes")) | ||
| ..add(DoubleProperty("circularProgressSizeValue", circularProgressSizeValue)) | ||
| ..add(DoubleProperty("circularProgressStrokeWidth", circularProgressStrokeWidth)); | ||
| } | ||
| } |
80 changes: 80 additions & 0 deletions
80
lib/src/theme/circular_progress/circular_progress_theme.dart
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,80 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/circular_progress/circular_progress_sizes.dart'; | ||
|
|
||
| @immutable | ||
| class MoonCircularProgressTheme extends ThemeExtension<MoonCircularProgressTheme> with DiagnosticableTreeMixin { | ||
| static final sizes = MoonCircularProgressTheme( | ||
| x2s: MoonCircularProgressSizes.x2s, | ||
| xs: MoonCircularProgressSizes.xs, | ||
| sm: MoonCircularProgressSizes.sm, | ||
| md: MoonCircularProgressSizes.md, | ||
| lg: MoonCircularProgressSizes.lg, | ||
| ); | ||
|
|
||
| /// (2x) Extra small circular progress properties. | ||
| final MoonCircularProgressSizes x2s; | ||
|
|
||
| /// Extra small circular progress properties. | ||
| final MoonCircularProgressSizes xs; | ||
|
|
||
| /// Small circular progress properties. | ||
| final MoonCircularProgressSizes sm; | ||
|
|
||
| /// Medium circular progress properties. | ||
| final MoonCircularProgressSizes md; | ||
|
|
||
| /// Large circular progress properties. | ||
| final MoonCircularProgressSizes lg; | ||
|
|
||
| const MoonCircularProgressTheme({ | ||
| required this.x2s, | ||
| required this.xs, | ||
| required this.sm, | ||
| required this.md, | ||
| required this.lg, | ||
| }); | ||
|
|
||
| @override | ||
| MoonCircularProgressTheme copyWith({ | ||
| MoonCircularProgressSizes? x2s, | ||
| MoonCircularProgressSizes? xs, | ||
| MoonCircularProgressSizes? sm, | ||
| MoonCircularProgressSizes? md, | ||
| MoonCircularProgressSizes? lg, | ||
| }) { | ||
| return MoonCircularProgressTheme( | ||
| x2s: x2s ?? this.x2s, | ||
| xs: xs ?? this.xs, | ||
| sm: sm ?? this.sm, | ||
| md: md ?? this.md, | ||
| lg: lg ?? this.lg, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonCircularProgressTheme lerp(ThemeExtension<MoonCircularProgressTheme>? other, double t) { | ||
| if (other is! MoonCircularProgressTheme) return this; | ||
|
|
||
| return MoonCircularProgressTheme( | ||
| x2s: x2s.lerp(other.x2s, t), | ||
| xs: xs.lerp(other.xs, t), | ||
| sm: sm.lerp(other.sm, t), | ||
| md: md.lerp(other.md, t), | ||
| lg: lg.lerp(other.lg, t), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonCircularProgressTheme")) | ||
| ..add(DiagnosticsProperty<MoonCircularProgressSizes>("x2s", x2s)) | ||
| ..add(DiagnosticsProperty<MoonCircularProgressSizes>("xs", xs)) | ||
| ..add(DiagnosticsProperty<MoonCircularProgressSizes>("sm", sm)) | ||
| ..add(DiagnosticsProperty<MoonCircularProgressSizes>("md", md)) | ||
| ..add(DiagnosticsProperty<MoonCircularProgressSizes>("lg", lg)); | ||
| } | ||
| } |
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.