[Flutter]アニメーション付きいいねボタンを簡単に実装！

簡単に「いいね」ボタンを実装します！

今回は、アニメーションのある「いいね」ボタン実装します。
アニメーションと聞くとめんどくさいような印象を持つかもしれませんが、便利なパッケージがあるのでご安心ください。

・この記事では、サーバーと組み合わせた「いいね」ボタンの実装方法は紹介していませんのでご注意ください。

使用するパッケージ

完成品

準備

パッケージを導入します。

pubspec.yaml

like_button: ^2.0.4

準備完了

開始

pubspec.yaml

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:like_button/like_button.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("いいね"),
        ),
        body: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              bool isLiked = false;
              return Card(
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                    Text(
                      index.toString() + "番目",
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 20,
                      ),
                    ),
                    LikeButton(likeCount: 665, isLiked: isLiked)
                  ]));
            }));
  }
}

LikeButton()がパッケージのウィジェットです。

各々のListに対して, isLikedを生成するので、bool isLiked = false;の位置が重要です。

LikedButton()の使い方一覧

パラメータ	説明	初期値
size	大きさ	30.0
animationDuration	isLikedの状態を変更するアニメーション期間	const Duration(milliseconds: 1000)
bubblesSize	泡の合計サイズ	size*2.0
bubblesColor	泡の大きさ	Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSize	円の最終的なサイズ	size*0.8
circleColor	円の色	const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap	いいねボタンをクリックすると、このコールバックでリクエストを処理できる
isLiked	いいねされたかどうかの判定(true/false)	false
likeCount	任意の数の表示(nullの場合表示しない)	null
mainAxisAlignment	いいねボタンのMainAxisAlignment	MainAxisAlignment.center
likeBuilder	ウィジェットのように作成するビルダー	null
countBuilder	カウントウィジェットのように作成するビルダー	null
likeCountAnimationDuration	カウントのように変化するアニメーションの期間	const Duration(milliseconds: 500)
likeCountAnimationType	カウント（none、part、all）のように変更するアニメーションタイプ	LikeCountAnimationType.part
likeCountPadding	カウントウィジェットのパディング	const EdgeInsets.only(left: 3.0)
countPostion	カウント表示の位置(上、右、下、左)	CountPostion.right
countDecoration	カウントウィジェットの装飾	null

onTapの使い方

LikeButton(
      onTap: onLikeButtonTapped,
    ),

Future<bool> onLikeButtonTapped(bool isLiked) async{
    /// ここでリクエストを送る
    // final bool success= await sendRequest();

    /// 失敗した場合、何もしない
    // return success? !isLiked:isLiked;

    return !isLiked;
  }

onTapの型はbool型であることに注意してください。

最後に

providerやクリック処理が必要ないのでとても簡単に実装できました。ただし、サーバーとの連携などの複雑な処理が必要になるとそうはいきません。