How To Aniamation A Button Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Before getting started there are few things need to know. In here I am using an AnimationController class and Animation to make this animation happen. In the Animation class, we define what is the actual animation which we need to use. In Flutter there are two main animation types

How To Aniamation A Button Using Flutter Android App

Aniamation A Button
Complete Code For Aniamation A Button In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  //Uses a Ticker Mixin for Animations
  Animation<double> _animation;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this,
        duration: Duration(
            seconds:
            2));
    _animation = Tween<double>(begin: 1.0, end: 2.5).animate(
        _animationController);

    _animation.addListener(() {
      setState(() {});
    });

    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController
            .reverse();
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[900],
        title: Text('Animating A Button'),
      ),
      body: Center(
        child: ButtonTheme(
          minWidth: 88.0 *
              _animation
                  .value,
          height: 36.0 *
              _animation
                  .value,
          child: RaisedButton(
            textColor: Colors.white,
            child: Text('Tap to Animate Button'),
            onPressed: () {
              _animationController
                  .forward();
            },
            color: Colors.deepPurple[900],
          ),
        ),
      ),
    );
  }
}

Related Post