Switch Button in Flutter

In Flutter, a SwitchButton is a type of widget that allows users to toggle between two states, typically ON and OFF. It’s a boolean value selector that provides a visual representation of the current state
The Switch widget is a versatile tool in Flutter that provides a straightforward method for toggling between two states. By managing its state and appearance, you can easily integrate it into your Flutter applications to handle user preferences and options.

• Displays a toggle button with two distinct states (ON and OFF)
• Allows users to switch between these states by tapping or dragging the button
• Provides a boolean value indicating the current state (true for ON, false for OFF)

In Flutter, you can implement a SwitchButton using the Switch widget, which is a built-in widget provided by the Flutter framework.

Switch(
  value: _isChecked, // boolean value
  onChanged: (bool newValue) {
    setState(() {
      _isChecked = newValue;
    });
  },
)

A SwitchButton can be used in various scenarios where you need to provide a simple, binary choice to the user. Here are some common use cases:

1. Settings or Preferences: Allow users to enable or disable features, such as notifications, location services, or dark mode.
2. Toggle Options: Provide a switch to toggle between different modes, like a light/dark theme switcher or a switch to toggle between different units of measurement.
3. Boolean Input: Use a switch to collect boolean input from users, such as agreeing to terms and conditions or confirming their age.
4. On/Off Controls: Implement a switch to regulate a device’s or feature’s state, such as turning Bluetooth or Wi-Fi on or off.

Common properties of a SwitchButton in Flutter:

1. value: The current value of the switch, either true (ON) or false (OFF).
2. onChanged: A callback function that’s called when the user toggles the switch.
3. activeColor: The color of the switch when it’s in the ON state.
4. inactiveColor: The color of the switch when it’s in the OFF state.
5. activeTrackColor: The color of the track (background) when the switch is in the ON state.
6. inactiveTrackColor: The color of the track (background) when the switch is in the OFF state.
7. thumbColor: The color of the thumb (button) that’s dragged to toggle the switch.
8. materialTapTargetSize: The size of the tap target for the switch.
9. autofocus: Whether the switch should automatically receive focus when the app starts.
10. dragStartBehavior: The behavior when the user starts dragging the switch.

Code:

import 'package:flutter/material.dart';

// Define a StatefulWidget for the switch demonstration
class SwitchbuttonDemo extends StatefulWidget {
  const SwitchbuttonDemo({Key? key}) : super(key: key);

  @override
  State<SwitchbuttonDemo> createState() => _SwitchbuttonDemoState();
}

class _SwitchbuttonDemoState extends State<SwitchbuttonDemo> {
  // This is the state variable that holds the current value of the switch
  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    // Build the widget tree
    return SafeArea(
      child: Scaffold(
        // AppBar to display the title and gradient background
        appBar: AppBar(
          title: Text(
            "Switch Button",
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
          flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.deepPurple, Colors.orangeAccent],
                begin: Alignment.topLeft,
                end: Alignment.topRight,
              ),
            ),
          ),
        ),
        body: Column(
          // Center the switch button in the vertical center of the screen
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // The Switch widget allows toggling between two states
            Switch(
              value: _switchValue, // Pass the current state of the switch
              onChanged: (bool value) {
                // This callback is triggered when the user toggles the switch
                setState(() {
                  _switchValue = value; // Update the state with the new value
                });
              },
              activeColor: Colors.blue, // Color of the switch when it's ON
              inactiveThumbColor: Colors.grey, // Color of the switch thumb when it's OFF
              activeTrackColor: Colors.lightBlueAccent, // Color of the track when the switch is ON
              inactiveTrackColor: Colors.black12, // Color of the track when the switch is OFF
            ),
          ],
        ),
      ),
    );
  }
}