Button Animation In Flutter

Button Animation In Flutter :

Screenshot :

Button Animation In Flutter :

add_to_button.dart

import 'package:flutter/material.dart';

class AddTodoButton extends StatefulWidget {
  final Function onClick;
  final bool editing;
  final String textName;

  const AddTodoButton({
    Key key,
    this.onClick,
    this.editing,
    this.textName
  }) : super(key: key);

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

class _AddTodoButtonState extends State<AddTodoButton>
    with SingleTickerProviderStateMixin {
  ButtonState buttonState = ButtonState.Small;
  AnimationController _controller;
  Animation<RelativeRect> _buttonAnimation;
  Animation<double> _buttonTextAnimation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(milliseconds: 450), vsync: this);

    _buttonTextAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(curve: Interval(0.7, 1.0), parent: _controller));
  }

  @override
  void didUpdateWidget(AddTodoButton oldWidget) {
    if (widget.editing != oldWidget.editing) {
      _controller.value == 1.0 ? _controller.reverse() : _controller.forward();
    }
    super.didUpdateWidget(oldWidget);
  }

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

  void _handleClick() {
    if (buttonState == ButtonState.Small) {
      _controller.forward();
      buttonState = ButtonState.Enlarged;
    } else {
      buttonState = ButtonState.Small;
      _controller.reverse();
    }
    widget.onClick();
  }

  @override
  Widget build(BuildContext context) {
    final Size size =  MediaQuery.of(context).size;
    final Size buttonSize = Size(75.0, 75.0);
    final double top = size.height - buttonSize.height;
    final double initialLeftRight = (size.width - buttonSize.width) / 2;

    _buttonAnimation = RelativeRectTween(
      begin: RelativeRect.fromLTRB(
          initialLeftRight, top - 25.0, initialLeftRight, 25.0),
      end: RelativeRect.fromLTRB(0.0, top, 0.0, 0.0),
    ).animate(CurvedAnimation(curve: Interval(0.0, 0.7), parent: _controller));

    return PositionedTransition(
      rect: _buttonAnimation,
      child: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[
              Color.fromRGBO(111, 94, 230, 1.0),
              Color.fromRGBO(127, 110, 235, 1.0),
            ],
          ),
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: _handleClick,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.add,
                  color: Colors.white,
                ),
                SizeTransition(
                  sizeFactor: _buttonTextAnimation,
                  axis: Axis.horizontal,
                  axisAlignment: -1.0,
                  child: Center(
                    child: Text(
                      widget.textName,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            )
          )
        )
      )
    );
  }
}

enum ButtonState { Small, Enlarged }

main.dart

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

void main() => runApp(new HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: Stack(
          children: <Widget>[
            AddTodoButton(
              textName: 'Flutter Tutorial',
              editing: true,
              onClick: () {},
            )
          ],
        ),
      ),
    );
  }
}

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