diff --git a/README.md b/README.md index f91b50f..17cb8b1 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![pub package](https://img.shields.io/pub/v/flutter_switch.svg)](https://pub.dev/packages/flutter_switch) [![pub points](https://badges.bar/flutter_switch/pub%20points)](https://pub.dev/packages/flutter_switch/score) [![popularity](https://badges.bar/flutter_switch/popularity)](https://pub.dev/packages/flutter_switch/score) [![likes](https://badges.bar/flutter_switch/likes)](https://pub.dev/packages/flutter_switch/score) -An easy to implement custom switch created for Flutter. Give it a custom height and width, border for the switch and toggle, border radius, colors, toggle size, a choice to display an 'On' and 'Off' text and able to add an icon inside the toggle. +An easy to implement custom switch created for Flutter. Give it a custom height and width, border for the switch and toggle, border radius, colors, toggle size, a choice to display an 'On' and 'Off' text and able to add an icon inside the toggle. You can also use your own custom widget to display instead of displaying an 'On' and 'Off' text. [![GitHub followers](https://img.shields.io/github/followers/boringdeveloper.svg?style=social&label=Follow)](https://github.com/boringdeveloper) @@ -22,7 +22,7 @@ Add this to your package's `pubspec.yaml` file: ```yaml dependencies: - flutter_switch: ^0.3.1 + flutter_switch: ^0.3.2 ``` You can install packages from the command line with Flutter: @@ -77,10 +77,10 @@ class _MyHomePageState extends State { ## Want to Contribute? -Contributions to this project is very much welcome. Let's work together to maintain and improve the project +Contributions to this project is very much welcome. Let's work together to maintain and improve this project. Simply Fork the repository, Commit and Push your changes and create a new Pull Request. -Don't forget to try out the example project under the ./example folder. +Don't forget to try out the example project under the [./example](https://github.com/boringdeveloper/FlutterSwitch/tree/master/example) folder. Also test your changes by running this command. ```bash diff --git a/lib/flutter_switch.dart b/lib/flutter_switch.dart index e30ca12..6cbbd2f 100644 --- a/lib/flutter_switch.dart +++ b/lib/flutter_switch.dart @@ -29,6 +29,8 @@ class FlutterSwitch extends StatefulWidget { this.borderRadius = 20.0, this.padding = 4.0, this.showOnOff = false, + this.activeTrackWidget, + this.inactiveTrackWidget, this.activeText, this.inactiveText, this.activeTextFontWeight, @@ -89,8 +91,23 @@ class FlutterSwitch extends StatefulWidget { /// Defaults to 'false' if no value was given. final bool showOnOff; + /// The custom widget to display on a tack when it is active. + /// This parameter is only necessary when [showOnOff] property is true. + /// + /// This property overrides the [activeText] property, so when this property + /// is used, the properties related to [activeText] are not usable + final Widget? activeTrackWidget; + + /// The custom widget to display on a tack when it is inactive. + /// This parameter is only necessary when [showOnOff] property is true. + /// + /// This property overrides the [inactiveText] property, so when this property + /// is used, the properties related to [inactiveText] are not usable + final Widget? inactiveTrackWidget; + /// The text to display when the switch is on. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary when [activeTrackWidget] property is used. /// /// Defaults to 'On' if no value was given. /// @@ -102,6 +119,7 @@ class FlutterSwitch extends StatefulWidget { /// The text to display when the switch is off. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary when [inactiveTrackWidget] property is used. /// /// Defaults to 'Off' if no value was given. /// @@ -123,24 +141,28 @@ class FlutterSwitch extends StatefulWidget { /// The color to use on the text value when the switch is on. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary when [activeTrackWidget] property is used. /// /// Defaults to [Colors.white70]. final Color activeTextColor; /// The color to use on the text value when the switch is off. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary when [inactiveTrackWidget] property is used. /// /// Defaults to [Colors.white70]. final Color inactiveTextColor; /// The font weight to use on the text value when the switch is on. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary when [activeTrackWidget] property is used. /// /// Defaults to [FontWeight.w900]. final FontWeight? activeTextFontWeight; /// The font weight to use on the text value when the switch is off. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary when [inactiveTrackWidget] property is used. /// /// Defaults to [FontWeight.w900]. final FontWeight? inactiveTextFontWeight; @@ -181,6 +203,8 @@ class FlutterSwitch extends StatefulWidget { /// The font size of the values of the switch. /// This parameter is only necessary when [showOnOff] property is true. + /// This parameter is not necessary for each when [activeTrackWidget] or + /// [inactiveTrackWidget] properties are used. /// /// Defaults to a size of 16.0. final double valueFontSize; @@ -359,7 +383,7 @@ class _FlutterSwitchState extends State width: _textSpace, padding: EdgeInsets.symmetric(horizontal: 4.0), alignment: Alignment.centerLeft, - child: _activeText, + child: _activeTrackItem, ), ), Align( @@ -371,7 +395,7 @@ class _FlutterSwitchState extends State width: _textSpace, padding: EdgeInsets.symmetric(horizontal: 4.0), alignment: Alignment.centerRight, - child: _inactiveText, + child: _inactiveTrackItem, ), ), ), @@ -429,32 +453,34 @@ class _FlutterSwitchState extends State FontWeight get _inactiveTextFontWeight => widget.inactiveTextFontWeight ?? FontWeight.w900; - Widget get _activeText { + Widget get _activeTrackItem { if (widget.showOnOff) { - return Text( - widget.activeText ?? "On", - style: TextStyle( - color: widget.activeTextColor, - fontWeight: _activeTextFontWeight, - fontSize: widget.valueFontSize, - ), - ); + return widget.activeTrackWidget ?? + Text( + widget.activeText ?? "On", + style: TextStyle( + color: widget.activeTextColor, + fontWeight: _activeTextFontWeight, + fontSize: widget.valueFontSize, + ), + ); } return Text(""); } - Widget get _inactiveText { + Widget get _inactiveTrackItem { if (widget.showOnOff) { - return Text( - widget.inactiveText ?? "Off", - style: TextStyle( - color: widget.inactiveTextColor, - fontWeight: _inactiveTextFontWeight, - fontSize: widget.valueFontSize, - ), - textAlign: TextAlign.right, - ); + return widget.inactiveTrackWidget ?? + Text( + widget.inactiveText ?? "Off", + style: TextStyle( + color: widget.inactiveTextColor, + fontWeight: _inactiveTextFontWeight, + fontSize: widget.valueFontSize, + ), + textAlign: TextAlign.right, + ); } return Text("");