Merge version 0.8.0-beta.0

splashbyte · Jul 29, 2023 · 84f04d4 · 84f04d4
2 parents 3b30bb4 + daae90f
commit 84f04d4
Show file tree

Hide file tree

Showing 25 changed files with 2,052 additions and 374 deletions.
diff --git a/.github/workflows/flutter.yml b/.github/workflows/flutter.yml
@@ -0,0 +1,29 @@
+name: Flutter Analyze & Test
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: subosito/flutter-action@v2
+
+      - name: Install dependencies
+        run: flutter pub get
+
+      - name: Verify formatting
+        run: dart format --output=none --set-exit-if-changed .
+
+      - name: Analyze project source
+        run: flutter analyze
+
+      - name: Run tests
+        run: flutter test --coverage
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,22 @@
+## 0.8.0-beta.0
+- adds tests for all `AnimatedToggleSwitch` constructors
+- adds `separatorBuilder`, `customSeparatorBuilder`, `style` and `styleAnimationType` to `AnimatedToggleSwitch`
+- adds `separatorBuilder` to `CustomAnimatedToggleSwitch`
+- fixes initial loading
+- BREAKING: moves many parameters to `style`:
+  - `innerColor` (renamed to `backgroundColor`)
+  - `innerGradient` (renamed to `backgroundGradient`)
+  - `borderColor`
+  - `indicatorColor`
+  - `borderRadius`
+  - `indicatorBorderColor`
+  - `indicatorBorder`
+  - `indicatorBorder`
+  - `foregroundBoxShadow` (renamed to `indicatorBoxShadow`)
+  - `boxShadow`
+- BREAKING: merges `borderColorBuilder` with `styleBuilder`
+- 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`)

diff --git a/README.md b/README.md
@@ -6,56 +6,58 @@
 [![popularity](https://img.shields.io/pub/popularity/animated_toggle_switch)](https://pub.dev/packages/animated_toggle_switch/score)
 [![pub points](https://img.shields.io/pub/points/animated_toggle_switch)](https://pub.dev/packages/animated_toggle_switch/score)
 [![license](https://img.shields.io/github/license/SplashByte/animated_toggle_switch.svg)](https://github.com/SplashByte/animated_toggle_switch/blob/main/LICENSE)
+[![codecov](https://codecov.io/gh/splashbyte/animated_toggle_switch/branch/main/graph/badge.svg?token=NY1D6W88H2)](https://codecov.io/gh/splashbyte/animated_toggle_switch)
 
-[![buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/splashbyte)
+[![buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20pizza&emoji=🍕&slug=splashbyte&button_colour=FF8838&font_colour=ffffff&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff')](https://www.buymeacoffee.com/splashbyte)
 
 ### 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).
 
-Simple and animated switch with multiple choices and smooth loading animation. It's an easy way if you don't want to use something like a `DropDownMenuButton`.  
+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`.  
 `LTR` and `RTL` are both supported.  
 [Switches without an (initial) selection](#simple-rolling-animation-with-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).
+For a slider with a similar look you can check out [action_slider](https://pub.dev/packages/action_slider).
 
-### Example Usage
+## Example Usage
 ![usage](https://user-images.githubusercontent.com/43761463/114942384-c1200d00-9e44-11eb-9904-3cb1d7296da4.gif)
 
-### Examples
+## Examples
 `AnimatedToggleSwitch.dual()`  
-![animated_toggle_switch_example_dual](https://user-images.githubusercontent.com/43761463/161432631-e6dd3d16-7b64-410b-a9fa-c956d3442598.gif)  
-`AnimatedToggleSwitch.dual()` with loading animation  
-![animated_toggle_switch_example_dual_loading](https://user-images.githubusercontent.com/43761463/209120973-1d4d4fdc-3274-4747-9f6e-9523a75830e7.gif)  
+![animated_toggle_switch_example_dual](https://user-images.githubusercontent.com/43761463/161432631-e6dd3d16-7b64-410b-a9fa-c956d3442598.gif)
+![animated_toggle_switch_example_borderradius_builder](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/985492df-82a4-4225-a0ad-500970ad692d)
+![animated_toggle_switch_example_lite_rolling_gradient](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/6cd5d2d3-b4bd-4020-8568-354c71221e40)
+
+Switch inspired by [lite_rolling_switch](https://pub.dev/packages/lite_rolling_switch) (made with `AnimatedToggleSwitch.dual()`)  
+![animated_toggle_switch_example_lite_rolling](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/f1bec7cd-4885-4e8d-ac13-176d6b46245a)
+
+
+Switch inspired by [toggle_switch](https://pub.dev/packages/toggle_switch) (made with `AnimatedToggleSwitch.size()`)  
+![animated_toggle_switch_example_toggle_switch](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/4812efdc-fe9a-4c34-808a-0983de65d2a4)
+
+
 
 `AnimatedToggleSwitch.rolling()`  
-![animated_toggle_switch_example_1](https://user-images.githubusercontent.com/43761463/161432579-9fe81c57-6463-45c3-a48f-75db666a3a22.gif)   
-`AnimatedToggleSwitch.rolling()` with no initial selection   
-![animated_toggle_switch_example_unlisted_value](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/570f39e8-bc5c-4a19-a91a-d186d4bbd8fe)  
-`AnimatedToggleSwitch.rolling()` with loading animation  
-![animated_toggle_switch_example_rolling_loading](https://user-images.githubusercontent.com/43761463/209121057-2ff2bfc3-063e-4704-a981-f5cc5f54720a.gif)  
+![animated_toggle_switch_example_1](https://user-images.githubusercontent.com/43761463/161432579-9fe81c57-6463-45c3-a48f-75db666a3a22.gif)
+![animated_toggle_switch_example_2](https://user-images.githubusercontent.com/43761463/161432589-d76f61f6-cb97-42e2-b1fd-8c5203a965fa.gif)
+![animated_toggle_switch_example_gradient](https://user-images.githubusercontent.com/43761463/209117203-90a41ddc-db1c-41be-8375-5304317d1352.gif)
+![animated_toggle_switch_example_borderradius_builder_2](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/e9a6328e-fc6a-4080-9868-1f0eaf60f6db)
+![animated_toggle_switch_example_rolling_separator](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/562fa54d-6a03-4099-a61b-0bc386d22adb)
 
-Modified `AnimatedToggleSwitch.rolling()`  
-![animated_toggle_switch_example_2](https://user-images.githubusercontent.com/43761463/161432589-d76f61f6-cb97-42e2-b1fd-8c5203a965fa.gif)  
-![animated_toggle_switch_example_3](https://user-images.githubusercontent.com/43761463/161432610-e8e4014a-34f1-4cbc-876b-2ab6ef856484.gif)  
-![animated_toggle_switch_example_gradient](https://user-images.githubusercontent.com/43761463/209117203-90a41ddc-db1c-41be-8375-5304317d1352.gif)  
 
 You can build any other switch with `CustomAnimatedToggleSwitch()`  
 ![animated_toggle_switch_example_custom_1](https://user-images.githubusercontent.com/43761463/161433015-c3ec634a-38da-463d-a06e-4ae0b29f77ed.gif)  
 
 `AnimatedToggleSwitch.size()`  
-![animated_toggle_switch_example_4](https://user-images.githubusercontent.com/43761463/161432714-435d8369-7e54-432a-8b9b-6b55a0764f4a.gif)  
-`AnimatedToggleSwitch.size()` with loading animation  
-![animated_toggle_switch_example_size_loading](https://user-images.githubusercontent.com/43761463/209121115-ed0f634b-0ec4-46b5-b030-21dbdde8cf07.gif)  
-
-Modified `AnimatedToggleSwitch.size()`  
-![animated_toggle_switch_example_5](https://user-images.githubusercontent.com/43761463/161432720-1d5fa49e-6d20-401a-9a90-a6df88873266.gif)  
+![animated_toggle_switch_example_4](https://user-images.githubusercontent.com/43761463/161432714-435d8369-7e54-432a-8b9b-6b55a0764f4a.gif)
+![animated_toggle_switch_example_size_loading](https://user-images.githubusercontent.com/43761463/209121115-ed0f634b-0ec4-46b5-b030-21dbdde8cf07.gif)
+![animated_toggle_switch_example_5](https://user-images.githubusercontent.com/43761463/161432720-1d5fa49e-6d20-401a-9a90-a6df88873266.gif) 
 
 `AnimatedToggleSwitch.size()` with custom rolling animation  
- ![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif)  
-  
+![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif) 
+
 `AnimatedToggleSwitch.rolling()` with custom `indicatorSize`, `borderRadius` and `indicatorBorderRadius`  
-![animated_toggle_switch_example_7](https://user-images.githubusercontent.com/43761463/161432823-6cf3c855-2a9a-4f4a-9e5c-2951c4166f49.gif)  
-![animated_toggle_switch_example_8](https://user-images.githubusercontent.com/43761463/161432826-4b0c3e57-eed7-4567-8e7e-31b8a2ba6bee.gif)  
+![animated_toggle_switch_example_7](https://user-images.githubusercontent.com/43761463/161432823-6cf3c855-2a9a-4f4a-9e5c-2951c4166f49.gif) ![animated_toggle_switch_example_8](https://user-images.githubusercontent.com/43761463/161432826-4b0c3e57-eed7-4567-8e7e-31b8a2ba6bee.gif)  
 
 ## Easy Usage
 
@@ -69,11 +71,27 @@ AnimatedToggleSwitch<int>.rolling(
   values: [0, 1, 2, 3],
   onChanged: (i) => setState(() => value = i),
   iconBuilder: iconBuilder,
+  style: ToggleStyle(...), // optional style settings
   ... // many more parameters available
 )
 ```
 
+### Styling
+`style`, `styleBuilder` and `customStyleBuilder` can be used to style the switch.  
+For the general look of the switch, you can use `style`.  
+For parameters that should change with the selection, you can use `styleBuilder`.  
+If you need additional parameters, you can use `customStyleBuilder`.  
+```dart
+AnimatedToggleSwitch<int>.rolling(
+  ...
+  style: ToggleStyle(backgroundColor: Colors.red), // backgroundColor is set independently of the current selection
+  styleBuilder: (value) => ToggleStyle(indicatorColor: value.isEven ? Colors.yellow : Colors.green)), // indicatorColor changes and animates its value with the selection
+  ...
+)
+```
+
 ### Simple rolling animation with loading
+![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.  
 Hence, to disable the loading animation, `loading: false` must be set.
@@ -93,6 +111,7 @@ AnimatedToggleSwitch<int>.rolling(
 ```
 
 ### Simple rolling animation with 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`.
 
 ```dart
@@ -121,32 +140,35 @@ CustomAnimatedToggleSwitch<int>(
 ```
 
 ### `AnimatedToggleSwitch.size` with some settings
-
+![animated_toggle_switch_example_4](https://user-images.githubusercontent.com/43761463/161432714-435d8369-7e54-432a-8b9b-6b55a0764f4a.gif) 
 ```dart
 AnimatedToggleSwitch<int>.size(
   current: value,
-  values: [0, 1, 2, 3],
+  values: const [0, 1, 2, 3],
   iconOpacity: 0.2,
-  indicatorSize: Size.fromWidth(100),
+  indicatorSize: const Size.fromWidth(100),
+  iconAnimationType: AnimationType.onHover,
+  colorAnimationType: AnimationType.onHover,
   iconBuilder: (value, size) {
     IconData data = Icons.access_time_rounded;
     if (value.isEven) data = Icons.cancel;
     return Icon(data, size: min(size.width, size.height));
   },
-  borderColor: value.isEven ? Colors.blue : Colors.red,
-  colorBuilder: (i) => i.isEven ? Colors.amber : Colors.red,
+  style: const ToggleStyle(borderColor: Colors.transparent),
+  borderWidth: 0.0,
+styleBuilder: (i) => ToggleStyle(indicatorColor: i.isEven == true ? Colors.amber : Colors.red),
   onChanged: (i) => setState(() => value = i),
 )
 ```
 
 ### Self-made rolling animation (with `foregroundIndicatorIconBuilder`)
-
+![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif) 
 ```dart
 AnimatedToggleSwitch<int>.size(
-  value: value,
-  values: [0, 1, 2, 3],
+  current: value,
+  values: const [0, 1, 2, 3],
   iconOpacity: 1.0,
-  indicatorSize: Size.fromWidth(25),
+  indicatorSize: const Size.fromWidth(25),
   foregroundIndicatorIconBuilder: (context, global) {
     double pos = global.position;
     double transitionValue = pos - pos.floorToDouble();
@@ -159,15 +181,17 @@ AnimatedToggleSwitch<int>.size(
         Opacity(
           opacity: transitionValue,
           child: iconBuilder(pos.ceil(), global.indicatorSize))
-      ]),
-    );
+        ]));
   },
-  selectedIconSize: Size.square(20),
-  iconSize: Size.square(20),
+  selectedIconSize: const Size.square(20),
+  iconSize: const Size.square(20),
   iconBuilder: iconBuilder,
-  colorBuilder: (i) => i.isEven ? Colors.green : Colors.tealAccent,
+  style: ToggleStyle(
+    borderColor: Colors.red,
+    borderRadius: BorderRadius.circular(8.0),
+    indicatorBorderRadius: BorderRadius.zero,
+  ),
+  styleBuilder: (i) => ToggleStyle(indicatorColor: i.isEven == true ? Colors.green : Colors.tealAccent),
   onChanged: (i) => setState(() => value = i),
-  borderRadius: BorderRadius.circular(8.0),
-  borderColor: Colors.red,
-),
+)
 ```