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

GitHub 儲存庫NikhilVadoliya/FlutterAnimatedButton

FlutterAnimatedButton

一個包含一組酷炫且美觀按鈕動畫的 Flutter 套件專案。: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 ↗