Switch widget is just like a button that controls Toggle functionality. Switch is same as our house electricity switches which has Turn On and Turn Off functionality. Switch has a property named as onChanged which will called on Switch click event. If user turn on the Switch then this event called and also if user simply press on Switch this property calls. We can turn on and turn off Switch using onChanged event using State update. So in this tutorial we would Create Switch Widget with ON OFF Switch Event in Flutter Android iOS app example tutorial.
What we are doing in this tutorial:
We would Create a Switch widget in Flutter and update its value using onChanged method. We would also turn on and turn off switch using State and Update Text widget text.
Contents in this project Create Switch Widget with ON OFF Switch Event in Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create our main class named as MyApp extends with StatelessWidget. We would create Scaffold widget in Widget build area with SafeArea widget. We would call SwitchWidget() class function here to create switch widget. We would create SwitchWidget class in next step.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: SwitchWidget() ), ) )); } } |
3. Create a class named as SwitchWidget extends StatefulWidget. This is our instance class for our Switch widget class. We would also call createState() function here which enables the State functionality in this class.
|
1 2 3 4 |
class SwitchWidget extends StatefulWidget { @override SwitchWidgetClass createState() => new SwitchWidgetClass(); } |
4. Create a class named as SwitchWidgetClass extends with State. We would create Switch widget here in this class.
|
1 2 3 4 |
class SwitchWidgetClass extends State { } |
5. Create 1 Boolean variable with 1 variable in SwitchWidgetClass.
- switchControl : Used to turn ON and turn OFF switch using Boolean value.
- textHolder : Hold some text which we would display in Text widget.
|
1 2 |
bool switchControl = false; var textHolder = 'Switch is OFF'; |
6. Create a function named as toggleSwitch() in SwitchWidgetClass. We would class this function on onChanged event of Switch widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
void toggleSwitch(bool value) { if(switchControl == false) { setState(() { switchControl = true; textHolder = 'Switch is ON'; }); print('Switch is ON'); // Put your code here which you want to execute on Switch ON event. } else { setState(() { switchControl = false; textHolder = 'Switch is OFF'; }); print('Switch is OFF'); // Put your code here which you want to execute on Switch OFF event. } } |
7. Create Switch widget in widget build area in SwitchWidgetClass. We would put switch widget in Transform.scale() widget to make its size larger. We would also create a Text widget with textHolder value.
- onChanged : Calls every time when user press or click on Switch.
- value : Controls whether switch will be on or off using true – false bool value.
- activeColor : Controls the Color of Switch round ball on Switch on.
- activeTrackColor : Controls the Switch track bar color.
- inactiveThumbColor : Controls Switch round ball color on Switch off event.
- inactiveTrackColor : Controls the Switch track bar color on Switch off event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Transform.scale( scale: 1.5, child: Switch( onChanged: toggleSwitch, value: switchControl, activeColor: Colors.blue, activeTrackColor: Colors.green, inactiveThumbColor: Colors.white, inactiveTrackColor: Colors.grey, ) ), Text('$textHolder', style: TextStyle(fontSize: 24),) ]); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: SwitchWidget() ), ) )); } } class SwitchWidget extends StatefulWidget { @override SwitchWidgetClass createState() => new SwitchWidgetClass(); } class SwitchWidgetClass extends State { bool switchControl = false; var textHolder = 'Switch is OFF'; void toggleSwitch(bool value) { if(switchControl == false) { setState(() { switchControl = true; textHolder = 'Switch is ON'; }); print('Switch is ON'); // Put your code here which you want to execute on Switch ON event. } else { setState(() { switchControl = false; textHolder = 'Switch is OFF'; }); print('Switch is OFF'); // Put your code here which you want to execute on Switch OFF event. } } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Transform.scale( scale: 1.5, child: Switch( onChanged: toggleSwitch, value: switchControl, activeColor: Colors.blue, activeTrackColor: Colors.green, inactiveThumbColor: Colors.white, inactiveTrackColor: Colors.grey, ) ), Text('$textHolder', style: TextStyle(fontSize: 24),) ]); } } |
Screenshots in Android device:
Screenshot in iOS device:
