revised active and inactive icons

Author: nickr-dev

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [0.3.1] - April 12, 2021
+
+* Revised the activeIcon and inactiveIcon to accept other types of widget including Images, Icon and FontAwesome Icons.
+
 ## [0.3.0] - March 06, 2021
 
 * Migrated to null safety. Beware for possible breaking changes.

README.md

@@ -22,7 +22,7 @@ Add this to your package's `pubspec.yaml` file:
 
 ```yaml
 dependencies:
-  flutter_switch: ^0.3.0
+  flutter_switch: ^0.3.1
 ```
 
 You can install packages from the command line with Flutter:

example/lib/main.dart

@@ -28,6 +28,7 @@ class _MyHomePageState extends State<MyHomePage> {
   bool status5 = false;
   bool status6 = false;
   bool status7 = false;
+  bool status8 = false;
   bool isSwitchOn = false;
 
   Color _textColor = Colors.black;
@@ -297,6 +298,49 @@ class _MyHomePageState extends State<MyHomePage> {
                     ),
                   ],
                 ),
+                SizedBox(height: 20.0),
+                Text("Image as toggle icon"),
+                SizedBox(height: 10.0),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: <Widget>[
+                    FlutterSwitch(
+                      width: 100.0,
+                      height: 55.0,
+                      toggleSize: 45.0,
+                      value: status8,
+                      borderRadius: 30.0,
+                      padding: 2.0,
+                      activeToggleColor: Color(0xFF0082C8),
+                      inactiveToggleColor: Color(0xFF01579B),
+                      activeSwitchBorder: Border.all(
+                        color: Color(0xFF00D2B8),
+                        width: 6.0,
+                      ),
+                      inactiveSwitchBorder: Border.all(
+                        color: Color(0xFF29B6F6),
+                        width: 6.0,
+                      ),
+                      activeColor: Color(0xFF55DDCA),
+                      inactiveColor: Color(0xFF54C5F8),
+                      activeIcon: Image.network(
+                        "https://img2.pngio.com/functional-bits-in-flutter-flutter-community-medium-flutter-png-1000_1000.png",
+                      ),
+                      inactiveIcon: Image.network(
+                        "https://upload.wikimedia.org/wikipedia/commons/7/7e/Dart-logo.png",
+                      ),
+                      onToggle: (val) {
+                        setState(() {
+                          status8 = val;
+                        });
+                      },
+                    ),
+                    Container(
+                      alignment: Alignment.centerRight,
+                      child: Text("Value: $status8"),
+                    ),
+                  ],
+                ),
               ],
             ),
           ),

example/pubspec.lock

@@ -68,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.3.0"
+    version: "0.3.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter

lib/flutter_switch.dart

@@ -230,14 +230,16 @@ class FlutterSwitch extends StatefulWidget {
   final BoxBorder? inactiveToggleBorder;
 
   /// The icon inside the toggle when the given value is true.
+  /// activeIcon can be an Icon Widget, an Image or Fontawesome Icons.
   ///
   /// This property is optional.
-  final Icon? activeIcon;
+  final Widget? activeIcon;
 
   /// The icon inside the toggle when the given value is false.
+  /// inactiveIcon can be an Icon Widget, an Image or Fontawesome Icons.
   ///
   /// This property is optional.
-  final Icon? inactiveIcon;
+  final Widget? inactiveIcon;
 
   /// The duration in milliseconds to change the state of the switch
   ///
@@ -377,29 +379,33 @@ class _FlutterSwitchState extends State<FlutterSwitch>
                         child: Container(
                           width: widget.toggleSize,
                           height: widget.toggleSize,
+                          padding: EdgeInsets.all(4.0),
                           decoration: BoxDecoration(
                             shape: BoxShape.circle,
                             color: _toggleColor,
                             border: _toggleBorder,
                           ),
-                          child: Container(
-                            child: Stack(
-                              children: [
-                                Center(
-                                  child: AnimatedOpacity(
-                                    opacity: widget.value ? 1.0 : 0.0,
-                                    duration: widget.duration,
-                                    child: widget.activeIcon,
+                          child: FittedBox(
+                            fit: BoxFit.contain,
+                            child: Container(
+                              child: Stack(
+                                children: [
+                                  Center(
+                                    child: AnimatedOpacity(
+                                      opacity: widget.value ? 1.0 : 0.0,
+                                      duration: widget.duration,
+                                      child: widget.activeIcon,
+                                    ),
                                   ),
-                                ),
-                                Center(
-                                  child: AnimatedOpacity(
-                                    opacity: !widget.value ? 1.0 : 0.0,
-                                    duration: widget.duration,
-                                    child: widget.inactiveIcon,
+                                  Center(
+                                    child: AnimatedOpacity(
+                                      opacity: !widget.value ? 1.0 : 0.0,
+                                      duration: widget.duration,
+                                      child: widget.inactiveIcon,
+                                    ),
                                   ),
-                                ),
-                              ],
+                                ],
+                              ),
                             ),
                           ),
                         ),

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_switch
 description: A custom switch widget that can have a custom height and width, borders, border radius, colors, toggle size, custom text and icons inside the toggle.
-version: 0.3.0
+version: 0.3.1
 homepage: https://github.com/boringdeveloper/FlutterSwitch
 
 environment: