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

flutter_circular_progress_indicator のカバー
パッケージ詳細v0.0.3

flutter_circular_progress_indicator

Flutter ベautifulローディング

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
34
いいね数
6
Pub ポイント
125

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

flutter pub add flutter_circular_progress_indicator

パッケージ概要

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

Flutterアプリケーション向けに視覚的に魅力的な円形プログレスインジケーターで、ロード状態におけるユーザー体験を向上させるように設計されています。滑らかなアニメーションとカスタマイズ可能なスタイルを提供し、データフェッチやファイルアップロードなどのタスクの進行状況を示すのに最適です。このパッケージは軽量であり、モバイル、Web、デスクトップを含むすべての主要プラットフォームで互換性があります。pub.devを通じた簡単な統合により、開発者は複雑なセットアップなしに洗練されたローディングコンポーネントを利用できます。

用途

  • フォーム内の読み込みインジケーター
  • データ取得の進行状況
  • ファイルのアップロード/ダウンロードの追跡
  • アプリのスプラッシュ画面
  • 認証フローの進行状況
  • バックグラウンドタスクの監視

主な機能

  • 滑らかなアニメーション円形デザイン
  • カスタマイズ可能な色とストローク幅
  • Flutter との簡単な統合
  • クロスプラットフォーム互換性
  • 確定モードと不定モードの両方をサポートしています
  • 軽量でパフォーマンスに優れる

適している対象

  • 魅力的なロードUIを求める開発者
  • 一貫した進行状況フィードバックを必要とするアプリ
  • 複数プラットフォーム向けのプロジェクト
  • UI中心のFlutterアプリケーション
  • シンプルでありながら洗練されたローディングコンポーネント

注意事項

  • 円形のみに制限されています
  • 組み込みのテキストラベルなし(カスタムウィジェットのラッピングが必要)
  • ブランドの整合性を確保するため、追加のスタイリングが必要になる場合があります
  • 円形以外の進行状況要件には適していません
  • 更新のために外部のGitHubリポジトリに依存しています

元の README

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

Load your data more beautiful.

Fixed Bugs

V 0.0.2 : setState error fixed

Installation

You just need to add flutter_circular_progress_indicator as a dependency in your pubspec.yaml file.

dependencies:
  flutter_circular_progress_indicator: ^0.0.2

Getting started

All features you can use :

complete

Usage

normal_circular

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

spin_duration

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      spinDuration: Duration(seconds: 3),
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

spin

CircularProgressInd().normalCircular(
                    height: 55,
                    width: 55,
                    valueColor: Colors.deepOrange,
                    valueWidth: 5,
                    isSpining: true,
                  );

spin_reverse

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      value: .4,
                      isSpining: true,
                      hasSpinReverse: true,
                      valueColor: Colors.pink,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      valueWidth: 6);

circle_background

CircularProgressInd().normalCircular(
                      height: 55,
                      width: 55,
                      isSpining: true,
                      secondaryColor: Colors.deepPurple[900],
                      secondaryWidth: 10,
                      backgroundColor: Colors.amber,
                      padding: EdgeInsets.all(10),
                      backgroundBorder:
                          Border.all(color: Colors.deepPurple, width: 3),
                      valueWidth: 6);

rectangle_background

 CircularProgressInd().normalCircular(
                      height: 80,
                      width: 80,
                      isSpining: true,
                      value: .01,
                      secondaryColor: const Color.fromARGB(255, 23, 82, 27),
                      secondaryWidth: 10,
                      backgroundShape: BoxShape.rectangle,
                      backgroundRadius: 10,
                      backgroundColor: Colors.green,
                      padding: EdgeInsets.all(10),
                      valueColor: Colors.green[200],
                      backgroundBorder: Border.all(
                          color: const Color.fromARGB(255, 23, 82, 27),
                          width: 3),
                      valueWidth: 6);

カテゴリー

ソースリポジトリ

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

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