×
×

Spread the love

A switch is nothing but an on/off button in flutter. It is used to toggle between on/off which is true/false respectively. In this example tutorial, we will learn how to use a switch widget in flutter and its properties with examples.

Flutter Switch

A switch in flutter is nothing but a button that has two states ON and OFF. When the switch is turned ON or OFF the onChanged callback is invoked. It returns true when the switch is in ON state and false when it is in OFF state. So based on the value returned by the callback we can perform the corresponding action. The general use case of a switch is the settings menu in mobile where we can enable or disable a setting using a switch.

The switch cannot maintain the state. So when the switch is turned ON or OFF the onChanged callback will be invoked. Whenever the callback is invoked the switch will be rebuilt to update the UI with the current state (ON/OFF).

The switch widget displays only a simple switch without any text or label. To display a switch with text/label use SwitchListTile or wrap Switch and Text widgets in a row widget.

Note: Switch.adaptive creates a CupertinoSwitch if the target platform is iOS, creates a material design switch otherwise.

Constructor:

Switch({
Key key, 
@required bool value, 
@required ValueChanged<bool> onChanged, 
Color activeColor, 
Color activeTrackColor, 
Color inactiveThumbColor, 
Color inactiveTrackColor, 
ImageProvider<Object> activeThumbImage, 
void onActiveThumbImageError(dynamic exception, StackTrace stackTrace), 
ImageProvider<Object> inactiveThumbImage, 
void onInactiveThumbImageError(dynamic exception, StackTrace stackTrace), 
MaterialTapTargetSize materialTapTargetSize, 
DragStartBehavior dragStartBehavior: DragStartBehavior.start, MouseCursor mouseCursor, 
Color focusColor, 
Color hoverColor, 
FocusNode focusNode, 
bool autofocus: false
}) 

Flutter Switch Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class _MyState extends State<MyApp>
{
  bool _value = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.indigo,
            title: Text("Flutter Switch"),
          ),
          body:Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.symmetric(vertical: 40),
            child: Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },             
            ),
          )
        )
    );
  }
}

Output:

flutter switch

Flutter Switch Properties

Different flutter switch properties are:

  • value(required)
  • onChanged(required)
  • activeColor
  • activeTrackColor
  • inactiveThumbColor
  • inactiveTrackColor
  • dragStartBehavior

value

We will use the value property to assign a value to the switch. It represents the on/off state of the switch. When value is true the switch state is on and when the value is false the switch state is off. It is a required property which means without using it will throw an error.

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },           
            ),

onChanged

We will use onChanged property to get the value of the switch. When we on/off the switch the onChanged callback will invoke and pass the value of the switch(true/false). The onChanged is a required property.

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },           
            ),

activeColor

We will use the activeColor property to change the color of the switch when it is active or in on state.

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              activeColor: Colors.green,            
            ),

Output:

flutter switch active color

activeTrackColor

We will use activeTrackColor property to change the track color of the switch when it is active or in on state.

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              activeColor: Colors.green,
              activeTrackColor: Colors.deepOrange,
            ),

Output:

flutter switch active track color

inactiveThumbColor

We will use inactiveThumbColor property to change the color of the switch when it is inactive or in off state.

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              activeColor: Colors.green,
              activeTrackColor: Colors.deepOrange,              
              inactiveThumbColor: Colors.red,
            ),

Output:

flutter switch inactive thumb color

inactiveTrackColor

We can change the track color of the switch when the switch is inactive or in off state. To change the track color we will use inactiveTrackColor property.

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              activeColor: Colors.green,
              activeTrackColor: Colors.deepOrange,
              inactiveTrackColor: Colors.red[100],
              inactiveThumbColor: Colors.red,
            )

Output:

flutter switch inactive track color

dragStartBeheavior

We will use dragStartBehavior to change the way the thumb slides. We will use DragStartBehavior class which has constants like down and start. If we use down the thumb will jump from one end to the other. If we use start the thumb will slide from one end to the other smoothly.

DragStartBehavior.down

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              activeColor: Colors.green,
              activeTrackColor: Colors.deepOrange,
              inactiveTrackColor: Colors.red[100],
              inactiveThumbColor: Colors.red,
              dragStartBehavior: DragStartBehavior.down,
            )

DragStartBehavior.Start

Switch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              activeColor: Colors.green,
              activeTrackColor: Colors.deepOrange,
              inactiveTrackColor: Colors.red[100],
              inactiveThumbColor: Colors.red,
              dragStartBehavior: DragStartBehavior.start,
            )

That brings an end to flutter switch example tutorial. Let’s catch up with some other flutter widget in the next post. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference: Flutter official documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *