Zenn
👌

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

2022/02/21に公開
Flutter
tech

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

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

使用するパッケージ

https://pub.dev/packages/like_button

完成品

準備

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

pubspec.yaml
like_button: ^2.0.4

準備完了

開始

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

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

Discussion