Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

custom track widgets feature update + docs fixes #43

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

custom track widgets feature update + docs fixes #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a448367
added active & inactive track item for customization
sachin-dahal Jul 3, 2021
8a0846f
docs: updates of using custom widgets + doc fixes
sachin-dahal Jul 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) <a href="https://github.com/boringdeveloper/FlutterSwitch/actions"><img src="https://img.shields.io/github/workflow/status/boringdeveloper/FlutterSwitch/Widget%20Test?label=build"></a>

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) <a href="https://www.linkedin.com/in/nichole-john-talban-romero/"><img src="https://img.icons8.com/doodle/452/linkedin--v2.png" width="20"></a> <a href="https://twitter.com/nickrdev"><img src="https://img.icons8.com/doodle/452/twitter--v1.png" width="20"></a>

Expand All @@ -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:
Expand Down Expand Up @@ -77,10 +77,10 @@ class _MyHomePageState extends State<MyHomePage> {

## 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
Expand Down
68 changes: 47 additions & 21 deletions lib/flutter_switch.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
///
Expand All @@ -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.
///
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -359,7 +383,7 @@ class _FlutterSwitchState extends State<FlutterSwitch>
width: _textSpace,
padding: EdgeInsets.symmetric(horizontal: 4.0),
alignment: Alignment.centerLeft,
child: _activeText,
child: _activeTrackItem,
),
),
Align(
Expand All @@ -371,7 +395,7 @@ class _FlutterSwitchState extends State<FlutterSwitch>
width: _textSpace,
padding: EdgeInsets.symmetric(horizontal: 4.0),
alignment: Alignment.centerRight,
child: _inactiveText,
child: _inactiveTrackItem,
),
),
),
Expand Down Expand Up @@ -429,32 +453,34 @@ class _FlutterSwitchState extends State<FlutterSwitch>
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("");
Expand Down