6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-02-22

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

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

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

使用するパッケージ

完成品

ファイル名 ## 準備 パッケージを導入します。
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やクリック処理が必要ないのでとても簡単に実装できました。ただし、サーバーとの連携などの複雑な処理が必要になるとそうはいきません。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?