패키지, 저장소 및 앱 카테고리 검색

like_button 표지
패키지 상세v2.1.0

like_button

좋아요 버튼은 좋아요를 누를 때 트위터의 하트와 유사한 애니메이션 효과를 가진 버튼을 만들 수 있는 플러터 라이브러리입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
3.2만
좋아요
1.4천
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

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트