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

GitHub 저장소NikhilVadoliya/FlutterAnimatedButton

FlutterAnimatedButton

멋지고 아름다운 버튼 애니메이션 모음이 포함된 플러터 패키지 프로젝트입니다. :rocket:

FlutterAnimatedButton 프로젝트 이미지
스타
31
포크
11
최근 푸시(UTC)
2024. 12. 13.
프로젝트 상태
활성

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

flutter_animated_button :dizzy: :champagne:


Installing

Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_animated_button: <latest_version>
Import it

Now in your Dart code, you can use:

import 'package:flutter_animated_button/flutter_animated_button.dart';



Contribute to Development

Your contribution will help improve the plugin

Buy Me A Coffee

Usage

You can override the animationDuration of animation of the button by setting its duration in each AnimatedButton class, also you can get animationController for animation status and animation value during the animation. You can change text style, selected textColor and background color of button by textStyle,selectedTextColor,backgroundColor and selectedBackgroundColor. If you want revert animation when button already select then you can do it by isReverse property.

 AnimatedButton(
                width: 200,
                text: 'SUBMIT',
                selectedTextColor: Colors.black,
                transitionType: TransitionType.BOTTOM_TO_TOP,
                textStyle: TextStyle(
                    fontSize: 28,
                    letterSpacing: 5,
                    color: Colors.deepOrange,
                    fontWeight: FontWeight.w300),
              )


Animation On
  • AnimatedOn.onTap
  • AnimatedOn.onHover


Used in App



Some new animation in latest version :zap:

  • Animations : LEFT_TOP_ROUNDER, LEFT_BOTTOM_ROUNDER, BOTTOM_CENTER_ROUNDER, CENTER_ROUNDER...etc
  • Selected button text support

. .

Available Animations :dizzy:

AnimatedButton

  AnimatedButton(
              height: 70,
              width: 200,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              transitionType: TransitionType.BOTTOM_TO_TOP,
              textStyle: GoogleFonts.nunito(
                  fontSize: 28,
                  letterSpacing: 5,
                  color: Colors.white,
                  fontWeight: FontWeight.w300),
            ),
  AnimatedButton(
             height: 70,
             width: 200,
             text: 'SUBMIT',
             isReverse: true,
             selectedTextColor: Colors.black,
             transitionType: TransitionType.LEFT_TO_RIGHT,
             textStyle: submitTextStyle,
             backgroundColor: Colors.black,
             borderColor: Colors.white,
             borderRadius: 0,
             borderWidth: 2,
           ),
    AnimatedButton(
              height: 70,
              width: 200,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              transitionType: TransitionType.LEFT_TO_RIGHT,
              textStyle: submitTextStyle,
              backgroundColor: Colors.black,
              borderColor: Colors.white,
              borderRadius: 50,
              borderWidth: 2,
            ),

AnimatedButton.strip

  AnimatedButton.strip(
              width: 200,
              height: 70,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              stripTransitionType: StripTransitionType.LEFT_TO_RIGHT,
              selectedBackgroundColor: Colors.white,
              textStyle: GoogleFonts.nunito(
                  fontSize: 28,
                  letterSpacing: 5,
                  color: Colors.white,
                  fontWeight: FontWeight.w300),
            ),


Available Animations Types :sparkles:


AnimatedButton
LEFT_TO_RIGHT CENTER_LR_IN LEFT_TOP_ROUNDER RIGHT_TOP_ROUNDER CENTER_ROUNDER
RIGHT_TO_LEFT CENTER_TB_IN LEFT_CENTER_ROUNDER RIGHT_CENTER_ROUNDER -
TOP_TO_BOTTOM CENTER_LR_OUT LEFT_BOTTOM_ROUNDER TOP_CENTER_ROUNDER -
BOTTOM_TO_TOP CENTER_TB_OUT RIGHT_BOTTOM_ROUNDER BOTTOM_CENTER_ROUNDER -
AnimatedButton.strip
LEFT_TO_RIGHT
RIGHT_TO_LEFT
TOP_TO_BOTTOM
BOTTOM_TO_TOP


Bugs or Requests :bug:

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.


License :closed_lock_with_key:

MIT License

Nikhil Vadoliya GitHub avatar
GitHub 작성자

Nikhil Vadoliya ↗

I am a mobile developer who loves to write Native Android as well as Flutter mobile applications.

WIO Bank Abu Dhabi, UAE
언어DartC++CMakeHTMLSwiftCRubyKotlinObjective-C

분류

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 2 개

  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}

프로젝트에 맞는 저장소를 선택하려면?

사용 목적에 따라 검색하고 개발 활동을 비교한 뒤 원본 저장소에서 요구 사항을 확인하세요.

  1. 이름, 작성자 또는 설명으로 검색하고 기술 주제로 범위를 좁힙니다.
  2. 스타, 포크, 최근 푸시를 함께 비교하세요. 스타는 관심의 지표이며 품질을 보장하지 않습니다.
  3. 사용하기 전에 GitHub에서 README, 라이선스, Issues를 확인하세요.

출처 및 관리

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