Merge pull request #39 from splashbyte/version0.8.0

version 0.8.0-beta.4

Author: maeddin

CHANGELOG.md

@@ -1,9 +1,15 @@
+## 0.8.0-beta.4 (2023-08-18)
+
+- BREAKING: removes `IconTheme` for controlling default size of `Icon`s
+- BREAKING: changes default background color from `ThemeData.scaffoldBackgroundColor` to `ThemeData.colorScheme.surface`
+- BREAKING: renames `dif` to `spacing` in all constructors
+
 ## 0.8.0-beta.3 (2023-08-11)
 
 - BREAKING: replaces `transitionType` with `indicatorTransition` in `AnimatedToggleSwitch.rolling()`,
   `AnimatedToggleSwitch.rollingByHeight()` and `AnimatedToggleSwitch.dual()`
-- BREAKING: replaces `iconSize` and `selectedIconSize`
-  - `rolling()`, `rollingByHeight()` and `dual()`: now uses IconTheme for controlling default size of Icons
+- BREAKING: replaces `iconSize` and `selectedIconSize` in `AnimatedToggleSwitch` constructors
+  - `rolling()`, `rollingByHeight()`, `dual()`: now uses IconTheme for controlling default size of `Icon`s
   - `size()`, `sizeByHeight()`: new parameter `selectedIconScale` controls scaling
 
 ## 0.8.0-beta.2 (2023-08-01)
@@ -22,11 +28,10 @@
 ## 0.8.0-beta.0 (2023-07-29)
 
 - adds tests for all `AnimatedToggleSwitch` constructors
-- adds `separatorBuilder`, `customSeparatorBuilder`, `style` and `styleAnimationType`
-  to `AnimatedToggleSwitch`
+- adds `separatorBuilder`, `customSeparatorBuilder`, `style` and `styleAnimationType` to `AnimatedToggleSwitch`
 - adds `separatorBuilder` to `CustomAnimatedToggleSwitch`
 - fixes initial loading
-- BREAKING: moves many parameters to `style`:
+- BREAKING: moves many parameters in `AnimatedToggleSwitch` to `style`:
     - `innerColor` (renamed to `backgroundColor`)
     - `innerGradient` (renamed to `backgroundGradient`)
     - `borderColor`
@@ -38,15 +43,12 @@
     - `foregroundBoxShadow` (renamed to `indicatorBoxShadow`)
     - `boxShadow`
 - BREAKING: merges `borderColorBuilder` with `styleBuilder`
-- BREAKING: `indicatorAnimationType`
-  handles `ToggleStyle.indicatorColor`, `ToggleStyle.indicatorBorderRadius`, `ToggleStyle.indicatorBorder`
-  and `ToggleStyle.indicatorBoxShadow` now
+- BREAKING: `indicatorAnimationType` handles `ToggleStyle.indicatorColor`, `ToggleStyle.indicatorBorderRadius`, `ToggleStyle.indicatorBorder` and `ToggleStyle.indicatorBoxShadow` now
 
 ## 0.7.0 (2023-06-19)
 
 - adds possibility that no valid value is selected (by setting `allowUnlistedValues` to `true`)
-- adds new parameters to almost all
-  constructors: `allowUnlistedValues`, `indicatorAppearingBuilder`, `indicatorAppearingDuration`, `indicatorAppearingCurve`
+- adds new parameters to almost all constructors: `allowUnlistedValues`, `indicatorAppearingBuilder`, `indicatorAppearingDuration`, `indicatorAppearingCurve`
 
 ## 0.6.2 (2023-03-09)
 
@@ -61,13 +63,10 @@
 - fixes README
 - fixes #28
 - BREAKING: Increases minimum SDK to 2.17
-- BREAKING: Renames `value` to `current` and `previousValue` to `previous`
-  in `DetailedGlobalToggleProperties`
-- BREAKING Feature: Adds loading animation to all switches. You can disable it by setting `loading`
-  to false.
+- BREAKING: Renames `value` to `current` and `previousValue` to `previous` in `DetailedGlobalToggleProperties`
+- BREAKING Feature: Adds loading animation to all switches. You can disable it by setting `loading` to false.
 - Adds `innerGradient` to `AnimatedToggleSwitch`
-- Adds `transitionType` to `AnimatedToggleSwitch.rolling`, `AnimatedToggleSwitch.rollingByHeight`
-  and `AnimatedToggleSwitch.dual`
+- Adds `transitionType` to `AnimatedToggleSwitch.rolling`, `AnimatedToggleSwitch.rollingByHeight` and `AnimatedToggleSwitch.dual`
 
 ## 0.5.2 (2022-04-22)
 
