A switch is a two-state UI component used to flip between ON (Checked) or OFF (Unchecked) states. Ordinarily, it is a button with a thumb slider where the user can haul back and forth to pick an alternative as ON or OFF. Its working is like the house power switches.
In this article, we will explore the Custom Rolling Switch In Flutter. We will implement a custom rolling switch demo program with attractive animation and some properties using the lite_rolling_switch package in your flutter applications.
lite_rolling_switch | Flutter Package
Full customizable rolling switch widget for flutter apps based on Pedro Massango’s ‘crazy switch widget…pub. dev
Table Of Contents::
Introduction:
In Flutter, a switch is a widget used to choose between two alternatives, either ON or OFF. It doesn’t keep up the actual state. To keep up the states, it will call the onChanged property. Assuming the worth return by this property is true, the switch is ON and false when it is OFF. At the point when this property is invalid, the switch widget is debilitated.
Custom Rolling Switch button with alluring animation made to permit you to modify colors, symbols, and other restorative substances. Deal with the widget states similarly you do with the traditional material’s switch widget.
Demo Module :
This demo video shows how to create a custom rolling switch in a flutter. It shows how the custom rolling switch will work using the lite_rolling_switch package in your flutter applications. It shows toggle interaction where the user presses the button then, the switch will be rolling to another side with animation effect and the icons and text will be changed when the switch is rolling. It will be shown on your device.
Properties:
There are some properties of LiteRollingSwitch are:
- > onChanged: This property is called when the user toggles the switch on or off.
- > value: This property is used to determines whether this switch is on or off.
- > animationDuration: This property is used how long an animation should take to complete one cycle.
- > colorOn: This property is used to show color when the switch is On.
- > colorOff: This property is used to show color when the switch is Off.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
lite_rolling_switch:
Step 2: Import
import 'package:lite_rolling_switch/lite_rolling_switch.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called demo_screen.dart inside the lib folder.
In the body part, we will add the Center() widget. Inside the widget, we will add a Column widget. In this widget, we will add the mainAxisAlignment was center. Inside, we will add text with style. We will add padding and on its child add LiteRollingSwitch() widget for custom.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Do you like Flutter?",style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold
),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: LiteRollingSwitch(
value: true,
textOn: 'Yes',
textOff: 'No',
colorOn: Colors.cyan,
colorOff: Colors.red[400],
iconOn: Icons.check,
iconOff: Icons.power_settings_new,
animationDuration: Duration(milliseconds: 800),
onChanged: (bool state) {
print('turned ${(state) ? 'yes' : 'no'}');
},
),
)
],
),
),
Inside, we will add value was true means which determines whether this switch is on or off. We will add textOn was the string ‘Yes’ means when the switch is On then the text will be shown on the button and when textOff was the string ‘No’ means when the switch is Off then the text will be shown on the button. We will add colorOn means when the switch is On then the color will be shown on the button and when colorOff means when the switch is Off then the color will be shown on the button. We will add animationDuration means to delay the start of the animation and add onChanged means when the user toggles the switch on or off. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lite_rolling_switch/lite_rolling_switch.dart';
class DemoScreen extends StatefulWidget {
@override
_DemoScreenState createState() => _DemoScreenState();
}
class _DemoScreenState extends State<DemoScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal[50],
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.black,
title: Text('Flutter Custom Rolling Switch'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Do you like Flutter?",style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold
),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: LiteRollingSwitch(
value: true,
textOn: 'Yes',
textOff: 'No',
colorOn: Colors.cyan,
colorOff: Colors.red[400],
iconOn: Icons.check,
iconOff: Icons.power_settings_new,
animationDuration: Duration(milliseconds: 800),
onChanged: (bool state) {
print('turned ${(state) ? 'yes' : 'no'}');
},
),
)
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Custom Rolling Switch of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Custom Rolling Switch On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Custom Rolling Switch in your flutter projects. We will show you what the introduction is?. Show some properties, make a demo program for working Custom Rolling Switch and show toggle interaction where the user presses the button then, the switch will be rolling to another side with animation effect and the icons and text will be changed when the switch is rolling using the lite_rolling_switch package in your flutter applications, so please try it.
❤ ❤ 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.
find the source code of the Flutter Custom Rolling Switch Demo:
flutter-devs/flutter_custom_rolling_switch_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
