[Flutter]ボタンのアニメーションをするパッケージ

どうも、ちょげ(@chogetarou)です。

ボタンのアニメーションをすることが出来るパッケージを紹介します。

パッケージ

「flutter_animated_button」パッケージを使うことで、ボタンのアニメーションをすることが出来ます。

このパッケージは、ボタンをタップした時のアニメーションを付けることの出来るパッケージです。

導入

パッケージを導入するには、まず「pubspec.yaml」に以下のコードを追加し、「pub get」します。

dependencies:
  flutter_animated_button: ^2.0.0

以下のコードで、インポートをします。

import 'package:flutter_animated_button/flutter_animated_button.dart';

使用

このパッケージを使用するには、AnimatedButtonウェジェットを使います。

            AnimatedButton(
              width: 200, //幅
              text: 'Button',　//テキスト
              onPress: () {}, //処理
              selectedTextColor: Colors.black, //タップ後の色
              transitionType: TransitionType.LEFT_TO_RIGHT,//アニメーションの設定
              textStyle: TextStyle(
                  fontSize: 28,
                  letterSpacing: 5,
                  color: Colors.deepOrange,
                  fontWeight: FontWeight.w300),
            ),

AnimatedButtonウェジェットは、ボタンをタップした際に、引数「transitionType」に指定したアニメーションで変化をします。

指定できるアニメーションには、次のようなものがあります。

まとめ

「flutter_animated_button」パッケージを使うことで、ボタンのアニメーションをすることが出来ます。

flutter_animated_button | Flutter package

A flutter package project which contains a collection of cool and beautiful button animations.

pub.dev