WOISwitchButton class

A widget that gives you option to toggle and switch between two sides

Here is the very basic way to use the widget

 WOISwitchButton(
  value: switchValue,
  onChanged: (bool isSelected) {
    switchValue = isSelected;
    setState(() {});
  },
)

Selected State

Un selected State

The value and onChanged are required fields onChanged field will return the data when ever the value is changed with the updated value on what should be the new value after the tap action

Furthure if you want to explore the full extent of the widget then we have the active and inactive states for the swtich as well which you can change by providing the value for the activeSwitchStyle and inActiveSwitchStyle fields while both of them accepts the WOISwitchStyleModel type value which is a custom model for styling of the widget

There will be a variabled named thumbSize saperately with in the widget and in both other fields activeSwitchStyle and inActiveSwitchStyle The way it works is that if only thumbSize is provded without involving thumbSize fields from activeSwitchStyle and inActiveSwitchStyle then it will be constant in both states other wise it will follow the respective size privded in both style variables

Here is the implementation with all utalization of its customization


WOISwitchButton(
  activeSwitchStyle: WOISwitchStyleModel(
    thumbColor: Colors.green,
    icon: const Icon(
      Icons.woman_outlined,
    ),
    thumbBorder: Border.all(
      color: Colors.red,
    ),
    trackColor: Colors.red,
    trackBorder: Border.all(
      color: Colors.black,
      width: 4,
    ),
    thumbSize: 25,
  ),
  trackBorderRadius: 50,
  thumbBorderRadius: 50,
  inActiveSwitchStyle: WOISwitchStyleModel(
    thumbColor: Colors.red,
    thumbSize: 20,
    thumbBorder: Border.all(
      color: Colors.green,
    ),
    trackBorder: Border.all(
      color: Colors.red,
      width: 2,
    ),
    icon: const Icon(
      Icons.person,
      size: 15,
      color: Colors.white,
    ),
    trackColor: Colors.green,
  ),
  value: switchValue,
  onChanged: (bool isSelected) {
    switchValue = isSelected;
    setState(() {});
  },
),
Inheritance

Constructors

WOISwitchButton({Key? key, WOISwitchStyleModel? activeSwitchStyle, WOISwitchStyleModel? inActiveSwitchStyle, double? trackHeight = 35, double? trackWidth = 70, double thumbSize = 25, EdgeInsetsGeometry? thumbMargin, required bool value, required ValueChanged<bool> onChanged, double trackBorderRadius = 100, double thumbBorderRadius = 100})
const

Properties

activeSwitchStyle → WOISwitchStyleModel?
A style model for customize button in its active state
final
hashCode → int
The hash code for this object.
no setterinherited
inActiveSwitchStyle → WOISwitchStyleModel?
A style model for customize button in its in Active state
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onChanged → ValueChanged<bool>
The variable returns the value when use taps on the widget in boolean
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
thumbBorderRadius → double
This is to define the thumb border radius and this will be constant for active and in active state
final
thumbMargin → EdgeInsetsGeometry?
To provide the padding for the thumb on the outside
final
thumbSize → double
This will be used to define the size for the thumb and it will be used for both active and inactive state unitl specificed in the style fields saperatly
final
trackBorderRadius → double
This is to define the track border radius and this will be constant for active and in active state
final
trackHeight → double?
Define the height of the track. It is independent to the size of the thumb.
final
trackWidth → double?
To define the width of the widget
final
value → bool
This is the value variable that will hold the value for the current state This is a required field
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<WOISwitchButton>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited