Flutter Switch Example Tutorial

May 11, 2022

.

Admin

Flutter Switch Example Tutorial

Hi friends,

This tutorial is focused on Flutter Switch Example Tutorial. This article goes in detailed on Flutter Switch Tutorial. you can understand a concept of A Short Tutorial on How to Develop a Switch button in Flutter. We will use How to customize the switch button in a flutter.

you can see How to use the toggle button in Flutter?

I will give you simple Example of How to make the toggle in Flutter?

So let's see bellow example:

Step 1: Create Flutter Project


Follow along with the setup, you will be creating an Flutter app.

$flutter create flutter_switch_tutorial

Navigate to the project directory:

$cd flutter_switch_tutorial

Step 2: Main File

Create a main.dart file in the lib directory

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 Tutorial"),

),

body: Center(

child: SwitchScreen()

),

)

);

}

}

class SwitchScreen extends StatefulWidget {

@override

SwitchClass createState() => new SwitchClass();

}

class SwitchClass extends State {

bool isSwitched = false;

var textValue = 'Switch OFF';

void toggleSwitch(bool value) {

if(isSwitched == false)

{

setState (() {

isSwitched = true;

textValue = 'Switch ON';

});

}

else

{

setState (() {

isSwitched = false;

textValue = 'Switch 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.green,

inactiveThumbColor: Colors.pinkAccent,

inactiveTrackColor: Colors.orange,

)

),

Text( '$textValue' , style: TextStyle(fontSize: 20 ),)

]

);

}

}

Run this Debug App

Output :

I hope it will help you....

#Flutter