@@ -85,16 +84,14 @@
 
 - Minor performance improvement
 - Fixes problems with tight constraints
-- BREAKING: Changes default values of `animationOffset` and `clipAnimation`
-  in `AnimatedToggleSwitch.dual`
+- BREAKING: Changes default values of `animationOffset` and `clipAnimation` in `AnimatedToggleSwitch.dual`
 
 ## 0.4.0 (2022-04-03)
 
 - Minor fixes and performance improvements
 - Adds `indicatorBorderRadius` to `AnimatedToggleSwitch`
 - Adds `animationOffset`, `clipAnimation` and `opacityAnimation` to `AnimatedToggleSwitch.dual`
-- BREAKING: Sets default values of `animationOffset`, `clipAnimation` and `opacityAnimation`
-  in `AnimatedToggleSwitch.dual`
+- BREAKING: Sets default values of `animationOffset`, `clipAnimation` and `opacityAnimation` in `AnimatedToggleSwitch.dual`
 - BREAKING: Renames `foregroundBorder` to `indicatorBorder`
 
 ## 0.3.1 (2022-03-23)
@@ -104,12 +101,10 @@
 ## 0.3.0 (2022-03-21)
 
 - Introduces `CustomAnimatedToggleSwitch` for maximum customizability
-- Most constructors of `AnimatedToggleSwitch` have a standard and a more customizable parameter for
-  their builders now
+- Most constructors of `AnimatedToggleSwitch` have a standard and a more customizable parameter for their builders now
 - Full support of `TextDirection.rtl`
 - Adds animation when dragging the switch
-- Adds `minTouchTargetSize`, `dragStartDuration`, `dragStartCurve` and `textDirection`
-  to `AnimatedToggleSwitch`
+- Adds `minTouchTargetSize`, `dragStartDuration`, `dragStartCurve` and `textDirection` to `AnimatedToggleSwitch`
 - BREAKING: `TextDirection` is taken from `BuildContext` by default now!!!
 - BREAKING: Changes parameters and names of some builders
 - BREAKING: Renames `AnimatedToggleSwitch.byHeight` to `AnimatedToggleSwitch.customByHeight`

README.md

@@ -12,9 +12,9 @@
 
 ### If you like this package, please leave a like there on [pub.dev](https://pub.dev/packages/animated_toggle_switch) and star on [GitHub](https://github.com/SplashByte/animated_toggle_switch).
 
