How to Add Switch in Flutter

In this example, we are going to show you how to add a toggle switch, switch with a label and how to check if the switch is enabled or disabled. You will also learn how to turn or off the switch in Flutter. See the example.

Switch(
  value: false, //set true to enable switch by default
  onChanged: (bool value) {
          
  },
)

Here, you will see the only switch without the label, you have to pass the initial boolean value. If you pass false, it will be turned off, if you pass true, it will be turned on.

SwitchListTile( //switch at right side of label
  value: true, 
  onChanged: (bool value){

  },
  title: Text("Turn on Flash Light")
)

Here, you will see the switch with the clickable label, but the issue is that the switch will be placed on the right side of the label. See the example below to align the switch to the left side of SwitchListTile().

SwitchListTile( //switch at left side of label
  value: true, 
  controlAffinity: ListTileControlAffinity.leading,
  onChanged: (bool value){
         
  },
  title: Text("Disable Daily Alarm")
)

You have to set controlAffinity: ListTileControlAffinity.leading, to align the switch on the left side of the SwitchListTile.

bool s1 = false; //turn off by default

Switch(
  value: s1,
  onChanged: (bool value) {
          setState(() {
              s1 = value; //update value when sitch changed
          });
  },
)

if(s1){
   // switch is turn on
}else{
   //switch is turn off
}

Here, we have boolean variable s1, and it default value is false. And we pass this boolean value to Switch. It will be turned off by default because we pass a boolean value with a false value. Now whenever Siwtich is changed, we will update this boolean value with the new value. And while checking, we will verify s1 is true or false to check if the switch is turned on or off.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
   bool s1 = false, s2 = true, s3 = false;
   //true for enabled switch.
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Switch in Flutter"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [  
                  
                Switch(
                  value: s1,
                  onChanged: (bool value) {
                          setState(() {
                              s1 = value; //update value when sitch changed
                          });
                  },
                ),

                SwitchListTile( //switch at right side of label
                  value: s2, 
                  onChanged: (bool value){
                          setState(() {
                              s2 = value; //update value when sitch changed
                          });
                  },
                  title: Text("Turn on Flash Light")
                ),

                SwitchListTile( //switch at left side of label
                  value: s3, 
                  controlAffinity: ListTileControlAffinity.leading,
                  onChanged: (bool value){
                          setState(() {
                            s3 = value; //update value when sitch changed
                          });
                  },
                  title: Text("Disable Daily Alarm")
                ),

            ],)
          )
       );
  }
}