搜尋套件、儲存庫與 APP 分類

like_button 封面
套件詳情v2.1.0

like_button

Like Button 是一個 Flutter 庫,可讓您建立具有類似 Twitter 心形動畫效果的按鈕,當您點讚時會出現。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
3.2萬
喜歡數
1420
Pub 分數
150

安裝套件

flutter pub add like_button

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

LikeButton 是一個 Flutter 套件,提供一種帶有動畫效果的讚按鈕,其效果讓人聯想到 Twitter 的心形動畫。它讓使用者能夠透過點讚與內容互動,具備流暢的動畫與可自訂樣式。此套件支援 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

所屬分類

原始碼儲存庫

使用此套件的專案