Flutterexperts

Flutter, as of now, gives default animation both to android and ios. Nonetheless, on the off chance that you need to add a couple of customizations and animations to the switch, then there aren’t numerous alternatives with the default switch. Here, I will keep in touch with one of the approaches to make a customized switch and add animations.

We will focus on the most direct approach to add animations to your application. You don’t need to be a specialist in animations or animation terminology to add animations to your application.

In this article, we will explore the Animated Custom Switch In Flutter. We will also implement a demo of an animated custom switch using the simple_animations package and supercharged_package in your flutter applications.

simple_animations | Flutter Package
Simple Animation is a powerful framework to create beautiful custom animations in no time. 💪 Fully tested 📝 well…pub.dev

Table Of Contents::

Custom Switch

Properties

Implementation

Code Implement

Code File

Conclusion

---

---

Custom Switch

Custom Switch button with alluring animation made to permit you to customize colors, symbols, and other restorative substance. Deal with the widget states similarly you do with the classical material’s switch widget.

We basically characterize the animation by utilizing a MultiTrackTween (Animatable that tween multiple properties without a moment’s delay). We pass this tween into a ControlledAnimation (widget for straightforward tween-based animations).

Demo Module ::

This “form-control” acts as a switch box, but it has a cool switch animation. This video shows how to create a custom animated switch in a flutter and show how to custom switch will work in your flutter applications with custom animation, and then they will be shown on your device.

Properties

During the animation, it changes four different properties:

• > left padding: In this property is moving from left to right,
• > rotation: In this property is from -360° (=-2*pi) to 0° (=0pi),
• > color: In this property, we will change color red to blue,
• > text string: In this property is changing “off” to “on” in the middle of the animation.

Also, we need the switched state (Is the switch box currently switched?) as an input property to control the animation.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

simple_animations: ^latest version
supercharged: ^latest version

Step 2: Import

import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

On this screen, an animated custom switch when the enabling button converts red color to blue color and labels text Enable Custom Switch.

We will bind the switched input property to ControlledAnimation’s control and startPosition property:

control: switched
    ? CustomAnimationControl.PLAY
    : CustomAnimationControl.PLAY_REVERSE,
startPosition: switched ? 1.0 : 0.0,

The switch box gets switched at whatever point it guarantees that it plays the animation forward at stops toward the end. At the point when it gets unswitched, it animates in reverse and stops toward the start.

The property startPosition indicates the underlying animation position of the widget. On the off chance that the switch box is a switch toward the starting, we need our underlying animation position toward the end (1.0 ).

Create a new dart file called custom_switch.dart inside the lib folder.

class CustomSwitch extends StatelessWidget {
  final bool switched;

  CustomSwitch({this.switched});

  @override
  Widget build(BuildContext context) {
    var tween = MultiTween<_SwitchBoxProps>()
      ..add(_SwitchBoxProps.paddingLeft, 0.0.tweenTo(60.0),     1.seconds)
      ..add(_SwitchBoxProps.color, Colors.red.tweenTo(Colors.blue), 1.seconds)
      ..add(_SwitchBoxProps.text, ConstantTween("OFF"), 500.milliseconds)
      ..add(_SwitchBoxProps.text, ConstantTween("ON"), 500.milliseconds)
      ..add(_SwitchBoxProps.rotation, (-2 * pi).tweenTo(0.0),               1.seconds);

    return CustomAnimation<MultiTweenValues<_SwitchBoxProps>>(
      control: switched
          ? CustomAnimationControl.PLAY
          : CustomAnimationControl.PLAY_REVERSE,
      startPosition: switched ? 1.0 : 0.0,
      duration: tween.duration * 1.2,
      tween: tween,
      curve: Curves.easeInOut,
      builder: _buildSwitchBox,
    );
  }
}

By restricting the switched state to the control, the property makes the animation instinctively pivot when the user is connecting while at the same time animating.

Presently it’s an ideal opportunity to actualize the genuine switch box widgets. The second boundary animation is a Map that contains all our tweened properties.

Let’s we will describe the _buildSwitchBox widget:

Widget _buildSwitchBox(
    context, child, MultiTweenValues<_SwitchBoxProps> value) {
  return Container(
    decoration: _outerBoxDecoration(value.get(_SwitchBoxProps.color)),
    width: 100,
    height: 40,
    padding: const EdgeInsets.all(3.0),
    child: Stack(
      children: [
        Positioned(
            child: Padding(
              padding:
              EdgeInsets.only(left:    value.get(_SwitchBoxProps.paddingLeft)),
              child: Transform.rotate(
                angle: value.get(_SwitchBoxProps.rotation),
                child: Container(
                  decoration:
                  _innerBoxDecoration(value.get(_SwitchBoxProps.color)),
                  width: 30,
                  child: Center(
                      child: Text(value.get(_SwitchBoxProps.text),
                          style: labelStyle)),
                ),
              ),
            ))
      ],
    ),
  );
}

In this widget, we will use MultiTweenValue, transform, and two BoxDecorations are first one is_outerBoxDecoration() and second one is _innerBoxDecoration().

Let’s we will explore _innerBoxDecoration()

Let’s we will explore _outerBoxDecoration()

Finally, you will be run the code, and then the output comes at Custom Switch will animate at forward and reverse both.

Code File

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_custom_switch_demo/custom_switch.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';



class SwitchButton extends StatefulWidget {
  @override
  _SwitchButtonState createState() => _SwitchButtonState();
}

class _SwitchButtonState extends State<SwitchButton> {
  bool enableSwitch = false;

  void _toggle() {
    setState(() {
      enableSwitch = !enableSwitch;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white70,
      appBar: AppBar(
        title: Text("Flutter Animated Custom Switch Demo"),
        centerTitle: true,
        automaticallyImplyLeading: false,
      ),
      body: GestureDetector(
        onTap: _toggle,
        behavior: HitTestBehavior.translucent,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 20.0),
                child: Text(
                  "Enable Custom Switch",
                  textScaleFactor: 1.3,
                ),
              ),
              SizedBox(height: 10,),
              CustomSwitch(switched: enableSwitch),

            ],
          ),
        ),
      ),
    );
  }

}

Conclusion :

In the article, I have explained the structure of Animated Custom Switch; you can modify this code according to your choice. This was a small introduction to Animated Custom 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 Animated Custom Switch in your flutter projects. This is a demo program to use simple animations and supercharged packages in a flutter and show how animated custom switch will work 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 Animated Custom Switch Demo:

flutter-devs/flutter_custom_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.

---