Cupertino Switch in Flutter
When ios introduced switch-type buttons it became intensively popular among users as well as developers. Developers always want to implement such buttons in their applications irrespective of the platform be it ios or android.
Flutter provides an option to implement it in the form of a widget Cupertino switch. Using the Cupertino switch widget developers can easily implement use the ios styled switches in your application regardless of the platform.
In this blog, I’ll be taking you through the overview, usage, and implementation of the widget CupertinoSwitch.
Table Of Contents:
What is CupertinoSwitch?
Cupertino switch is an ios styled switch that works like any normal switch in your home. The switch will have a certain condition which once fulfilled will turn the switch on and if not then off.
Whenever there is a change in the state of the switch the onChanged callback will invoke. It will return the updated state which is true or false. So based on the value returned by the callback we have to update the UI and perform some action. It is generally used in the setting sections of an app like wifi, Bluetooth, and many more using the switch in settings of the mobile device.
Constructor:
We need to use the below constructor to use the CupertinoNavigationBar widget in our code.
CupertinoSwitch(
{Key? key,
required bool value,
required ValueChanged<bool>? onChanged,
Color? activeColor,
Color? trackColor,
Color? thumbColor,
DragStartBehavior dragStartBehavior}
)Properties:
> value: It takes the boolean value as input. The value decides the on/off condition of the switch.
> onChanged: It takes a callback function as a value. This function will invoke every time the user turns the switch on/off. To update the UI with the latest position we have to call setSatete() inside the onChanged function.
> activeColor: The color of the switch when it is in an active state. The default color is green.
> trackColor: It is the color when the state of the switch is off.
> dragStartBehavior: Determines the way that drag start behavior is handled.
> thumbColor: The color to use for the thumb of the switch.
Code Implementation:
Create a new dart file called main.dart inside the lib folder.
After this, we will create a Stateless Widget that will return the Material App. Inside of this, we will pass out class MyHomePage.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Learning',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:MyHomePage(),
);
}
}Now before using Cupertino Switch we will import the Cupertino package in our main.dart file.
After this, we will return CupertinoPageScaffold under our MyHomePage class.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState()
{
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool state = false;
@override
Widget build(BuildContext context) {
return new CupertinoPageScaffold()Inside it, we will be passing our CupertinoSwitch along with other properties of CupertinoSwitch like thumbColor, activeColor. Also, we will be changing the state under onChanged property.
CupertinoSwitch(
value:state,
onChanged: (value){
state = value;
setState(() {
},
);
}, thumbColor: CupertinoColors.destructiveRed,
activeColor: CupertinoColors.activeBlue,
),When we run the application, we ought to get the screen’s output like the underneath screen video.
The Text below has also been assigned state change. So when the onChange value is changed it corresponds to the same.
Code Files:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'CupertinoSwitch',
theme: ThemeData(
),
home:MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState()
{
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool state = false;
@override
Widget build(BuildContext context) {
return new CupertinoPageScaffold(
backgroundColor: Colors.black,
navigationBar:CupertinoNavigationBar(
leading: CupertinoNavigationBarBackButton(
onPressed: ()
{ },
color: CupertinoColors.label,
),
middle: Text(" CupertinoSwitch")
),
child:Material(
child: Container(
margin: EdgeInsets.only(top:120, left: 50, right: 20),
width: double.infinity,
child:Column(
children: [
Container(
width: double.infinity,
child: Row(
children: [
SizedBox(
width: MediaQuery.of(context).size.width*0.5,
child: Text("Bluetooth", style: TextStyle(fontWeight: FontWeight.bold),),
),
SizedBox(
width: MediaQuery.of(context).size.width*0.20,
child: CupertinoSwitch(
value:state,
onChanged: (value){
state = value;
setState(() {
},
);
}, thumbColor: CupertinoColors.destructiveRed,
activeColor: CupertinoColors.activeBlue,
),
),
],
),
),
SizedBox(
height: 20,
),
Divider(
height: 1,
color: CupertinoColors.systemGrey5,
),
SizedBox(
height:40
),
Text(state == true? "Bluetooth turned on": "Bluetooth turned off",
style:TextStyle(
fontWeight: FontWeight.bold,
color: state == true? CupertinoColors.secondaryLabel : CupertinoColors.activeOrange
),
),
],
)
),
),
);
}
}Conclusion:
In the end, CupertinoSwitch is a very useful widget in helping the developer for implementing ios styled switches in a very easy way. It is widely used to give application ios styled on/off switches.
It is very easy to use it and we can use it in numerous conditions. We can make it adapt to our code as per our requirements. It was just a small overview of the CupertinoSwitch widget its functionality and implementation. I hope the time you spent reading this article turns out to be productive. You can try implementing and modifying this code as per your needs.
Feel free to reach out to me for any suggestions or corrections where I can improve.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
