intervalprogressbar

パッケージ概要

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

水平および垂直の向きをサポートするカスタマイズ可能なインターバルプログレスバーを提供するFlutterパッケージです。鮮やかな色合いと複数のプログレステンプルを表示できる機能があり、セグメント化された進行状況や時間ベースのタスクを視覚的に表現するのに最適です。直感的で視覚的に魅力的なデザインとなっており、動的な進行状況フィードバックが必要なアプリケーションに適しています。Flutterのウィジェットシステムとシームレスに統合されており、最小限の設定で簡単に実装できます。

用途

アプリケーション内のセグメント化された進行状況の可視化
時間ベースのインターバルを表示する
ロード画面におけるユーザーのフィードバックの向上
アニメーション付きプログレスインジケーターの作成
マルチステージタスクの完了を表示

主な機能

水平および垂直方向のサポート
カラフルでカスタマイズ可能な外観
複数の進行間隔のサポート
Flutter との簡単な統合
スムーズなアニメーションの遷移

適している対象

タスクトラッキングアプリを開発する開発者
魅力的なUI要素を探しているデザイナー
時間ベースの進行状況の可視化を必要とするアプリ
複数ステップのプロセスを持つプロジェクト

注意事項

限定されたプラットフォーム固有のカスタマイズ
アクセシビリティ機能の組み込みサポートなし
複雑なレイアウトには追加のスタイル設定が必要になる場合があります
非常に高頻度の更新には最適化されていません

元の README

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

An interval progress widget for Flutter.

Preview

v1	v2

Depend on it

https://pub.dev/packages/intervalprogressbar

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

dependencies:
  intervalprogressbar: ^{last_version}

Features

Horizontal
Vertical
Circle
Interval Progress
Colorful

Getting Started

Usage

Widget buildHorizontal() => IntervalProgressBar(
    direction: IntervalProgressDirection.horizontal,
    max: 30,
    progress: 10,
    intervalSize: 2,
    size: Size(400, 10),
    highlightColor: Colors.red,
    defaultColor: Colors.grey,
    intervalColor: Colors.transparent,
    intervalHighlightColor: Colors.transparent,
    reverse: true,
    radius: 0);

Widget buildVertical() => Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [10, 29, 18, 27, 16, 15, 24, 3, 20, 10].map<Widget>((i) {
      return Padding(
          padding: EdgeInsets.only(right: 10),
          child: IntervalProgressBar(
              direction: IntervalProgressDirection.vertical,
              max: 30,
              progress: i,
              intervalSize: 2,
              size: Size(12, 200),
              highlightColor: Colors.red,
              defaultColor: Colors.grey,
              intervalColor: Colors.transparent,
              intervalHighlightColor: Colors.transparent,
              reverse: true,
              radius: 0));
    }).toList());

Widget buildCircle() => IntervalProgressBar(
      direction: IntervalProgressDirection.circle,
      max: 30,
      progress: 10,
      intervalSize: 2,
      size: Size(200, 200),
      highlightColor: Colors.red,
      defaultColor: Colors.grey,
      intervalColor: Colors.transparent,
      intervalHighlightColor: Colors.transparent,
      reverse: true,
      radius: 0,
      intervalDegrees: 5,
      strokeWith: 5,
    );

Property

Property	type	note
direction	`enum`	ProgressBar's direction, support `vertical` and `horizontal`
max	`int`	count of default blocks
progress	`int`	count of highlight blocks
intervalSize	`int`	size of interval blocks. when `vertical` direction, means height, when `horizontal` direction, means width
size	`Size`	size of this widget
highlightColor	`Color`	color of highlight blocks
defaultColor	`Color`	color of default blocks
intervalColor	`Color`	color of default intervals
intervalHighlightColor	`Color`	color of intervals which between highlight blocks
reverse	`bool`
radius	`int`
intervalDegrees	`double`	support for circle progress
strokeWith	`int`	support for circle progress

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

intervalprogressbar

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