Animated Custom Switch In Flutter

Shaiq khan
Nov 13, 2020 · 6 min read
Animated Custom Switch In Flutter

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.

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: ^2.2.3
supercharged: ^1.11.1

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()

_innerBoxDecoration

Let’s we will explore _outerBoxDecoration()

_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:

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.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.