Flutter Switch
A switch is a two-state UI element and is used to toggle between ON (Checked) or OFF (Unchecked) states it is similar to checkbox. It is a button with a thumb slider used to drag back and forth in the form as ON or OFF. This is similar to electrical switches.
Properties of Switch Widget
Attributes | Descriptions |
---|---|
onChanged | This is called when the user tap on the switch. |
value | Boolean value true or false is set to show the state of the switch. |
activeColor | specifies the color of the switch round ball when it’s active or on state. |
activeTrackColor | specifies the color of the switch track bar when it’s active or on state. |
inactiveThubmColor | specifies the color of the switch round ball when it’s inactive or in off state |
inactiveTrackColor | specifies the color of the switch track bar when it’s inactive or in off state |
Example
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("Flutter Switch Example"), ), body: Center( child: SwitchScreen() ), ) ); } } class SwitchScreen extends StatefulWidget { @override SwitchClass createState() => new SwitchClass(); } class SwitchClass extends State { bool isSwitched = false; var textValue = 'Switch is OFF'; void toggleSwitch(bool value) { if(isSwitched == false) { setState(() { isSwitched = true; textValue = 'Switch Button is ON'; }); print('Switch Button is ON'); } else { setState(() { isSwitched = false; textValue = 'Switch Button is OFF'; }); print('Switch Button is OFF'); } } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Transform.scale( scale: 2, child: Switch( onChanged: toggleSwitch, value: isSwitched, activeColor: Colors.blue, activeTrackColor: Colors.yellow, inactiveThumbColor: Colors.redAccent, inactiveTrackColor: Colors.orange, ) ), Text('$textValue', style: TextStyle(fontSize: 20),) ]); } }
Output

