簡単に「いいね」ボタンを実装します!
今回は、アニメーションのある「いいね」ボタン実装します。
アニメーションと聞くとめんどくさいような印象を持つかもしれませんが、便利なパッケージがあるのでご安心ください。
・この記事では、サーバーと組み合わせた「いいね」ボタンの実装方法は紹介していませんのでご注意ください。
使用するパッケージ
完成品
## 準備 パッケージを導入します。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やクリック処理が必要ないのでとても簡単に実装できました。ただし、サーバーとの連携などの複雑な処理が必要になるとそうはいきません。