-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
40044c0
commit 6394ef6
Showing
6 changed files
with
226 additions
and
0 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,33 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:zeta_example/widgets.dart'; | ||
| import 'package:zeta_flutter/zeta_flutter.dart'; | ||
|
|
||
| class SliderExample extends StatefulWidget { | ||
| static const String name = 'Slider'; | ||
|
|
||
| const SliderExample({super.key}); | ||
|
|
||
| @override | ||
| State<SliderExample> createState() => _SliderExampleState(); | ||
| } | ||
|
|
||
| class _SliderExampleState extends State<SliderExample> { | ||
| double value = 0.5; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ExampleScaffold( | ||
| name: SliderExample.name, | ||
| child: Center( | ||
| child: ZetaSlider( | ||
| value: value, | ||
| onChange: (newValue) { | ||
| setState(() { | ||
| value = newValue; | ||
| }); | ||
| }, | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
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
39 changes: 39 additions & 0 deletions
39
example/widgetbook/pages/components/slider_widgetbook.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,39 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:widgetbook/widgetbook.dart'; | ||
| import 'package:zeta_flutter/zeta_flutter.dart'; | ||
|
|
||
| import '../../test/test_components.dart'; | ||
|
|
||
| Widget sliderUseCase(BuildContext context) { | ||
| return WidgetbookTestWidget(widget: Builder(builder: (context) { | ||
| return ZetaSliderExample(context); | ||
| })); | ||
| } | ||
|
|
||
| class ZetaSliderExample extends StatefulWidget { | ||
| const ZetaSliderExample(this.c); | ||
| final BuildContext c; | ||
|
|
||
| @override | ||
| State<ZetaSliderExample> createState() => _ZetaSliderExampleState(); | ||
| } | ||
|
|
||
| class _ZetaSliderExampleState extends State<ZetaSliderExample> { | ||
| double value = 0.5; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ZetaSlider( | ||
| value: value, | ||
| rounded: widget.c.knobs.boolean(label: "Rounded"), | ||
| divisions: widget.c.knobs.intOrNull.slider(label: "Divisions", min: 1, initialValue: 10), | ||
| onChange: widget.c.knobs.boolean(label: "Disabled") | ||
| ? null | ||
| : (newValue) { | ||
| setState(() { | ||
| value = newValue; | ||
| }); | ||
| }, | ||
| ); | ||
| } | ||
| } |
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,148 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import '../../theme/tokens.dart'; | ||
| import '../../zeta.dart'; | ||
|
|
||
| /// Slider component with customized styling | ||
| class ZetaSlider extends StatefulWidget { | ||
| /// Default constructor for [ZetaSlider] | ||
| const ZetaSlider({ | ||
| super.key, | ||
| required this.value, | ||
| this.onChange, | ||
| this.rounded = false, | ||
| this.divisions, | ||
| }); | ||
|
|
||
| /// Double value to represent slider percentage | ||
| final double value; | ||
|
|
||
| /// Callback to handle changing of slider | ||
| final ValueChanged<double>? onChange; | ||
|
|
||
| /// {@macro zeta-component-rounded} | ||
| final bool rounded; | ||
|
|
||
| /// Number of divisions. | ||
| final int? divisions; | ||
|
|
||
| @override | ||
| State<ZetaSlider> createState() => _ZetaSliderState(); | ||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty<bool>('rounded', rounded)) | ||
| ..add(DoubleProperty('value', value)) | ||
| ..add(ObjectFlagProperty<ValueChanged<double>?>.has('onChange', onChange)) | ||
| ..add(IntProperty('divisions', divisions)); | ||
| } | ||
| } | ||
|
|
||
| class _ZetaSliderState extends State<ZetaSlider> { | ||
| bool _selected = false; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final colors = Zeta.of(context).colors; | ||
|
|
||
| return SliderTheme( | ||
| data: SliderThemeData( | ||
| /** TODO: Match with new colors */ | ||
|
|
||
| /// Active Track | ||
| activeTrackColor: _activeColor, | ||
| disabledActiveTrackColor: colors.surfaceDisabled, | ||
|
|
||
| /// Inactive Track | ||
| inactiveTrackColor: colors.surfaceInfoSubtle, | ||
|
|
||
| /// Ticks | ||
| activeTickMarkColor: colors.surfaceDefault, | ||
| inactiveTickMarkColor: colors.surfaceDefault, | ||
|
|
||
| /// Thumb | ||
| thumbColor: colors.surfaceDefaultInverse, | ||
| disabledThumbColor: colors.surfaceDisabled, | ||
| overlayShape: SliderThumb(size: ZetaSpacing.xl_1, rounded: widget.rounded, color: _activeColor), | ||
| thumbShape: SliderThumb( | ||
| size: ZetaSpacing.large, | ||
| rounded: widget.rounded, | ||
| color: _activeColor, | ||
| ), | ||
| ), | ||
| child: Slider( | ||
| value: widget.value, | ||
| onChanged: widget.onChange, | ||
| divisions: widget.divisions, | ||
| onChangeStart: (_) { | ||
| setState(() { | ||
| _selected = true; | ||
| }); | ||
| }, | ||
| onChangeEnd: (_) { | ||
| setState(() { | ||
| _selected = false; | ||
| }); | ||
| }, | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| Color get _activeColor { | ||
| final colors = Zeta.of(context).colors; | ||
| if (widget.onChange == null) { | ||
| return colors.surfaceDisabled; | ||
| } | ||
| return _selected ? colors.primary : colors.surfaceDefaultInverse; | ||
| } | ||
| } | ||
|
|
||
| /// Custom slider thumb component | ||
| class SliderThumb extends SliderComponentShape { | ||
| /// Constructor for [SliderThumb] | ||
| const SliderThumb({required this.size, required this.rounded, required this.color}); | ||
|
|
||
| /// Radius or width/height for [SliderThumb] depending on shape | ||
| final double size; | ||
|
|
||
| /// If [SliderThumb] is circular or a square | ||
| final bool rounded; | ||
|
|
||
| /// Color of [SliderThumb] | ||
| final Color color; | ||
|
|
||
| @override | ||
| Size getPreferredSize(bool isEnabled, bool isDiscrete) { | ||
| return Size.fromRadius(size); | ||
| } | ||
|
|
||
| /// Paints thumb | ||
| @override | ||
| void paint( | ||
| PaintingContext context, | ||
| Offset center, { | ||
| required Animation<double> activationAnimation, | ||
| required Animation<double> enableAnimation, | ||
| required bool isDiscrete, | ||
| required TextPainter labelPainter, | ||
| required RenderBox parentBox, | ||
| required SliderThemeData sliderTheme, | ||
| required TextDirection textDirection, | ||
| required double value, | ||
| required double textScaleFactor, | ||
| required Size sizeWithOverflow, | ||
| }) { | ||
| final Canvas canvas = context.canvas; | ||
|
|
||
| final paint = Paint() | ||
| ..style = PaintingStyle.fill | ||
| ..color = color; | ||
|
|
||
| // draw icon with text painter | ||
| rounded | ||
| ? canvas.drawCircle(center, size, paint) | ||
| : canvas.drawRect(Rect.fromCenter(center: center, width: size, height: size), paint); | ||
| } | ||
| } |
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