Flutterexperts

Animation is an exceptionally incredible and significant idea in Flutter. We can’t envision any mobile application without animations. At the point when you tap on a button or move starting with one page then onto the next page are for the most part animations. Animations upgrade user encounters and make the applications more interactive.

In this article, we will explore the ScaleTransition Widget In Flutter. We will execute a demo program of the scale transition and show you how to create scale transition in your flutter applications.

ScaleTransition class – widgets library – Dart API
Animates the scale of a transformed widget.api.flutter.dev

Table Of Contents::

ScaleTransition Widget

Constructor

Properties

Code Implement

Code File

Conclusion

---

---

ScaleTransition Widget:

At times, we might have to show animation when a widget is being shown. Assuming you need it to seem more modest first and afterward it expands steadily, you can utilize ScaleTransition.

This is only the widget that will animate itself while being drawn. It requires the scale parameter to be passed while the other two parameters — alignment and child are discretionary.

Constructor:

To utilize ScaleTransition, you need to call the constructor underneath:

const ScaleTransition({
  Key key,
  @required Animation<double> scale,
  this.alignment = Alignment.center,
  this.child,
})

In the Above Constructor, all attributes marked with @required must not be empty.

Properties:

There are some properties of ScaleTransition are:

• >Key: This property is used to show how one widget should replace another widget in a tree.
• > Animation<double> scale: This property will be the animation that controls the scale of the child. On the off chance that the current value of the scale animation is v, the child will be painted v times its typical size.
• > Alignment: This property will characterize the alignment of the beginning of the organized framework in which the scale happens, comparative with the size of the box. For instance, to set the beginning of the scale to the base center, you can utilize an arrangement of (0.0, 1.0).
• > Child: This property is used to define the widget below this widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

How to implement code in dart file :

You need to implement it in your code respectively:

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

To make the progress, we need to make a case of AnimationController and Animation<double> inside the StatefulWidget. Remember to utilize it with TickerProviderStateMixin while making Animation in Flutter App.

AnimationController _controller;
Animation<double> _animation;

In initState() method, we will add _controller ie equal to the AnimationController(). Inside AnimationController, we will add duration will be 2 seconds. Also, we will add vsyn, value, and repeat(reverse: true). In this method, we will add _animation is equal to the CurvedAnimation(). Inside, we will add parent and curve.

initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(
      seconds: 2,
    ),
    vsync: this,
    value: 0.1,
  )..repeat(reverse: true);
  _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.bounceIn,
  );
}

We need to dispose of the controller like underneath:

@override
dispose() {
  _controller.dispose();
  super.dispose();
}

In the body, we will add ScaleTransition() widget. In this widget, we will add scale means animation that controls the scale of the child. We will add _animation variable. We will add alignment as the center. It’s child property, we will add Row() widget. Inside the widget, we will add mainAxisAlignment and crossAxisAlignment was center. Also, we will add an image with height.

ScaleTransition(
  scale: _animation,
  alignment: Alignment.center,
  child: Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Image.asset("assets/logo.png",height: 150,),
      ],
    ),
  ),
),

When we run the application, we ought to get the screen’s output like the underneath screen video.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'package:flutter_scale_transition_demo/splash_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),
    );
  }
}


class ScaleTransitionWidgetDemo extends StatefulWidget {
  _ScaleTransitionWidgetDemoState createState() => _ScaleTransitionWidgetDemoState();
}

class _ScaleTransitionWidgetDemoState extends State<ScaleTransitionWidgetDemo>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(
        seconds: 2,
      ),
      vsync: this,
      value: 0.1,
    )..repeat(reverse: true);
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.bounceIn,
    );
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
        automaticallyImplyLeading: false,
        title: Text("Flutter ScaleTransition Widget Demo"),
      ),
      body: Container(
        child: ScaleTransition(
          scale: _animation,
          alignment: Alignment.center,
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset("assets/logo.png",height: 150,),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion:

In the article, I have explained the basic structure of the ScaleTransition Widget in a flutter; you can modify this code according to your choice. This was a small introduction toScaleTransition Widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the ScaleTransition Widget in your flutter projects. We will show you what the ScaleTransition Widget is?. Show a constructor and properties of the ScaleTransition Widget. Make a demo program for working ScaleTransition Widget 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.

---

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.

---