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.

Name	Type	Description
`onChanged`	function	Required. Will be triggered everytime the value changes.
`value`	boolean	Required. The switch is active when the value is `true` and inactive when it `false`
`activeColor`	function	Color of the thumb when active.
`activeTrackColor`	function	Color of the track when active..
`inactiveThumbColor`	function	Color of the thumb when inactive.
`inactiveTrackColor`	function	Color of the track when inactive.
`activeThumbImage`	`ImageProvider`	Image on the thumb when active.
`inactiveThumbImage`	`ImageProvider`	Image on the thumb when inactive.
`materialTapTargetSize`	`MaterialTapTargetSize`	Available 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();
  }

Flutter - Switch Input Widget Example

Ivan Andrianto