Macos slider (#337)

* chore: run flutter format . * chore: fix analysis * chore: Bump version and update CHANGELOG.md * chore: Update images to self taken ones as MacOS images are outdated * fix: fix position offset by a small value * fix: PR review feedback * Update lib/src/indicators/slider.dart --------- Co-authored-by: Reuben Turner <groovinchip@gmail.com>
macosui · Feb 3, 2023 · ced5193 · ced5193
1 parent 9894aba
commit ced5193
Show file tree

Hide file tree

Showing 10 changed files with 552 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## [1.9.0]
+* Implement `MacosSlider`
+
 ## [1.8.0]
 🚨 Breaking Changes 🚨
 * `ContentArea.builder` has been changed from a `ScrollableWidgetBuilder` to a `WidgetBuilder` due to 

diff --git a/README.md b/README.md
@@ -858,6 +858,29 @@ CapacityIndicator(
 
 You can set `discrete` to `true` to make it a discrete capacity indicator.
 
+### MacosSlider
+
+A slider is a control that lets people select a value from a continuous or discrete range of values by moving the slider thumb.
+
+ Continuous                                                                                                                                                         | Discrete                                                                                                                                                                                                         |
+|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ![Continuous Slider Example](https://i.imgur.com/dc4YjoX.png) | ![Discrete Slider Example](https://i.imgur.com/KckOTUf.png)                                                                                   |
+| A horizontal slider where any value continuous value between a min and max can be selected | A horizontal slider where only discrete values between a min and max can be selected. Tick marks are often displayed to provide context. |
+
+
+Here's an example of how to create an interactive continuous slider:
+
+```dart
+double value = 0.5;
+
+MacosSlider(
+  value: value,
+  onChanged: (v) {
+    setState(() => value = v);
+  },
+),
+```
+
 ### RatingIndicator
 
 A rating indicator uses a series of horizontally arranged graphical symbols to communicate a ranking level. The default 

diff --git a/example/lib/pages/indicators_page.dart b/example/lib/pages/indicators_page.dart
@@ -11,7 +11,8 @@ class IndicatorsPage extends StatefulWidget {
 
 class _IndicatorsPageState extends State<IndicatorsPage> {
   double ratingValue = 0;
-  double sliderValue = 0;
+  double capacitorValue = 0;
+  double sliderValue = 0.3;
 
   @override
   Widget build(BuildContext context) {
@@ -48,6 +49,17 @@ class _IndicatorsPageState extends State<IndicatorsPage> {
                     onChanged: (v) => setState(() => sliderValue = v),
                   ),
                   const SizedBox(height: 20),
+                  MacosSlider(
+                    value: sliderValue,
+                    onChanged: (v) => setState(() => sliderValue = v),
+                  ),
+                  const SizedBox(height: 20),
+                  MacosSlider(
+                    value: sliderValue,
+                    discrete: true,
+                    onChanged: (v) => setState(() => sliderValue = v),
+                  ),
+                  const SizedBox(height: 20),
                   RatingIndicator(
                     value: ratingValue,
                     onChanged: (v) => setState(() => ratingValue = v),

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -97,7 +97,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.8.0"
+    version: "1.9.0"
   matcher:
     dependency: transitive
     description:
@@ -208,5 +208,5 @@ packages:
     source: hosted
     version: "2.1.4"
 sdks:
-  dart: ">=2.18.0 <4.0.0"
+  dart: ">=2.18.0 <3.0.0"
   flutter: ">=1.20.0"
diff --git a/lib/macos_ui.dart b/lib/macos_ui.dart
@@ -37,6 +37,7 @@ export 'src/indicators/progress_indicators.dart';
 export 'src/indicators/rating_indicator.dart';
 export 'src/indicators/relevance_indicator.dart';
 export 'src/indicators/scrollbar.dart';
+export 'src/indicators/slider.dart';
 export 'src/labels/label.dart';
 export 'src/labels/tooltip.dart';
 export 'src/layout/content_area.dart';