Button Click Animation (Zoom In – Zoom Out) In Flutter

Button Click Animation (Zoom In – Zoom Out) In Flutter :

Button Click Animation :Button Click Animation means animation when the particular button is clicked.the changes made after the button is clicked its called button click animation.

in this flutter tutorial we are discuss about how the button click animation works.before start few things to know about this tutorial.in this button click animation tutorial i am using the animation controller class to make an animation when button is clicked

there are two types animation available in flutter

tween animation :

in this type you have to define the staring and ending position of ui widget.in this you can set the timing between animation

Physics based animation :

it is different button click animation then tween animation

here i am using the button click animation which name is zoom in and zoom out.the animation zoom in and zoom out performed when someone click the button.i set the duration of 200 milliseconds for the animation controller

Button Click Animation

ease_in_widget.dart

import 'package:flutter/material.dart';

class EaseInWidget extends StatefulWidget {
  final Widget child;
  final Function onTap;
  const EaseInWidget({Key key, @required this.child, @required this.onTap})
      : super(key: key);
  @override
  State<StatefulWidget> createState() => _EaseInWidgetState();
}

class _EaseInWidgetState extends State<EaseInWidget>
    with TickerProviderStateMixin<EaseInWidget> {
  AnimationController controller;
  Animation<double> easeInAnimation;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        vsync: this,
        duration: Duration(
          milliseconds: 200,
        ),
        value: 1.0);
    easeInAnimation = Tween(begin: 1.0, end: 0.95).animate(
      CurvedAnimation(
        parent: controller,
        curve: Curves.easeIn,
      ),
    );
    controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (widget.onTap == null) {
          return;
        }
        controller.forward().then((val) {
          controller.reverse().then((val) {
            widget.onTap();
          });
        });
      },
      child: ScaleTransition(
        scale: easeInAnimation,
        child: widget.child,
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

rounded_button.dart

import 'package:flutter/material.dart';
import 'ease_in_widget.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function() onTap;
  final IconData iconData;

  const RoundedButton({Key key, this.text, this.iconData, @required this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return EaseInWidget(
        onTap: onTap,
        child: Material(
            child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(12.0),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black12.withOpacity(0.1),
                          blurRadius: 12.0,
                          spreadRadius: 0.1)
                    ]),
                child: text != null
                    ? Text(
                        text,
                        style: Theme.of(context).textTheme.title.copyWith(
                              color: Colors.white,
                            ),
                      )
                    : Icon(
                        iconData,
                        color: Colors.white,
                      ))));
  }
}

main.dart

import 'package:flutter/material.dart';
import 'rounded_button.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Button Animation'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Container(
                height: 40,
                margin: EdgeInsets.all(10),
                child: RoundedButton(text: "Button Animation", onTap: () {}))));
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in