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

loading_transition_button のカバー
パッケージ詳細v0.0.1

loading_transition_button

Flutter用のカスタマイズ可能な遷移ボタン。ロードプロセスを簡単にアニメーション化できます。

30日間ダウンロード
8
いいね数
36
Pub ポイント
70

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

flutter pub add loading_transition_button

パッケージ概要

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

Flutter向けのカスタマイズ可能な遷移ボタンで、ローディング処理のアニメーションを簡素化します。開発者が通常、ロード中、成功といった状態間で滑らかで視覚的に魅力的な遷移を作成できるように、直感的な設定を提供します。カスタムアニメーション、色、アイコン、テキスト変更をサポートしており、非同期操作中のユーザーフィードバックを強化するのに最適です。最小限のセットアップで、任意のFlutterアプリにスムーズに統合され、フォーム送信やデータ取得などのアクションにおけるUXを向上させます。

用途

  • ロード状態付きのフォーム送信
  • 認証フローの進行状況
  • データ取得インジケーター
  • 決済処理UI
  • オンボーディングステップの完了

主な機能

  • カスタマイズ可能なアニメーション遷移
  • 複数のボタン状態のサポート
  • カスタマイズ可能な色とアイコン
  • 非同期処理との簡単な統合
  • レスポンシブデザインの互換性

適している対象

  • スムーズな読み込みアニメーションを求める開発者
  • 明確なユーザーのフィードバックを必要とするアプリ
  • インタラクティブなボタンを備えたUI重視のアプリケーション
  • 状態管理パターンを使用するプロジェクト
  • UXの一貫性を重視するチーム

注意事項

  • 非同期ロジックの手動処理が必要です
  • 制限されたプラットフォーム固有のカスタマイズ
  • 組み込みのエラー状態サポートなし
  • 複雑なレイアウトには追加のスタイリングが必要になる場合があります
  • 高度な効果を実現するために、外部のアニメーションライブラリに依存しています

元の README

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

Loading Transition button

A Customizable transition button for Flutter

Getting Started

To use this package, add loading_transition_button as a dependency in your pubspec.yaml file.

dependencies:
 ...
 loading_transition_button: ^0.0.1

How to use

In your project add the following import:

import  'package:loading_transition_button/loading_transition_button.dart';

In order to use this widget you have to use a LoadingButtonController to handler the different states.

final _controller = LoadingButtonController();

This widget starts a loading animation once it's tapped or by using the controller. You can the launcher to init an error animation or stop the loading animation.

LoadingButton(
    color: Colors.blue,
    onSubmit: () => print('onSubmit'),
    controller: _controller,
    errorColor: Colors.red,
    transitionDuration: Duration(seconds: 1),
    child: Text(
    'Hit me!',
    style: Theme.of(context)
        .textTheme
        .bodyText1!
        .copyWith(color: Colors.white),
    ),
),

To support the transition to a different page to have to call the moveToScreen method

_controller.moveToScreen(
    context: context,
    page: SearchPage(),
    stopAnimation: true,
    navigationCallback: (route) =>
        Navigator.of(context).push(route),
),

navigationCallback will send you a new route that you can use for different navigation method like push or replace.

LoadingTransitionButton

AnimatedButton

カテゴリー

依存関係

依存関係一覧 1 件

ソースリポジトリ

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

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