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

パッケージ詳細v0.0.2

page_slider

水平方向にページをスライドする簡単なFlutterウィジェットです。Material Stepperウィジェットに似たウィザードやオンボーディングフロー用ですが、特定のUIは必要ありません。任意のウィジェットをスライド可能なページとして使用できます。

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

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

flutter pub add page_slider

パッケージ概要

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

PageSlider は、水平方向のページナビゲーションを可能にする軽量な Flutter ウィジェットで、オンボーディングフローまたはウィザード風インターフェースに最適です。任意のカスタムウィジェットをスライド可能なページとして使用でき、特定のUIスタイルを強制せずに柔軟性を提供します。Material Stepper をインスピレーションとしていますが、より汎用的で、スムーズな遷移と直感的なスワイプ操作をサポートしています。最小限のセットアップでガイド付きユーザー体験を作成するのに最適です。

用途

  • オンボーディングチュートリアル
  • ウィザード形式のフォーム
  • 製品のウォークスルー
  • インタラクティブガイド
  • カスタムカルーセル表示

主な機能

  • 水平スワイプナビゲーション
  • 任意のウィジェットをページとしてサポート
  • 最小のスタイリング制約
  • スムーズなトランジションアニメーション
  • 既存のウィジェットとの簡単な統合

適している対象

  • シンプルなオンボーディングフロー
  • 柔軟なUIウィザード
  • カスタムインタラクティブコンテンツ
  • 軽量のカルーセルが必要
  • 迅速なUIプロトタイプシーケンス

注意事項

  • 組み込みのインジケーターまたはページネーションなし
  • スクロール物理のカスタマイズが限定的
  • 多数のページに対して最適化されていません
  • 状態管理を手動で処理する必要があります
  • 小規模から中規模のコンテンツセットに最適

元の README

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

flutter_page_slider

Pub

A simple Flutter widget that slides through pages horizontally. Use-cases could be wizards or onboarding flows similar to the Material Stepper widget, but without a particular UI - any widget can be a page to slide through.

Here's a demo of the example app:

PageSlider demo app

How to use

First, create the PageSlider widget with a GlobalKey<PageSliderState> and the child widgets which you want to slide through. Then, control the active page using the global key to address the page slider state like so:

class Demo extends StatefulWidget {
  Demo({Key key}) : super(key: key);
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  GlobalKey<PageSliderState> _sliderKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        PageSlider(
          key: _sliderKey,
          pages: [
            Text('Page 0'),
            Text('Page 1'),
            Text('Page 2'),
          ]
        ),
        RaisedButton(
          onPressed: _sliderKey.currentState.next,
          child: Text('Next')
        ),
        RaisedButton(
          onPressed: _sliderKey.currentState.previous,
          child: Text('Previous')
        ),
      ]
    );
  }
}

カテゴリー

ソースリポジトリ

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

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