version 1.4.0

PramodJoshi · Jan 23, 2022 · a5817e4 · a5817e4
1 parent bef1f8b
commit a5817e4
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 98 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 1.4.0
+* Minor bug fix ([PR 44](https://github.com/PramodJoshi/toggle_switch/pull/44)).
+    - return null when active switch is de-activated by re-tapping
+* Added changes to fix radiusStyle bug when text direction is set to TextDirection.rtl
+    - parameter:
+        - textDirectionRTL (optional, type bool - default false)
+* Added custom widths support
+    - parameter:
+        - customWidths (optional, type List<double>)        
+
 ## 1.3.0
 * Added null support for initialLabelIndex ([PR 39](https://github.com/PramodJoshi/toggle_switch/pull/39/commits)).
 * Added double tap support to de-select/de-activate active switch ([PR 41](https://github.com/PramodJoshi/toggle_switch/pull/41)):

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ In the `pubspec.yaml` of your flutter project, add the following dependency:
 ```yaml
 dependencies:
   ...
-  toggle_switch: ^1.3.0
+  toggle_switch: ^1.4.0
 ```
 
 Import it:
@@ -58,11 +58,11 @@ ToggleSwitch(
 
 ![Basic toggle switch with custom height and font size](https://media.giphy.com/media/Jrf2KLuWJVaB4cIwlz/giphy.gif)
 
-### With text or icon
+### With text or icon and custom widths
 
 ```dart
 ToggleSwitch(
-  minWidth: 90.0,
+  customWidths: [90.0, 50.0],
   cornerRadius: 20.0,
   activeBgColors: [[Colors.cyan], [Colors.redAccent]],
   activeFgColor: Colors.white,
@@ -77,7 +77,7 @@ ToggleSwitch(
 ),
 ```
 
-![With text or icon](https://media.giphy.com/media/tD5PXdXS6O0Xgb1oMu/giphy.gif)
+![With text or icon and custom widths](https://media.giphy.com/media/gdPIxlxfLfrCX62GTa/giphy.gif)
 
 ### With icons, text and different active background colors
 
@@ -209,14 +209,15 @@ ToggleSwitch(
 
 ![With radius style](https://media.giphy.com/media/GIhOLGT1kOdz9wUQ4Y/giphy.gif)
 
-### With custom text styles
+### With custom text styles, null initial label, double tap to de-activate
 
 ```dart
 ToggleSwitch(
   minWidth: 90.0,
   cornerRadius: 20.0,
   inactiveFgColor: Colors.white,
-  initialLabelIndex: 1,
+  initialLabelIndex: null,
+  doubleTapDisable: true, // re-tap active widget to de-activate
   totalSwitches: 3,
   labels: ['Normal', 'Bold', 'Italic'],
   customTextStyles: [
@@ -236,48 +237,70 @@ ToggleSwitch(
 ),
 ```
 
-![With custom text styles](https://media.giphy.com/media/mpNWeNpynLMTbNlE23/giphy.gif)
+![With custom text styles, null initial label, double tap to de-activate](https://media.giphy.com/media/AtvWNvtzTlIHvuleur/giphy.gif)
 
 ### With custom icons
 
 ```dart
 ToggleSwitch(
-    minWidth: 90.0,
-    minHeight: 90.0,
-    cornerRadius: 20.0,
-    activeBgColors: [
-        [Color(0xfffdbb0a)],
-        [Colors.black54],
-        [Colors.white54]
-    ],
-    inactiveFgColor: Colors.white,
-    initialLabelIndex: 2,
-    totalSwitches: 3,
-    customIcons: [
-        Icon(
-            FontAwesomeIcons.ccVisa,
-            color: Color(0xff1a1f71),
-            size: 55.0,
-        ),
-        Icon(
-            FontAwesomeIcons.ccMastercard,
-            color: Color(0xffF79E1B),
-            size: 55.0,
-        ),
-        Icon(
-            FontAwesomeIcons.ccAmex,
-            color: Color(0xff27AEE3),
-            size: 55.0,
-        )
-    ],
-    onToggle: (index) {
-        print('switched to: $index');
-    },
+  minWidth: 90.0,
+  minHeight: 90.0,
+  cornerRadius: 20.0,
+  activeBgColors: [
+    [Color(0xfffdbb0a)],
+    [Colors.black54],
+    [Colors.white54]
+  ],
+  inactiveFgColor: Colors.white,
+  initialLabelIndex: 2,
+  totalSwitches: 3,
+  customIcons: [
+    Icon(
+      FontAwesomeIcons.ccVisa,
+      color: Color(0xff1a1f71),
+      size: 55.0,
+    ),
+    Icon(
+      FontAwesomeIcons.ccMastercard,
+      color: Color(0xffF79E1B),
+      size: 55.0,
+    ),
+    Icon(
+      FontAwesomeIcons.ccAmex,
+      color: Color(0xff27AEE3),
+      size: 55.0,
+    )
+  ],
+  onToggle: (index) {
+    print('switched to: $index');
+  },
 ),
 ```
 
 ![With custom icons](https://media.giphy.com/media/VZFytiPYc7CssuDzJS/giphy.gif)
 
+### TextDirection.rtl and corner radius
+
+```dart
+// When ToggleSwitch is used with Directionality widget and textDirection is set to TextDirection.rtl (right-to-left), 
+// switches are displayed right to left along with their respective index values. In this case, corner radius of switches aren't set correctly. 
+// To fix this, please use textDirectionRTL parameter and set it to true as shown in the example below. 
+Directionality(
+  textDirection: TextDirection.rtl,
+  child: ToggleSwitch(
+    initialLabelIndex: 0,
+    cornerRadius: 12.0,
+    textDirectionRTL: true,
+    activeFgColor: Colors.white,
+    totalSwitches: 2,
+    labels: ['left', 'right'],
+    onToggle: (index) {
+      print('switched to: $index');
+    },
+  ),
+),
+```
+
 ### setState() inside onToggle
 
 [Example code with explanation](https://github.com/PramodJoshi/toggle_switch/issues/11#issuecomment-679277018)

diff --git a/example/README.md b/example/README.md
@@ -9,7 +9,7 @@ In the `pubspec.yaml` of your flutter project, add the following dependency:
 ```yaml
 dependencies:
   ...
-  toggle_switch: ^1.3.0
+  toggle_switch: ^1.4.0
 ```
 
 Import it:
@@ -58,11 +58,11 @@ ToggleSwitch(
 
 ![Basic toggle switch with custom height and font size](https://media.giphy.com/media/Jrf2KLuWJVaB4cIwlz/giphy.gif)
 
-### With text or icon
+### With text or icon and custom widths
 
 ```dart
 ToggleSwitch(
-  minWidth: 90.0,
+  customWidths: [90.0, 50.0],
   cornerRadius: 20.0,
   activeBgColors: [[Colors.cyan], [Colors.redAccent]],
   activeFgColor: Colors.white,
@@ -77,7 +77,7 @@ ToggleSwitch(
 ),
 ```
 
-![With text or icon](https://media.giphy.com/media/tD5PXdXS6O0Xgb1oMu/giphy.gif)
+![With text or icon and custom widths](https://media.giphy.com/media/gdPIxlxfLfrCX62GTa/giphy.gif)
 
 ### With icons, text and different active background colors
 
@@ -209,14 +209,15 @@ ToggleSwitch(
 
 ![With radius style](https://media.giphy.com/media/GIhOLGT1kOdz9wUQ4Y/giphy.gif)
 
-### With custom text styles
+### With custom text styles, null initial label, double tap to de-activate
 
 ```dart
 ToggleSwitch(
   minWidth: 90.0,
   cornerRadius: 20.0,
   inactiveFgColor: Colors.white,
-  initialLabelIndex: 1,
+  initialLabelIndex: null,
+  doubleTapDisable: true, // re-tap active widget to de-activate
   totalSwitches: 3,
   labels: ['Normal', 'Bold', 'Italic'],
   customTextStyles: [
@@ -236,48 +237,70 @@ ToggleSwitch(
 ),
 ```
 
-![With custom text styles](https://media.giphy.com/media/mpNWeNpynLMTbNlE23/giphy.gif)
+![With custom text styles, null initial label, double tap to de-activate](https://media.giphy.com/media/AtvWNvtzTlIHvuleur/giphy.gif)
 
 ### With custom icons
 
 ```dart
 ToggleSwitch(
-    minWidth: 90.0,
-    minHeight: 90.0,
-    cornerRadius: 20.0,
-    activeBgColors: [
-        [Color(0xfffdbb0a)],
-        [Colors.black54],
-        [Colors.white54]
-    ],
-    inactiveFgColor: Colors.white,
-    initialLabelIndex: 2,
-    totalSwitches: 3,
-    customIcons: [
-        Icon(
-            FontAwesomeIcons.ccVisa,
-            color: Color(0xff1a1f71),
-            size: 55.0,
-        ),
-        Icon(
-            FontAwesomeIcons.ccMastercard,
-            color: Color(0xffF79E1B),
-            size: 55.0,
-        ),
-        Icon(
-            FontAwesomeIcons.ccAmex,
-            color: Color(0xff27AEE3),
-            size: 55.0,
-        )
-    ],
-    onToggle: (index) {
-        print('switched to: $index');
-    },
+  minWidth: 90.0,
+  minHeight: 90.0,
+  cornerRadius: 20.0,
+  activeBgColors: [
+    [Color(0xfffdbb0a)],
+    [Colors.black54],
+    [Colors.white54]
+  ],
+  inactiveFgColor: Colors.white,
+  initialLabelIndex: 2,
+  totalSwitches: 3,
+  customIcons: [
+    Icon(
+      FontAwesomeIcons.ccVisa,
+      color: Color(0xff1a1f71),
+      size: 55.0,
+    ),
+    Icon(
+      FontAwesomeIcons.ccMastercard,
+      color: Color(0xffF79E1B),
+      size: 55.0,
+    ),
+    Icon(
+      FontAwesomeIcons.ccAmex,
+      color: Color(0xff27AEE3),
+      size: 55.0,
+    )
+  ],
+  onToggle: (index) {
+    print('switched to: $index');
+  },
 ),
 ```
 
 ![With custom icons](https://media.giphy.com/media/VZFytiPYc7CssuDzJS/giphy.gif)
 
+### TextDirection.rtl and corner radius
+
+```dart
+// When ToggleSwitch is used with Directionality widget and textDirection is set to TextDirection.rtl (right-to-left), 
+// switches are displayed right to left along with their respective index values. In this case, corner radius of switches aren't set correctly. 
+// To fix this, please use textDirectionRTL parameter and set it to true as shown in the example below. 
+Directionality(
+  textDirection: TextDirection.rtl,
+  child: ToggleSwitch(
+    initialLabelIndex: 0,
+    cornerRadius: 12.0,
+    textDirectionRTL: true,
+    activeFgColor: Colors.white,
+    totalSwitches: 2,
+    labels: ['left', 'right'],
+    onToggle: (index) {
+      print('switched to: $index');
+    },
+  ),
+),
+```
+
 ### setState() inside onToggle
 
 [Example code with explanation](https://github.com/PramodJoshi/toggle_switch/issues/11#issuecomment-679277018)

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -26,7 +26,6 @@ class MyApp extends StatelessWidget {
                   ),
                   ToggleSwitch(
                     initialLabelIndex: 0,
-                    doubleTapDisable: true,
                     totalSwitches: 3,
                     labels: ['America', 'Canada', 'Mexico'],
                     onToggle: (index) {
@@ -58,12 +57,12 @@ class MyApp extends StatelessWidget {
                   Padding(
                     padding: const EdgeInsets.all(20.0),
                     child: Text(
-                      'With text or icon:',
+                      'With text or icon and custom widths:',
                       style: TextStyle(fontWeight: FontWeight.bold),
                     ),
                   ),
                   ToggleSwitch(
-                    minWidth: 90.0,
+                    customWidths: [90.0, 50.0],
                     cornerRadius: 20.0,
                     activeBgColors: [
                       [Colors.cyan],
@@ -114,9 +113,8 @@ class MyApp extends StatelessWidget {
                   ToggleSwitch(
                     minWidth: 90.0,
                     minHeight: 70.0,
-                    initialLabelIndex: null,
+                    initialLabelIndex: 2,
                     cornerRadius: 20.0,
-                    doubleTapDisable: true,
                     activeFgColor: Colors.white,
                     inactiveBgColor: Colors.grey,
                     inactiveFgColor: Colors.white,
@@ -245,15 +243,17 @@ class MyApp extends StatelessWidget {
                   Padding(
                     padding: const EdgeInsets.all(20.0),
                     child: Text(
-                      'With custom text styles:',
+                      'With custom text styles, null initial label, double tap to de-activate:',
                       style: TextStyle(fontWeight: FontWeight.bold),
                     ),
                   ),
                   ToggleSwitch(
                     minWidth: 90.0,
                     cornerRadius: 20.0,
                     inactiveFgColor: Colors.white,
-                    initialLabelIndex: 1,
+                    initialLabelIndex: null,
+                    doubleTapDisable:
+                        true, // re-tap active widget to de-activate
                     totalSwitches: 3,
                     labels: ['Normal', 'Bold', 'Italic'],
                     customTextStyles: [

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -148,7 +148,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.3.0"
+    version: "1.4.0"
   typed_data:
     dependency: transitive
     description: