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

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

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

## 使用するパッケージ
https://pub.dev/packages/like_button
## 完成品
<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2534543/c40297b6-80ef-31c2-f272-1bdf4660f2fb.gif">
## 準備
パッケージを導入します。

```dart:pubspec.yaml
like_button: ^2.0.4
```

準備完了
## 開始

```dart: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()がパッケージのウィジェットです。

:::note warn
各々の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の使い方

```dart:
LikeButton(
      onTap: onLikeButtonTapped,
    ),
```

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

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

    return !isLiked;
  }
```

onTapの型はbool型であることに注意してください。
## 最後に
providerやクリック処理が必要ないのでとても簡単に実装できました。ただし、サーバーとの連携などの複雑な処理が必要になるとそうはいきません。