Updates (#480)

- `ToggleSwitch` updates: - Use the correct color for `DefaultToggleSwitchThumb` ([#463](#463)) - Added `ToggleSwitch.leadingContent`, which positions the content before the switch ([#464](#464)) - Added `ToggleSwitch.thumbBuilder`, which builds the thumb based on the current state - Added `TextChangedReason.cleared`, which is called when the text is cleared by the user in an `AutoSuggestBox` ([#461](#461)) - `Tooltip` overlay is now ignored when hovered ([#443](#443))
bdlukaa · Aug 20, 2022 · 1a631f3 · 1a631f3
2 parents af8a5a7 + 88849b9
commit 1a631f3
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 134 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,14 @@ Date format: DD/MM/YYYY
 
 - `DisableAcrylic` now fully disable transparency of its decendents `Acrylic`s ([#468](/~https://github.com/bdlukaa/fluent_ui/issues/468))
 - `Combobox.comboboxColor` is now correctly applied ([#468](/~https://github.com/bdlukaa/fluent_ui/issues/468))
-- Use the correct color for `DefaultToggleSwitchThumb` ([#463](/~https://github.com/bdlukaa/fluent_ui/issues/463)) 
 - Do not interpolate between infinite constraints on `TabView` ([#430](/~https://github.com/bdlukaa/fluent_ui/issues/430))
 - Do not rebuild the `TimePicker` popup when already rebuilding ([#437](/~https://github.com/bdlukaa/fluent_ui/issues/437))
+- `ToggleSwitch` updates:
+  - Use the correct color for `DefaultToggleSwitchThumb` ([#463](/~https://github.com/bdlukaa/fluent_ui/issues/463)) 
+  - Added `ToggleSwitch.leadingContent`, which positions the content before the switch ([#464](/~https://github.com/bdlukaa/fluent_ui/issues/464))
+  - Added `ToggleSwitch.thumbBuilder`, which builds the thumb based on the current state
+- Added `TextChangedReason.cleared`, which is called when the text is cleared by the user in an `AutoSuggestBox` ([#461](/~https://github.com/bdlukaa/fluent_ui/issues/461))
+- `Tooltip` overlay is now ignored when hovered ([#443](/~https://github.com/bdlukaa/fluent_ui/issues/443))
 
 ## [4.0.0-pre.3] - Top navigation and auto suggestions - [13/08/2022]
 

diff --git a/example/lib/screens/inputs/button.dart b/example/lib/screens/inputs/button.dart
@@ -6,16 +6,14 @@ import 'package:fluent_ui/fluent_ui.dart';
 import '../../widgets/card_highlight.dart';
 
 class ButtonPage extends ScrollablePage {
-  PageState state = <String, dynamic>{
-    'simple_disabled': false,
-    'filled_disabled': false,
-    'icon_disabled': false,
-    'toggle_state': false,
-    'toggle_disabled': false,
-    'split_button_disabled': false,
-    'radio_button_disabled': false,
-    'radio_button_selected': -1,
-  };
+  bool simpleDisabled = false;
+  bool filledDisabled = false;
+  bool iconDisabled = false;
+  bool toggleDisabled = false;
+  bool toggleState = false;
+  bool splitButtonDisabled = false;
+  bool radioButtonDisabled = false;
+  int radioButtonSelected = -1;
 
   @override
   Widget buildHeader(BuildContext context) {
@@ -33,14 +31,14 @@ class ButtonPage extends ScrollablePage {
         child: Row(children: [
           Button(
             child: const Text('Standart Button'),
-            onPressed: state['simple_disabled'] ? null : () {},
+            onPressed: simpleDisabled ? null : () {},
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['simple_disabled'],
+            checked: simpleDisabled,
             onChanged: (v) {
               setState(() {
-                state['simple_disabled'] = v;
+                simpleDisabled = v;
               });
             },
             content: const Text('Disabled'),
@@ -56,14 +54,14 @@ class ButtonPage extends ScrollablePage {
         child: Row(children: [
           FilledButton(
             child: const Text('Filled Button'),
-            onPressed: state['filled_disabled'] ? null : () {},
+            onPressed: filledDisabled ? null : () {},
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['filled_disabled'],
+            checked: filledDisabled,
             onChanged: (v) {
               setState(() {
-                state['filled_disabled'] = v;
+                filledDisabled = v;
               });
             },
             content: const Text('Disabled'),
@@ -81,14 +79,14 @@ class ButtonPage extends ScrollablePage {
         child: Row(children: [
           IconButton(
             icon: const Icon(FluentIcons.graph_symbol, size: 24.0),
-            onPressed: state['icon_disabled'] ? null : () {},
+            onPressed: iconDisabled ? null : () {},
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['icon_disabled'],
+            checked: iconDisabled,
             onChanged: (v) {
               setState(() {
-                state['icon_disabled'] = v;
+                iconDisabled = v;
               });
             },
             content: const Text('Disabled'),
@@ -107,21 +105,21 @@ class ButtonPage extends ScrollablePage {
         child: Row(children: [
           ToggleButton(
             child: const Text('Toggle Button'),
-            checked: state['toggle_state'],
-            onChanged: state['toggle_disabled']
+            checked: toggleState,
+            onChanged: toggleDisabled
                 ? null
                 : (v) {
                     setState(() {
-                      state['toggle_state'] = v;
+                      toggleState = v;
                     });
                   },
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['toggle_disabled'],
+            checked: toggleDisabled,
             onChanged: (v) {
               setState(() {
-                state['toggle_disabled'] = v;
+                toggleDisabled = v;
               });
             },
             content: const Text('Disabled'),
@@ -189,7 +187,7 @@ ToggleButton(
                 Button(
                   child: Container(
                     decoration: BoxDecoration(
-                      color: state['split_button_disabled']
+                      color: splitButtonDisabled
                           ? FluentTheme.of(context).accentColor.darker
                           : FluentTheme.of(context).accentColor,
                       borderRadius: const BorderRadiusDirectional.horizontal(
@@ -199,23 +197,23 @@ ToggleButton(
                     height: 24,
                     width: 24,
                   ),
-                  onPressed: state['split_button_disabled'] ? null : () {},
+                  onPressed: splitButtonDisabled ? null : () {},
                 ),
                 IconButton(
                   icon: const SizedBox(
                     // height: splitButtonHeight,
                     child: Icon(FluentIcons.chevron_down, size: 10.0),
                   ),
-                  onPressed: state['split_button_disabled'] ? null : () {},
+                  onPressed: splitButtonDisabled ? null : () {},
                 ),
               ],
             ),
             const Spacer(),
             ToggleSwitch(
-              checked: state['split_button_disabled'],
+              checked: splitButtonDisabled,
               onChanged: (v) {
                 setState(() {
-                  state['split_button_disabled'] = v;
+                  splitButtonDisabled = v;
                 });
               },
               content: const Text('Disabled'),
@@ -253,13 +251,13 @@ ToggleButton(
                 return Padding(
                   padding: EdgeInsets.only(bottom: index == 2 ? 0.0 : 14.0),
                   child: RadioButton(
-                    checked: state['radio_button_selected'] == index,
-                    onChanged: state['radio_button_disabled']
+                    checked: radioButtonSelected == index,
+                    onChanged: radioButtonDisabled
                         ? null
                         : (v) {
                             if (v) {
                               setState(() {
-                                state['radio_button_selected'] = index;
+                                radioButtonSelected = index;
                               });
                             }
                           },
@@ -271,10 +269,10 @@ ToggleButton(
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['radio_button_disabled'],
+            checked: radioButtonDisabled,
             onChanged: (v) {
               setState(() {
-                state['radio_button_disabled'] = v;
+                radioButtonDisabled = v;
               });
             },
             content: const Text('Disabled'),

diff --git a/example/lib/screens/inputs/checkbox.dart b/example/lib/screens/inputs/checkbox.dart
@@ -3,13 +3,11 @@ import 'package:example/widgets/page.dart';
 import 'package:fluent_ui/fluent_ui.dart';
 
 class CheckboxPage extends ScrollablePage {
-  PageState state = <String, dynamic>{
-    'first_checked': false,
-    'first_disabled': false,
-    'second_state': false,
-    'second_disabled': false,
-    'icon_disabled': false,
-  };
+  bool firstChecked = false;
+  bool firstDisabled = false;
+  bool? secondChecked = false;
+  bool secondDisabled = false;
+  bool iconDisabled = false;
 
   @override
   Widget buildHeader(BuildContext context) {
@@ -26,22 +24,22 @@ class CheckboxPage extends ScrollablePage {
       CardHighlight(
         child: Row(children: [
           Checkbox(
-            checked: state['first_checked'],
-            onChanged: state['first_disabled']
+            checked: firstChecked,
+            onChanged: firstDisabled
                 ? null
                 : (v) {
                     setState(() {
-                      state['first_checked'] = v;
+                      firstChecked = v!;
                     });
                   },
             content: const Text('Two-state Checkbox'),
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['first_disabled'],
+            checked: firstDisabled,
             onChanged: (v) {
               setState(() {
-                state['first_disabled'] = v;
+                firstDisabled = v;
               });
             },
             content: const Text('Disabled'),
@@ -58,13 +56,13 @@ Checkbox(
       CardHighlight(
         child: Row(children: [
           Checkbox(
-            checked: state['second_state'],
+            checked: secondChecked,
             // checked: null,
-            onChanged: state['second_disabled']
+            onChanged: secondDisabled
                 ? null
                 : (v) {
                     setState(() {
-                      state['second_state'] = v == true
+                      secondChecked = v == true
                           ? true
                           : v == false
                               ? null
@@ -77,10 +75,10 @@ Checkbox(
           ),
           const Spacer(),
           ToggleSwitch(
-            checked: state['second_disabled'],
+            checked: secondDisabled,
             onChanged: (v) {
               setState(() {
-                state['second_disabled'] = v;
+                secondDisabled = v;
               });
             },
             content: const Text('Disabled'),

diff --git a/example/lib/screens/inputs/slider.dart b/example/lib/screens/inputs/slider.dart
@@ -3,26 +3,22 @@ import 'package:example/widgets/page.dart';
 import 'package:fluent_ui/fluent_ui.dart';
 
 class SliderPage extends ScrollablePage {
-  PageState state = <String, dynamic>{
-    'disabled': false,
-    'first_value': 23.0,
-    'vertical_value': 50.0,
-  };
+  bool disabled = false;
+  double firstValue = 23.0;
+  double verticalValue = 50.0;
 
   @override
   Widget buildHeader(BuildContext context) {
     return PageHeader(
       title: const Text('Slider'),
       commandBar: ToggleSwitch(
-        checked: isDisabled,
-        onChanged: (v) => setState(() => state['disabled'] = v),
+        checked: disabled,
+        onChanged: (v) => setState(() => disabled = v),
         content: const Text('Disabled'),
       ),
     );
   }
 
-  bool get isDisabled => state['disabled'];
-
   @override
   List<Widget> buildScrollable(BuildContext context) {
     return [
@@ -32,16 +28,16 @@ class SliderPage extends ScrollablePage {
       CardHighlight(
         child: Row(children: [
           Slider(
-            label: '${state['first_value'].toInt()}',
-            value: state['first_value'],
-            onChanged: isDisabled
+            label: '${firstValue.toInt()}',
+            value: firstValue,
+            onChanged: disabled
                 ? null
                 : (v) {
-                    setState(() => state['first_value'] = v);
+                    setState(() => firstValue = v);
                   },
           ),
           const Spacer(),
-          Text('Output:\n${state['first_value'].toInt()}'),
+          Text('Output:\n${firstValue.toInt()}'),
         ]),
         codeSnippet: '''double value = 0;
 
@@ -57,16 +53,13 @@ Slider(
         child: Row(children: [
           Slider(
             vertical: true,
-            label: '${state['vertical_value'].toInt()}',
-            value: state['vertical_value'],
-            onChanged: isDisabled
-                ? null
-                : (v) {
-                    setState(() => state['vertical_value'] = v);
-                  },
+            label: '${verticalValue.toInt()}',
+            value: verticalValue,
+            onChanged:
+                disabled ? null : (v) => setState(() => verticalValue = v),
           ),
           const Spacer(),
-          Text('Output:\n${state['vertical_value'].toInt()}'),
+          Text('Output:\n${verticalValue.toInt()}'),
         ]),
         codeSnippet: '''double value = 0;