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

page_indicator のカバー
パッケージ詳細v0.4.1

page_indicator

Flutter PageViewインジケータ、使いやすく。場所とサイズをカスタム可能ですが、円形のみ。

30日間ダウンロード
464
いいね数
58
Pub ポイント
60

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

flutter pub add page_indicator

パッケージ概要

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

PageView ウィジェット用のシンプルでカスタマイズ可能な円形インジケーターを提供する Flutter パッケージです。ユーザーはサイズや位置を調整して現在のページ位置を簡単に表示でき、スクロール可能なインターフェースにおけるナビゲーションフィードバックを強化します。インジケーターは円形のみをサポートしており、洗練された一貫した視覚スタイルを保証します。オンボーディング画面、画像スライダー、または視覚的なページ追跡が必要な任意のカルーセルベースの UI に最適です。

用途

  • オンボーディング画面
  • 画像スライダー
  • カルーセルインターフェース
  • チュートリアルのウォークスルー
  • フォームウィザード
  • プロダクトショーケース

主な機能

  • 円形インジケータのみ
  • カスタマイズ可能なサイズ
  • 調整可能な位置
  • シンプルな API
  • Lightweight
  • 組み込みアニメーション

適している対象

  • 初心者向けFlutter開発者
  • シンプルなカルーセルデザイン
  • ミニマリストUI
  • PageView ナビゲーションインジケーター
  • モバイルアプリのオンボーディング

注意事項

  • 円形に限定
  • カスタムシェイプのサポートなし
  • 高度なスタイリングオプションはありません
  • 複雑なインジケーターには適していません
  • PageView統合に依存しています
  • ダークモードのカスタマイズなし

元の README

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

page_indicator

pub package

Preview

image

image

Install

see

  1. Depend on it Add this to your package's pubspec.yaml file:
dependencies:
  page_indicator: ^0.3.0
  1. Install it

You can install packages from the command line:

with Flutter:

flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

  1. Import it Now in your Dart code, you can use:
import 'package:page_indicator/page_indicator.dart';

Usage

see example file

or

PageIndicatorContainer(
  child: PageView(
    children: <Widget>[
      Text("1"),
      Text('2'),
      Text('3'),
      Text('4'),
    ],
    controller: controller,
  ),
  align: IndicatorAlign.bottom,
  length: 4,
  indicatorSpace: 20.0,
  padding: const EdgeInsets.all(10),
  indicatorColor: Colors.white,
  indicatorSelectorColor: Colors.blue,
  shape: IndicatorShape.circle(size: 12),
  // shape: IndicatorShape.roundRectangleShape(size: Size.square(12),cornerSize: Size.square(3)),
  // shape: IndicatorShape.oval(size: Size(12, 8)),
}
Force refersh state
final key = GlobalKey<PageContainerState>();
PageIndicatorContainer(
  key: key,
  // other ...
);

// force refersh
key.currentState.forceRefreshState();

Migration guide

0.1.x => 0.2.x

PageIndicatorContainer(
  ...
--  size: 12.0,
++  shape: IndicatorShape.circle(size: 12),
)

カテゴリー

ソースリポジトリ

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