Flutter - Custom Gradient Switch
Last Updated :
28 Apr, 2025
If you are using Flutter you must hear that it is very easy to make UI in this. All widgets are easy to use. So now let's make one common widget that you must have seen in almost every app i.e. Switch. Now you will say it is very easy to make from the switch widget. But we will make it a Gradient Switch. If you are new to Flutter let us explain what Switch is. It is used to toggle the on/off state of a single setting. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Add one variable to check the switch current status
Dart
Step 3: Create a Gesture Detector with Stack as a widget
We have used gestureDetecture to detect user clicks and stack because will stack two containers to make it look like a switch.
Dart
GestureDetector(
onTap: () {
},
child: Stack(
alignment:
isSwitchOn ? Alignment.centerRight : Alignment.centerLeft,
children: [
],
),
),
In stack we have passed alignment on ternary operator because we need to show the container in two different alignment on the basis of isSwitch value.
Step 4: Add 2 Container in Stack
First Container with following property
Properties:
- height, width: We have added fixed height width so that it remains same in responsiveness also
- alignment: We haved Alignment.center as all the child will be requiring incenter only
- decoration: In Box Decoration there multiple properties you can use and modify this switch but we have used only 2 properties. 1 most important gradient in this we will be passing the linear gradient with 2 different colors on condition and borderradius for making switch beautiful.
Dart
Container(
// Fixed height and width is given so that
// it won't get change in responsiveness
width: 70,
height: 40,
alignment: Alignment.center, // Alignment as center
decoration: BoxDecoration(
// TODO: you can change here gradient color
gradient: LinearGradient(
colors: isChecked
? [
const Color(0xFFF09869),
const Color(0xFFC729B2),
]
: [Colors.grey, Colors.grey],
),
borderRadius:
const BorderRadius.all(Radius.circular(40)),
),
),
Second Container with following property
Properties:
- height, width: We have added fixed height width so that it remains same in responsiveness also
- alignment: We haved Alignment.center as all the child will be requiring incenter only
- decoration: In Box Decoration there multiple properties you can use and modify this switch but we have used only 2 properties. 1 most important gradient in this we will be passing the linear gradient with 2 different colors on condition and borderradius for making switch beautiful.
Dart
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
Step 4: Change the state of bool variable
In GestureDetector we have added onTap where we will be changing the state of isSwitchOn variable
Dart
onTap: () {
// To change the state of isSwitchOn variable
setState(() {
isSwitchOn = !isSwitchOn;
});
},
We have completed all the steps let's understand
What we have done?
We have Gesture detector which will onTap function use to change the state of switch in child we have stack with alignment on conditional basis of isSwitchOn if it is true it will be right aligned otherwise it will be left. Inside Stack we have children with two container first one is gradient container and small whitecontainer on it.
Complete Source Code
Dart
import 'package:flutter/material.dart';
// You can also use stateful builder instead of stateful widget
class GradientSwitch extends StatefulWidget {
const GradientSwitch({Key? key}) : super(key: key);
@override
State<GradientSwitch> createState() => _GradientSwitchState();
}
class _GradientSwitchState extends State<GradientSwitch> {
bool isSwitchOn = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
),
title: const Text('Gradient Switch'),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
// To change the state of isSwitchOn variable
setState(() {
isSwitchOn = !isSwitchOn;
});
},
// TODO: Here you can see border of Switch if isSwitchOn is true
// else gradient color of Switch
child: Stack(
alignment:
isSwitchOn ? Alignment.centerRight : Alignment.centerLeft,
children: [
// Gradient Container
Container(
// Fixed height and width is given so that
// it won't get change in responsiveness
width: 70,
height: 40,
alignment: Alignment.center, // Alignment as center
decoration: BoxDecoration(
// TODO: you can change here gradient color
gradient: LinearGradient(
colors: isSwitchOn
? [
const Color(0xFFF09869),
const Color(0xFFC729B2),
]
: [Colors.grey, Colors.grey],
),
borderRadius:
const BorderRadius.all(Radius.circular(40)),
),
),
// White Ball like Container
Container(
height: 40,
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
],
),
),
const SizedBox(
height: 20,
),
Text(
'Custom Gradient Switch',
style: Theme.of(context).textTheme.displaySmall,
),
],
),
));
}
}
How it will work?
Whenever user click on custom switch it will change it state if is enable it will show gradient type widget with white ball like container in right. Otherwise it will be grey color with ball at left corner.
Output:
Similar Reads
Flutter - Slider with Gradient In this article, we will create a slide to confirm the button using the widget in Flutter. A sample video is given below to get an idea about what we are going to do in this article. Step By Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android S
3 min read
Flutter - Gradient Button Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty.
3 min read
Flutter - Custom Gradient CheckBox Flutter is famous for its UI components and its development. There are many widgets available with multiple properties to customise. Let's create a custom gradient checkbox. A sample video is given below to get an idea about what we are going to do in this article. Checkbox in Flutter is a material
5 min read
Flutter - Custom Widgets We create Custom Widgets when we want a custom look and feel to our app, and we know that there will be a repetition of a particular widget. We can create the custom widget in a new dart file with all the codes and defining the parameters that we need in the constructor. For more on how to split wid
8 min read
Gradient in Flutter Applications Gradients are considered to be eye-catching elements in UI/UX and graphic design. Having gradient elements in your apps can really elate your app in terms of user experience and feel.In this tutorial, we will be looking at how we can implement gradients in flutter.Flutter offers 3 types of gradients
7 min read
Flutter - Cupertino Switch The CupertinoSwitch widget in Flutter is part of the Cupertino-themed widgets, which copy the design and behaviour of iOS widgets. It is used to create a switch or toggle control with an iOS-style appearance. In this article, we are going to implement the CupertinoSwitch widget. A sample video is gi
5 min read