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

パッケージ詳細v1.0.2+1

animated_progress_button

ボタンをプロフェッショナルに仕上げる方法をお探しですか?このパッケージは、Pinterestからのすべてのアニメーションのインスピレーションを提供します。

30日間ダウンロード
9
いいね数
26
Pub ポイント
30

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

flutter pub add animated_progress_button

パッケージ概要

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

animated_progress_button パッケージは、Pinterest をインスピレーションとして、滑らかで視覚的に魅力的なアニメーションを標準ボタンに追加します。開発者がアイドル、ローディング、成功といった状態間をスムーズに遷移するインタラクティブなプログレスボタンを作成でき、カスタマイズ可能なビジュアルと動作をサポートしています。モダンなUIに最適で、フォーム送信やデータ処理などのアクション中にダイナミックなフィードバックを提供します。パッケージは軽量で簡単に統合可能であり、複雑なコードなしでユーザーインターフェースに洗練された仕上がりをもたらします。そのアニメーションスタイルは、応答性のあるフィードバックを通じてユーザーの関与を高めるように設計されています。

用途

  • 視覚フィードバック付きのフォーム送信
  • モバイルアプリにおける読み込み状態
  • インタラクティブなアクションボタン
  • eコマースアプリにおけるユーザー体験の向上
  • 魅力的なオンボーディングフローの作成

主な機能

  • Pinterestを彷彿とさせるアニメーションデザイン
  • カスタマイズ可能なボタン状態
  • アイドル/ロード/成功状態間のスムーズな遷移
  • Flutter ウィジェットとの簡単な統合
  • カスタムカラーおよびアイコンのサポート

適している対象

  • 洗練されたUI要素を求める開発者
  • 直感的なユーザーフィードバックを必要とするアプリ
  • デザイン重視のFlutterプロジェクト
  • インタラクティブなフォームを備えたモバイルアプリ
  • モダンで魅力的なインターフェースを目指すチーム

注意事項

  • 制限されたプラットフォーム固有のカスタマイズ
  • アクセシビリティ機能の組み込みサポートなし
  • アニメーションは低スペックデバイスのパフォーマンスに影響を与える可能性があります
  • 状態管理を手動で処理する必要があります
  • 非常に複雑なインタラクティブなワークフローには適していません

元の README

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

Animated Progress Button

Animated loading button to make you app button looks smoother. Take inspritation from Pinterest https://www.pinterest.com/pin/671177150707141229/

alt text

Usages

Create animatedButtonController for controlling the button.

import 'package:animated_progress_button/animated_progress_button.dart';

final AnimatedButtonController animatedButtonController = AnimatedButtonController();

Then customize the button like your own way Noted that you must call animatedButtonController.completed() after getting response from server in order to complete the button animation

AnimatedButton(
   controller: animatedButtonController,
   color: Colors.greenAccent,
   text: 'Log in',
   loadingText: 'Loading',
   loadedIcon: Icon(Icons.check, color: Colors.white),
   onPressed: () async {
       /// calling your API here and wait for the response.
       await Future.delayed(Duration(seconds: 5)); // simulated your API requesting time.
       animatedButtonController.completed(); // call when you get the response
       await Future.delayed(Duration(seconds: 2));
       animatedButtonController.reset(); // call to reset button animation
   },
),

カテゴリー

ソースリポジトリ

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

データはまだありません。