diff --git a/CHANGELOG.md b/CHANGELOG.md index f220dea..daaed1b 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index 4d22c72..f91b50f 100644 --- a/README.md +++ b/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: diff --git a/example/lib/main.dart b/example/lib/main.dart index c9ad19e..0d42873 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -28,6 +28,8 @@ class _MyHomePageState extends State { bool status5 = false; bool status6 = false; bool status7 = false; + bool status8 = false; + bool status9 = false; bool isSwitchOn = false; Color _textColor = Colors.black; @@ -297,6 +299,76 @@ class _MyHomePageState extends State { ), ], ), + SizedBox(height: 20.0), + Text("Image as toggle icon"), + SizedBox(height: 10.0), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + 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"), + ), + ], + ), + SizedBox(height: 10.0), + Text("Rounded Rectangle Switch"), + SizedBox(height: 10.0), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + FlutterSwitch( + toggleRatio: 1.5, + height: 40, + width: 100, + toggleSize: 40, + value: status9, + onToggle: (val) { + setState(() { + status9 = val; + }); + }, + ), + Container( + alignment: Alignment.centerRight, + child: Text( + "Value: $status9", + ), + ), + ], + ), + SizedBox(height: 20.0), ], ), ), diff --git a/example/pubspec.lock b/example/pubspec.lock index f95ff06..30eb4a3 100644 --- a/example/pubspec.lock +++ b/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 diff --git a/lib/flutter_switch.dart b/lib/flutter_switch.dart index 44e87ca..dc3fb75 100644 --- a/lib/flutter_switch.dart +++ b/lib/flutter_switch.dart @@ -43,6 +43,7 @@ class FlutterSwitch extends StatefulWidget { this.inactiveIcon, this.duration = const Duration(milliseconds: 200), this.disabled = false, + this.toggleRatio = 1, }) : assert( (switchBorder == null || activeSwitchBorder == null) && (switchBorder == null || inactiveSwitchBorder == null), @@ -230,14 +231,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 /// @@ -249,6 +252,13 @@ class FlutterSwitch extends StatefulWidget { /// Defaults to the value of false. final bool disabled; + /// The toggle will be a rounded rectangle when the value is not 1. + /// + /// Width = Size * toggleRatio, Height = Size. + /// + /// Defaults to the value of 1. + final double toggleRatio; + @override _FlutterSwitchState createState() => _FlutterSwitchState(); } @@ -375,31 +385,40 @@ class _FlutterSwitchState extends State child: Align( alignment: _toggleAnimation.value, child: Container( - width: widget.toggleSize, + width: widget.toggleSize * widget.toggleRatio, height: widget.toggleSize, + padding: EdgeInsets.all(4.0), decoration: BoxDecoration( - shape: BoxShape.circle, + shape: widget.toggleRatio == 1 + ? BoxShape.circle + : BoxShape.rectangle, color: _toggleColor, + borderRadius: widget.toggleRatio == 1 + ? null + : BorderRadius.circular(widget.borderRadius), 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, + ), ), - ), - ], + ], + ), ), ), ), @@ -417,6 +436,7 @@ class _FlutterSwitchState extends State FontWeight get _activeTextFontWeight => widget.activeTextFontWeight ?? FontWeight.w900; + FontWeight get _inactiveTextFontWeight => widget.inactiveTextFontWeight ?? FontWeight.w900; diff --git a/pubspec.lock b/pubspec.lock index 49a0ce6..36362e9 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -5,49 +5,49 @@ packages: dependency: transitive description: name: async - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "2.5.0" boolean_selector: dependency: transitive description: name: boolean_selector - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "2.1.0" characters: dependency: transitive description: name: characters - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.1.0" charcode: dependency: transitive description: name: charcode - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.2.0" clock: dependency: transitive description: name: clock - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.1.0" collection: dependency: transitive description: name: collection - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.15.0" fake_async: dependency: transitive description: name: fake_async - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.2.0" flutter: @@ -64,21 +64,21 @@ packages: dependency: transitive description: name: matcher - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "0.12.10" meta: dependency: transitive description: name: meta - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.3.0" path: dependency: transitive description: name: path - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.8.0" sky_engine: @@ -90,56 +90,56 @@ packages: dependency: transitive description: name: source_span - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted - version: "1.8.0" + version: "1.8.1" stack_trace: dependency: transitive description: name: stack_trace - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.10.0" stream_channel: dependency: transitive description: name: stream_channel - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "2.1.0" string_scanner: dependency: transitive description: name: string_scanner - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.1.0" term_glyph: dependency: transitive description: name: term_glyph - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.2.0" test_api: dependency: transitive description: name: test_api - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "0.2.19" typed_data: dependency: transitive description: name: typed_data - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "1.3.0" vector_math: dependency: transitive description: name: vector_math - url: "https://pub.dartlang.org" + url: "https://pub.flutter-io.cn" source: hosted version: "2.1.0" sdks: diff --git a/pubspec.yaml b/pubspec.yaml index 7234b0d..5080e03 100644 --- a/pubspec.yaml +++ b/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: