パッケージ、リポジトリ、アプリカテゴリを検索

like_button のカバー
パッケージ詳細v2.1.0

like_button

Like Buttonは、ツイッターのハートのように、何かを「いいね!」するときに似たアニメーション効果を持つボタンを作成できるFlutterライブラリです。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
3.2万
いいね数
1420
Pub ポイント
150

パッケージをインストール

flutter pub add like_button

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

LikeButtonは、Twitterのハートアニメーションを想起させる効果を持つアニメーション付きいいねボタンを提供するFlutterパッケージです。ユーザーがコンテンツに「いいね」を押してインタラクションできるようにし、滑らかなアニメーションとカスタマイズ可能なスタイルを備えています。このパッケージはAndroid、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、クロスプラットフォームのソーシャルメディアアプリに最適です。pub.dev経由で簡単に統合でき、アイコン、色、サイズ、アニメーションの動作をカスタマイズするオプションも提供しています。

用途

  • ソーシャルメディアアプリのインタラクション
  • コンテンツいいね機能
  • ユーザー参加度のトラッキング
  • インタラクティブUI要素
  • リアルタイムフィードバックメカニズム

主な機能

  • アニメーションハート型エフェクト
  • カスタマイズ可能なアイコンと色
  • クロスプラットフォーム互換性
  • pub.dev との簡単な統合
  • タップおよび長押しジェスチャーのサポート

適している対象

  • ソーシャルアプリを開発する開発者
  • 魅力的なボタンを探しているUIデザイナー
  • ユーザーインタラクションフィードバックを必要とするプロジェクト
  • コンテンツ共有または評価システムを備えたアプリ
  • Flutter初心者がアニメーションを探求しています

注意事項

  • 追加の状態管理が必要になる場合があります
  • 低スペックデバイスにおけるアニメーションのパフォーマンス
  • 基本的なスタイリングを超えるカスタマイズは限られている
  • 完全な機能を実現するには、外部の依存関係に依存します
  • 高頻度の使用ケースには最適化されていません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

like_button

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies QQ 群

Language: English | 中文简体

Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

Reference codes from jd-alexander and 吉原拉面 ,thank them for open source code.

Web Demo for LikeButton

How to use it.

the default effects is Icons.favorite

  LikeButton(),

and you can also define custom effects.

  LikeButton(
          size: buttonSize,
          circleColor:
              CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
          bubblesColor: BubblesColor(
            dotPrimaryColor: Color(0xff33b5e5),
            dotSecondaryColor: Color(0xff0099cc),
          ),
          likeBuilder: (bool isLiked) {
            return Icon(
              Icons.home,
              color: isLiked ? Colors.deepPurpleAccent : Colors.grey,
              size: buttonSize,
            );
          },
          likeCount: 665,
          countBuilder: (int count, bool isLiked, String text) {
            var color = isLiked ? Colors.deepPurpleAccent : Colors.grey;
            Widget result;
            if (count == 0) {
              result = Text(
                "love",
                style: TextStyle(color: color),
              );
            } else
              result = Text(
                text,
                style: TextStyle(color: color),
              );
            return result;
          },
        ),

The time to send your request

    LikeButton(
      onTap: onLikeButtonTapped,
    ),
  Future<bool> onLikeButtonTapped(bool isLiked) async{
    /// send your request here
    // final bool success= await sendRequest();

    /// if failed, you can do nothing
    // return success? !isLiked:isLiked;

    return !isLiked;
  }

parameters

parameter description default
size size of like widget 30.0
animationDuration animation duration to change isLiked state const Duration(milliseconds: 1000)
bubblesSize total size of bubbles size * 2.0
bubblesColor colors of bubbles const BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),)
circleSize final size of circle size * 0.8
circleColor colors of circle const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107)
onTap tap call back of like button,you can handle your request in this call back
isLiked whether it is liked(if it's null, always show like animation and increase like count) false
likeCount if null, will not show) null
mainAxisAlignment MainAxisAlignment for like button MainAxisAlignment.center
likeBuilder builder to create like widget null
countBuilder builder to create like count widget null
likeCountAnimationDuration animation duration to change like count const Duration(milliseconds: 500)
likeCountAnimationType animation type to change like count(none,part,all) LikeCountAnimationType.part
likeCountPadding padding for like count widget const EdgeInsets.only(left: 3.0)
countPostion top,right,bottom,left of like button widget CountPostion.right
countDecoration decoration of like count widget null
postFrameCallback call back of first frame with LikeButtonState null

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト