How to create a switch in Flutter and its properties

How to create a switch in Flutter:

A switch is used to toggle between two states. It is one of the most commonly used widget in any application.

In Flutter, switch is easy to implement. It is an inbuilt widget that allows us to create a material design switch. In this post, I will show you how to create a switch in flutter with example.

Switch class in Flutter:

In Flutter, switch is toggled between on/off states. It doesn’t hold the state. It calls onChanged callback to inform the state change. Based on the state, we need to rebuild it to update the appearance.

onChanged callback is always required. Without this, it will be disabled.

To use a switch, Switch class is used in Flutter. You can check the documentation to find all different properties available for this class.

Following are the important properties of this class:

activeColor : This is the color of the switch in on state.
activeThumbImage : Thumb image of the switch when it is turned on.
activeTrackColor : Color of the track when it is turned on.
autoFocus : Boolean value to indicate if this switch widget should be selected as the initial focus.
focusColor : Color of the switch when it has the input focus.
hoverColor : Color of the switch when a pointer is hovering over it.
inactiveThumbColor : Color of the thumb in inactive or off state.
inactiveThumbImage : Image of the thumb in inactive or off state.
inactiveTrackColor : Color of the track in inactive or off state.
mouseCursor : The cursor when it is hovering over it.
onActiveThumbImageError : Optional error callback. It is called for any error in loading activeThumbImage.
onInactiveThumbImageError : Optional error callback. It is called for any error in loading inactiveThumbImage.
value : Boolean value to indicate if the switch is on or off.

Example of Switch:

Below is the complete code of the dart file:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Switch Example'),
          ),
          body: BodyWidget(),
        ));
  }
}

class BodyWidget extends StatefulWidget {
  @override
  SwitchWidget createState() => SwitchWidget();
}

class SwitchWidget extends State {
  bool switchOn = false;

  void changeSwitchState(bool state) {
    setState(() {
      switchOn = !switchOn;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Switch(
        value: switchOn,
        activeColor: Colors.red[600],
        activeTrackColor: Colors.red[200],
        inactiveThumbColor: Colors.blue[200],
        inactiveTrackColor: Colors.blue[100],
        onChanged: changeSwitchState,
      ),
    );
  }
}

Here, we create one Switch widget with different colors for active and inactive states. It gives output as like below:

For on,

And for off,

CodeVsColor

How to create a switch in Flutter and its properties