Add slider label (#208)

* Update installation guide (#197) * Update installation guode * Update changelog * Commit from GitHub Actions (Forui Presubmit) --------- Co-authored-by: Pante <[email protected]> * Tweak slider thumb size and track hit region cross extent * WIP improve touch platform detection API * Add platform-specific styles * Add initial label layout * Extract InheritedState widget * Fix window resizing error * Tidy up slider implementation * Add passing golden test images * Fix incorrect mark positioning * Add tests for asymmetric padding * ops * Fix slider disable opacity * Add slider state tests * Add combination of label + mark offset tests * Update samples * Commit from GitHub Actions (Forui Samples Presubmit) * Remove leak testing * Commit from GitHub Actions (Forui Presubmit) * Update forui/lib/src/widgets/text_field/text_field.dart Co-authored-by: Joe Kawai <[email protected]> * Fix PR issues * Add form example & fix marks rendering incorrectly * Update docs/pages/docs/slider.mdx Co-authored-by: Joe Kawai <[email protected]> --------- Co-authored-by: Pante <[email protected]> Co-authored-by: Joe Kawai <[email protected]>
forus-labs · Sep 30, 2024 · 92856cc · 92856cc
1 parent 1fd6c42
commit 92856cc
Show file tree

Hide file tree

Showing 165 changed files with 2,037 additions and 905 deletions.
diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
@@ -35,7 +35,7 @@ To use Forui widgets in your Flutter app, import the Forui package and place the
 [`FTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FTheme-class.html) widget underneath `CupertinoApp`,
 `MaterialApp`, or `WidgetsApp` at at the root of the widget tree.
 
-```dart filename="main.dart" {3,12-16}
+```dart filename="main.dart" {3,12-18}
 import 'package:flutter/material.dart';
 
 import 'package:forui/forui.dart';

diff --git a/docs/pages/docs/slider.mdx b/docs/pages/docs/slider.mdx
@@ -49,15 +49,36 @@ FSlider(
 
 ### Appearance
 
+#### Labelled
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='slider' query={{label: 'Volume', description: 'Adjust the volume by dragging the slider.'}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart {2-3}
+        FSlider(
+          label: const Text('Volume'),
+          description: const Text('Adjust the volume by dragging the slider.'),
+          controller: FContinuousSliderController(
+            selection: FSliderSelection(max: 0.6),
+          ),
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
+
 #### Disabled
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='slider' query={{enabled: 'false'}}/>
+    <Widget name='slider' query={{enabled: 'false', label: 'Volume', description: 'Adjust the volume by dragging the slider.'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-        ```dart {5}
+        ```dart {7}
         FSlider(
+          label: const Text('Volume'),
+          description: const Text('Adjust the volume by dragging the slider.'),
           controller: FContinuousSliderController(
             selection: FSliderSelection(max: 0.6),
           ),
@@ -67,6 +88,26 @@ FSlider(
   </Tabs.Tab>
 </Tabs>
 
+#### Error
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='slider' query={{label: 'Volume', description: 'Adjust the volume by dragging the slider.', error: 'Volume is too high.'}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart {4}
+        FSlider(
+          label: const Text('Volume'),
+          description: const Text('Adjust the volume by dragging the slider.'),
+          forceErrorText: 'Volume is too high.',
+          controller: FContinuousSliderController(
+            selection: FSliderSelection(max: 0.6),
+          ),
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
+
 
 #### Tooltip
 
@@ -183,23 +224,24 @@ describes the mark's value.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='slider' variant='marks' query={{layout: 'btt'}} height={400}/>
+    <Widget name='slider' variant='vertical' height={500}/>
   </Tabs.Tab>
   <Tabs.Tab>
-        ```dart {2}
+        ```dart {4}
         FSlider(
+          label: const Text('Volume'),
+          description: const Text('Adjust the volume by dragging the slider.'),
           layout: Layout.btt,
-          controller: FContinuousSliderController(
-            selection: FSliderSelection(max: 0.6),
-          ),
+          controller: FContinuousSliderController(selection: FSliderSelection(max: 0.35)),
+          trackMainAxisExtent: 350,
           marks: const [
             FSliderMark(value: 0, label: Text('0%')),
             FSliderMark(value: 0.25, tick: false),
-            FSliderMark(value: 0.5),
+            FSliderMark(value: 0.5, label: Text('50%')),
             FSliderMark(value: 0.75, tick: false),
             FSliderMark(value: 1, label: Text('100%')),
           ],
-        );
+        ),
         ```
   </Tabs.Tab>
 </Tabs>
@@ -285,3 +327,64 @@ Tap anywhere or slide the thumb to select a value.
         ```
   </Tabs.Tab>
 </Tabs>
+
+### Form
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='slider' variant='form' height='500'/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        class SliderForm extends StatefulWidget {
+          const SliderForm({super.key});
+
+          @override
+          State<SliderForm> createState() => SliderFormState();
+        }
+
+        class SliderFormState extends State<SliderForm> {
+          final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+          @override
+          Widget build(BuildContext context) => Form(
+                key: _formKey,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    FSlider(
+                      label: const Text('Brightness'),
+                      description: const Text('Adjust the brightness level.'),
+                      // validator: (value) => 'An error text.',
+                      controller: FContinuousSliderController(
+                        selection: FSliderSelection(max: 0.35),
+                      ),
+                      marks: const [
+                        FSliderMark(value: 0, label: Text('0%')),
+                        FSliderMark(value: 0.25, tick: false),
+                        FSliderMark(value: 0.5, label: Text('50%')),
+                        FSliderMark(value: 0.75, tick: false),
+                        FSliderMark(value: 1, label: Text('100%')),
+                      ],
+                    ),
+                    const SizedBox(height: 20),
+                    FButton(
+                      label: const Text('Save'),
+                      onPress: () {
+                        if (!_formKey.currentState!.validate()) {
+                          // Handle errors here.
+                          return;
+                        }
+
+                        _formKey.currentState!.save();
+                        // Do something.
+                      },
+                    ),
+                  ],
+                ),
+              );
+        }
+        ```
+  </Tabs.Tab>
+</Tabs>
diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -13,6 +13,9 @@
 
 * Add `FTextField.forceErrorText`.
 
+* **Breaking** Add `FColorScheme.disabledColorBrightness` - this will only affect users that create a `FColorScheme`
+  from scratch.
+
 ### Changes
 
 * Change button to change color when hovering over it.
@@ -30,6 +33,10 @@
 
 * **Breaking** Remove `FTextFieldErrorStyle.animatioDuration`.
 
+* **Breaking** Rename `FLabelStateStyle` to `FLabelStateStyles`.
+
+* **Breaking** Rename `FTextField.onSave` to `FTextField.onSaved`.
+
 ### Fixes
 
 * Fix `FBottomNavigationBar` items hit region being smaller than intended.
@@ -46,6 +53,8 @@
 
 * Fix `FSwitch` not using correct label style.
 
+* Fix `FCheckbox`, `FRadio`, `FSelectGroup`, `FSwitch` and `FTextField` styles causing the widget inspector to crash.
+
 
 ## 0.5.1
 

diff --git a/forui/example/ios/Podfile.lock b/forui/example/ios/Podfile.lock
@@ -1,22 +1,34 @@
 PODS:
   - Flutter (1.0.0)
+  - package_info_plus (0.4.5):
+    - Flutter
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
+  - wakelock_plus (0.0.1):
+    - Flutter
 
 DEPENDENCIES:
   - Flutter (from `Flutter`)
+  - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
+  - wakelock_plus (from `.symlinks/plugins/wakelock_plus/ios`)
 
 EXTERNAL SOURCES:
   Flutter:
     :path: Flutter
+  package_info_plus:
+    :path: ".symlinks/plugins/package_info_plus/ios"
   path_provider_foundation:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
+  wakelock_plus:
+    :path: ".symlinks/plugins/wakelock_plus/ios"
 
 SPEC CHECKSUMS:
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
+  package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c
   path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
+  wakelock_plus: 78ec7c5b202cab7761af8e2b2b3d0671be6c4ae1
 
 PODFILE CHECKSUM: 819463e6a0290f5a72f145ba7cde16e8b6ef0796
 

diff --git a/forui/example/lib/main.dart b/forui/example/lib/main.dart
@@ -3,8 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:forui/forui.dart';
 
 import 'package:forui_example/sandbox.dart';
+import 'package:wakelock_plus/wakelock_plus.dart';
 
 void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+  WakelockPlus.enable();
+
   runApp(const Application());
 }
 
@@ -24,7 +28,7 @@ class Application extends StatefulWidget {
 }
 
 class _ApplicationState extends State<Application> {
-  int index = 0;
+  int index = 4;
 
   @override
   Widget build(BuildContext context) => MaterialApp(

diff --git a/forui/example/lib/sandbox.dart b/forui/example/lib/sandbox.dart
@@ -19,16 +19,7 @@ class _SandboxState extends State<Sandbox> {
   }
 
   @override
-  Widget build(BuildContext context) => Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          FTextField.email(
-            autovalidateMode: AutovalidateMode.always,
-            description: const Text('Description'),
-            validator: (value) => value?.length == 5 ? 'Error message' : null,
-          ),
-          const SizedBox(height: 20),
-          const FTextField.password(),
-        ],
+  Widget build(BuildContext context) => FSlider(
+        controller: FContinuousSliderController.range(selection: FSliderSelection(min: 0.30, max: 0.35)),
       );
 }
diff --git a/forui/example/macos/Podfile.lock b/forui/example/macos/Podfile.lock
@@ -1,22 +1,34 @@
 PODS:
   - FlutterMacOS (1.0.0)
+  - package_info_plus (0.0.1):
+    - FlutterMacOS
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
+  - wakelock_plus (0.0.1):
+    - FlutterMacOS
 
 DEPENDENCIES:
   - FlutterMacOS (from `Flutter/ephemeral`)
+  - package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`)
   - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`)
+  - wakelock_plus (from `Flutter/ephemeral/.symlinks/plugins/wakelock_plus/macos`)
 
 EXTERNAL SOURCES:
   FlutterMacOS:
     :path: Flutter/ephemeral
+  package_info_plus:
+    :path: Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos
   path_provider_foundation:
     :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin
+  wakelock_plus:
+    :path: Flutter/ephemeral/.symlinks/plugins/wakelock_plus/macos
 
 SPEC CHECKSUMS:
   FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
+  package_info_plus: fa739dd842b393193c5ca93c26798dff6e3d0e0c
   path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
+  wakelock_plus: 4783562c9a43d209c458cb9b30692134af456269
 
 PODFILE CHECKSUM: 236401fc2c932af29a9fcf0e97baeeb2d750d367