-Fully customizable, draggable and animated switch with multiple choices and [smooth loading animation](#simple-rolling-animation-with-loading). It has prebuilt constructors for rolling and size animations, but it also allows you to create your own switches with `CustomAnimatedToggleSwitch`.  
+Fully customizable, draggable and animated switch with multiple choices and [smooth loading animation](#loading-animation). It has prebuilt constructors for rolling and size animations, but it also allows you to create your own switches with `CustomAnimatedToggleSwitch`.  
 `LTR` and `RTL` are both supported.  
-[Switches without an (initial) selection](#simple-rolling-animation-with-nullable-selection) are also possible.  
+[Switches without an (initial) selection](#nullable-selection) are also possible.  
 Most builder arguments of `AnimatedToggleSwitch` have a standard and a custom version. This ensures that you can get started easily and still customize a lot if necessary.
 
 For a slider with a similar look you can check out [action_slider](https://pub.dev/packages/action_slider).
@@ -91,7 +91,7 @@ AnimatedToggleSwitch<int>.rolling(
 )
 ```
 
-### Simple rolling animation with loading
+### Loading animation
 ![animated_toggle_switch_example_rolling_loading](https://user-images.githubusercontent.com/43761463/209121057-2ff2bfc3-063e-4704-a981-f5cc5f54720a.gif)  
 To use the loading animation, you simply have to return a `Future` in `onChanged` or `onTap`.
 You can alternatively control the loading manually with the `loading` parameter.  
@@ -111,7 +111,7 @@ AnimatedToggleSwitch<int>.rolling(
 )
 ```
 
-### Simple rolling animation with nullable selection
+### Nullable selection
 ![animated_toggle_switch_example_unlisted_value](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/570f39e8-bc5c-4a19-a91a-d186d4bbd8fe)  
 To use this feature, you simply have to set `allowUnlistedValues` to `true`.
 

analysis_options.yaml

@@ -7,4 +7,5 @@ analyzer:
 
 linter:
   rules:
-    prefer_single_quotes: true
+    prefer_single_quotes: true
+    parameter_assignments: true

example/lib/crazy_switch.dart

@@ -23,7 +23,7 @@ class _CrazySwitchState extends State<CrazySwitch> {
 
     return CustomAnimatedToggleSwitch(
       current: current,
-      dif: 36.0,
+      spacing: 36.0,
       values: [false, true],
       animationDuration: const Duration(milliseconds: 350),
       animationCurve: Curves.bounceOut,

example/lib/main.dart

@@ -14,7 +14,7 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'AnimatedToggleSwitch Demo',
-      theme: ThemeData(),
+      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
       home: MyHomePage(title: 'Example'),
     );
   }
@@ -61,7 +61,7 @@ class _MyHomePageState extends State<MyHomePage> {
                 current: positive,
                 first: false,
                 second: true,
-                dif: 50.0,
+                spacing: 50.0,
                 style: const ToggleStyle(
                   borderColor: Colors.transparent,
                   boxShadow: const [
@@ -90,7 +90,7 @@ class _MyHomePageState extends State<MyHomePage> {
                 current: positive,
                 first: false,
                 second: true,
-                dif: 50.0,
+                spacing: 50.0,
                 style: const ToggleStyle(
                   borderColor: Colors.transparent,
                   boxShadow: const [
@@ -139,7 +139,7 @@ class _MyHomePageState extends State<MyHomePage> {
                     current: positive,
                     first: false,
                     second: true,
-                    dif: 45.0,
+                    spacing: 45.0,
                     animationDuration: const Duration(milliseconds: 600),
                     style: ToggleStyle(
                       borderColor: Colors.transparent,
@@ -192,7 +192,7 @@ class _MyHomePageState extends State<MyHomePage> {
                     current: positive,
                     first: false,
                     second: true,
-                    dif: 45.0,
+                    spacing: 45.0,
                     style: const ToggleStyle(
                       borderColor: Colors.transparent,
                       backgroundColor: Colors.black,
@@ -227,6 +227,45 @@ class _MyHomePageState extends State<MyHomePage> {
                   ),
                 ),
               ),
+              SizedBox(height: 16.0),
+              AnimatedToggleSwitch<bool>.dual(
+                current: positive,
+                first: false,
+                second: true,
+                spacing: 45.0,
+                animationCurve: Curves.easeInOut,
+                animationDuration: const Duration(milliseconds: 600),
+                style: ToggleStyle(
+                  borderColor: Colors.transparent,
+                  indicatorColor: Colors.white,
+                  backgroundColor: Colors.amber,
+                ),
+                styleBuilder: (value) => ToggleStyle(
+                    backgroundColor: value ? Colors.orange : Colors.red[800]),
+                borderWidth: 6.0,
+                height: 60.0,
+                loadingIconBuilder: (context, global) =>
+                    CupertinoActivityIndicator(
+                        color: Color.lerp(
+                            Colors.red[800], Colors.orange, global.position)),
+                onChanged: (b) {
+                  setState(() => positive = b);
+                  return Future<dynamic>.delayed(Duration(seconds: 2));
+                },
+                iconBuilder: (value) => value
+                    ? Icon(Icons.power_outlined,
+                        color: Colors.orange, size: 32.0)
+                    : Icon(Icons.power_settings_new_rounded,
+                        color: Colors.red[800], size: 32.0),
+                textBuilder: (value) => Center(
+                    child: Text(
+                  value ? 'Active' : 'Inactive',
+                  style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 20.0,
+                      fontWeight: FontWeight.w600),
+                )),
+              ),
               Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text(
@@ -245,7 +284,7 @@ class _MyHomePageState extends State<MyHomePage> {
                     current: positive,
                     first: false,
                     second: true,
-                    dif: 45.0,
+                    spacing: 45.0,
                     animationCurve: Curves.easeInOut,
                     animationDuration: const Duration(milliseconds: 600),
                     style: ToggleStyle(
@@ -402,7 +441,7 @@ class _MyHomePageState extends State<MyHomePage> {
                   borderRadius: BorderRadius.circular(10.0),
                 ),
                 height: 55,
-                dif: 20.0,
+                spacing: 20.0,
                 loading: loading,
               ),
               SizedBox(height: 16.0),
@@ -421,7 +460,7 @@ class _MyHomePageState extends State<MyHomePage> {
                   borderColor: Colors.transparent,
                 ),
                 height: 55,
-                dif: 20.0,
+                spacing: 20.0,
                 loading: loading,
               ),
               Padding(
@@ -434,7 +473,7 @@ class _MyHomePageState extends State<MyHomePage> {
               CustomAnimatedToggleSwitch<bool>(
                 current: positive,
                 values: [false, true],
-                dif: 0.0,
+                spacing: 0.0,
                 indicatorSize: Size.square(30.0),
                 animationDuration: const Duration(milliseconds: 200),
                 animationCurve: Curves.linear,
@@ -545,6 +584,35 @@ class _MyHomePageState extends State<MyHomePage> {
                     ToggleStyle(indicatorColor: colorBuilder(i)),
                 onChanged: (i) => setState(() => value = i),
               ),
+              const SizedBox(height: 16.0),
+              AnimatedToggleSwitch<bool>.size(
+                current: positive,
+                values: const [false, true],
+                iconOpacity: 0.2,
+                indicatorSize: const Size.fromWidth(100),
+                customIconBuilder: (context, local, global) => Text(
+                    local.value ? 'RAM' : 'CPU',
+                    style: TextStyle(
+                        color: Color.lerp(
+                            Colors.black, Colors.white, local.animationValue))),
+                borderWidth: 4.0,
+                iconAnimationType: AnimationType.onHover,
+                style: ToggleStyle(
+                  indicatorColor: Colors.teal,
+                  borderColor: Colors.transparent,
+                  borderRadius: BorderRadius.circular(10.0),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black26,
+                      spreadRadius: 1,
+                      blurRadius: 2,
+                      offset: Offset(0, 1.5),
+                    ),
+                  ],
+                ),
+                selectedIconScale: 1.0,
+                onChanged: (b) => setState(() => positive = b),
+              ),
               Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text(
@@ -567,7 +635,7 @@ class _MyHomePageState extends State<MyHomePage> {
                 indicatorSize: const Size.fromWidth(100),
                 iconAnimationType: AnimationType.onHover,
                 styleAnimationType: AnimationType.onHover,
-                dif: 2.0,
+                spacing: 2.0,
                 customSeparatorBuilder: (context, local, global) {
                   final opacity =
                       ((global.position - local.position).abs() - 0.5)
@@ -642,7 +710,6 @@ class _MyHomePageState extends State<MyHomePage> {
                             child: iconBuilder(pos.ceil()))
                       ]));
                 },
-                selectedIconScale: 1.0,
                 iconBuilder: iconBuilder,
                 style: const ToggleStyle(
                   borderColor: Colors.red,

lib/src/foreground_indicator_transition.dart

@@ -25,7 +25,7 @@ class _RollingForegroundIndicatorTransition
     extends ForegroundIndicatorTransition {
   /// The radius which will be used for calculating the rotation.
   ///
-  /// If set to [null], a reasonable value is calculated from [indicatorSize] and [height].
+  /// If set to [null], a reasonable value is calculated from [indicatorSize], [borderWidth] and [height].
   final double? rollingRadius;
 
   const _RollingForegroundIndicatorTransition({this.rollingRadius}) : super._();

lib/src/properties.dart

@@ -12,6 +12,8 @@ class GlobalToggleProperties<T> {
   final T current;
 
   /// The index of [current] in [values].
+  ///
+  /// If [values] does not contain [current], this value is set to [-1].
   final int currentIndex;
 
   /// The previous value of the switch.
@@ -57,7 +59,7 @@ class DetailedGlobalToggleProperties<T> extends GlobalToggleProperties<T> {
   /// The final width of the space between the icons.
   ///
   /// May differ from the value passed to the switch.
-  final double dif;
+  final double spacing;
 
   /// The final size of the indicator.
   ///
@@ -67,10 +69,10 @@ class DetailedGlobalToggleProperties<T> extends GlobalToggleProperties<T> {
   /// The size of the switch exclusive the outer wrapper
   final Size switchSize;
 
-  Size get difSize => Size(dif, switchSize.height);
+  Size get spacingSize => Size(spacing, switchSize.height);
 
   const DetailedGlobalToggleProperties({
-    required this.dif,
+    required this.spacing,
     required this.indicatorSize,
     required this.switchSize,
     required super.position,
@@ -91,6 +93,8 @@ class LocalToggleProperties<T> {
   final T value;
 
   /// The index of [value].
+  ///
+  /// This value is [-1] if [values] does not contain [value].
   final int index;
 
   const LocalToggleProperties({