Custom Rolling Switch In Flutter

Switch is a UI component of two states used to switch between ON (selected) or OFF (unchecked) states. Typically, it’s a button with a thumb slider that the user can drag back and forth to select other options, such as “on” or “off.” It works like a power switch in a house.

In this article, we will discuss the Custom Rolling Switch in Flutter. We will use the lite_rolling_switch package in the Flutter application to implement a custom scroll switch demo with attractive animations and some properties.

lite_rolling_switch

In a Flutter, the switch is a widget that selects between two options (ON or OFF). It doesn’t keep up with the actual state. To preserve the state, it calls the onChanged property. Assuming the value return of this property is true, the switch is ON and false if it is OFF. When this property is invalid, the switch widget fails.

The “Custom scroll switch” button has an attractive animation effect that allows you to modify colors, symbols and other restorative substances. Widget state is handled in a similar way to switching widgets of traditional materials.

This demo video shows how to create custom scroll switches in quiver. It shows how the custom scroll switch works in the FLUTTER application using the lite_rolling_switch package. It shows the toggle interaction that takes place after the user presses a button, which scrolls to the other side with an animated effect, and changes ICONS and text as it scrolls. It will show up on your device.

LiteRollingSwitch has some properties that are:

  • OnChanged: This property is called when the user turns the switch on or off.

  • Value: This property determines whether this switch is on or off.

  • AnimationDuration: This property is used for how long the animation should take to complete a cycle.

  • ColorOn: This property is used to display color when the switch is on.

  • ColorOff: This property is used to display color when the switch is Off.

steps

  • Step 1: Add dependencies

Add the dependency to the pubspec-YAMl file. Dependency:

  Flutter:
    The SDK: flutter 
  Lite_rolling_switch: ^ 0.11.
Copy the code
  • Step 2: Import
import 'package:lite_rolling_switch/lite_rolling_switch.dart';
Copy the code
  • Step 3: Run the Flutter package and place it in the root directory of your application.

How to implement code in the DART file:

You need to implement this separately in code: demo_screen.dart Creates a new lib file called dart within the folder.

In the body, we will add the Center () widget. Within the widget, we will add a column widget. In this widget, we will add mainAxisAlignment to Center. Inside, we’ll add text with styles. We will add padding and add the LiteRollingSwitch () widget to its child for customization.

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'}'); },),)],),Copy the code

Inside, we will add a value of true, which means determining whether the switch is on or off. We’ll add textOn is the string ‘Yes’ to indicate that text will be displayed on the button when the switch is turned on; When textOff is the string ‘No’ means that text will be displayed on the button when the switch is off. We will add colorOn to indicate that the button will show color when the switch is on, and colorOff to indicate that the button will show color when the switch is off. We’ll add the animationDuration method to delay the start of the animation and add onChanged to indicate when the user turns the switch on or off. When we run the application, we should get the screen output, as shown in the screenshot below.

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'}'); }, ()], (), (), (); }}Copy the code

In this article, I explain the “custom roll switch” of the basic structure by means of Flutter; You can modify this code as you choose. This is my little introduction to “custom roll-open User interaction” and is working with Flutter.

I hope this blog has provided you with enough information to try out a “custom scroll switch” in the Flutter project. We will show you what an introduction is. Show some properties, make a demo that works with a “custom scroll switch” and show the toggle interaction where the user presses the button, which then scrolls to the other side with an animated effect, And scrolling this switch will change the icon and text of the LITe_rolling_switch package in the FLUTTER application. Try this.