Switch Widget – Flutter Widget Guide By Flutter Agency

Switch Widget – Flutter Widget Guide By Flutter Agency

Earlier we have been through Tooltip Widget so now in this article we will be discussing Switch Widget is used to toggle a setting between on/off which is true/false respectively.

What is Switch Widget?

When the switch is on, the value returned by the Switch onChanged property is true, while the switch is off, onChanged property returns false.

Switch({
    Key key,
    @required bool value,
    @required ValueChanged<bool> onChanged,
    Color activeColor,
    Color activeTrackColor,
    Color inactiveThumbColor,
    Color inactiveTrackColor,
    ImageProvider activeThumbImage,
    ImageErrorListener onActiveThumbImageError,
    ImageProvider inactiveThumbImage,
    ImageErrorListener onInactiveThumbImageError,
    MaterialTapTargetSize materialTapTargetSize,
    DragStartBehavior dragStartBehavior: DragStartBehavior.start,
    Color focusColor,
    Color hoverColor,
    FocusNode focusNode,
    bool autofocus: false,
  });

In Above code snippet fields marked with @required must not be empty.

Properties:

• onChanged(): Calls every time when user press or click on Switch.
• value: Controls whether the switch will be on or off using true – false bool value.
• activeColor: Controls the Color of Switch round ball on Switch on.
• activeTrackColor: Controls the Switch track bar color.
• inactiveThumbColor: Controls Switch round ball color on Switch off event.
• inactiveTrackColor: Controls the Switch track bar color on Switch off event.

Code Snippet will look like below :

Switch(
            value: false,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          )

We will get output like below:

Switch in Flutter 

When we make a change in Switch Widget. We will get output like below: 

Switch Example

Thanks for reading !!!
Need more assistance with Flutter?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.