Flutter - Switch Input Widget Example

Flutter has some built-in input widgets, one of which is Switch. In this tutorial, I'm going to show you how to use the widget from the basic example, then customizing the look of Switch input.

Switch has two required attributes: value and onSwitchChange. The value passed on value attribute will determine whether it's active or inactive. onSwitchChange is the function used to handle value change - when the user presses on the widget or drags the thumb to the other end. Usually what we need to do inside the function is updating the value. Below is the very basic example of how to use Switch in Flutter.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: SwitchExample(),
      );
    }
  }
  
  class SwitchExampleState extends State {
    bool switchOn = false;
  
    void _onSwitchChanged(bool value) {
      switchOn = false;
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Startup Name Generator'),
        ),
        body: Center(
          child:  Transform.scale(
            scale: 2.0,
            child: Switch(
              onChanged: _onSwitchChanged,
              value: switchOn,
            ),
          ),
        ),
      );
    }
  }
  
  class SwitchExample extends StatefulWidget {
    @override
    SwitchExampleState createState() => new SwitchExampleState();
  }

The Switch class has some attributes that allow us to modify the look of the widget with ease. Below are the list of available options.

NameTypeDescription
onChangedfunctionRequired. Will be triggered everytime the value changes.
valuebooleanRequired. The switch is active when the value is true and inactive when it false
activeColorfunctionColor of the thumb when active.
activeTrackColorfunctionColor of the track when active..
inactiveThumbColorfunctionColor of the thumb when inactive.
inactiveTrackColorfunctionColor of the track when inactive.
activeThumbImageImageProviderImage on the thumb when active.
inactiveThumbImageImageProviderImage on the thumb when inactive.
materialTapTargetSizeMaterialTapTargetSizeAvailable values:
  • padded: Expands the minimum tap target size to 48px by 48px. Default and recommended
  • shrinkWrap: Shrinks the tap target size to the minimum provided by the Material specification.

This is the example of custom Switch widget.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: SwitchExample(),
      );
    }
  }
  
  class SwitchExampleState extends State {
    bool switchOn = false;
  
    void _onSwitchChanged(bool value) {
      switchOn = false;
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Startup Name Generator'),
        ),
        body: Center(
          child:  Transform.scale(
            scale: 2.0,
            child: Switch(
              onChanged: _onSwitchChanged,
              value: switchOn,
              activeColor: Colors.blue,
              activeTrackColor: Colors.green,
              inactiveThumbColor: Colors.white,
              inactiveTrackColor: Colors.red,
              activeThumbImage: Image.asset(
                'assets/images/flutter.png'
              ).image,
            ),
          ),
        ),
      );
    }
  }
  
  class SwitchExample extends StatefulWidget {
    @override
    SwitchExampleState createState() => new SwitchExampleState();
  }