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

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

scrollable_panel

ドラッグして展開し、その後コンテンツをスクロールできます。Googleマップアプリの「近隣スポット」パネルと似ています。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
84
いいね数
62
Pub ポイント
150

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

flutter pub add scrollable_panel

パッケージ概要

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

Flutterパッケージで、Googleマップアプリに見られる「近隣スポット」パネルの動作を模倣し、下部パネルをドラッグして開き、スクロールできるようにします。スムーズなドラッグ展開操作を提供し、展開されたパネル内のコンテンツのスクロールもサポートしています。詳細情報やリストをコンパクトでインタラクティブな形式で表示するのに最適です。このパッケージはAndroid、iOS、Web、macOS、Windows、Linuxプラットフォームすべてと互換性があります。

用途

  • マップアプリで場所の詳細を表示する
  • 近隣の観光スポットの一覧を表示しています
  • 拡張可能な情報パネルの作成
  • 折りたたみ可能なコンテンツセクションの実装
  • ドラッグ可能なボトムシートによるユーザーインタラクションの向上

主な機能

  • ドラッグして展開するジェスチャーのサポート
  • 組み込みのスクロール可能コンテンツ領域
  • クロスプラットフォーム互換性
  • スムーズなアニメーション遷移
  • カスタマイズ可能なパネルの高さと動作
  • すべての画面サイズに対応するレスポンシブデザイン

適している対象

  • マップおよび場所ベースのアプリケーション
  • コンテンツが豊富なボトムシート
  • 拡張可能なパネルを必要とするユーザーインターフェース
  • ネイティブに近いボトムシート体験を求める開発者
  • 直感的なジェスチャーによるナビゲーションを必要とするアプリ

注意事項

  • カスタムビジュアルのための追加のスタイル設定が必要になる場合があります
  • 非常に大きなデータセットでのパフォーマンスへの影響
  • 複雑なアニメーションのカスタマイズが限られている
  • ネストされたスクロールビューの取り扱いに注意が必要です
  • 単純な静的コンテンツの表示には適していない

元の README

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

scrollable_panel

pub package

drag to expand and then can scroll contents. similar "Nearby spots" panel on google map app.

https://pub.dev/packages/scrollable_panel

Panel Properties

Properties Data Type Description
builder ScrollableWidgetBuilder builder for inner panel view. ScrollableWidgetBuilder type define in draggable_scrollable_sheet.dart. provide PanelScrollController that extends ScrollController.
controller PanelController control panel from some interaction like button.
defaultPanelState PanelState set default panel state. (default value PanelState.open)
defaultPanelSize double set default panel height factor (default value 0.25)
minPanelSize double set minimum panel height factor. (default value 0)
maxPanelSize double set maximum panel height factor. (default value 1.0)
onOpen VoidCallback if non-null, this callback is called when panel state become open
onClose VoidCallback if non-null, this callback is called when panel state become close
onExpand VoidCallback if non-null, this callback is called when panel state become expand

PanelController actions

Action Data Type Description
open void open panel. panel animate to defaultPanelSize.
expand void expand panel. panel animate to maxPanelSize.
close void close panel. panel animate to minPanelSize.
animateTo double animate panel to value height.

Usage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PanelController _panelController = PanelController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('scrollable panel'),
      ),
      body: Stack(
        children: <Widget>[
          InkWell(
            onTap: () {
              _panelController.toDefault();
            },
            child: _FirstView(),
          ),
          ScrollablePanel(
            controller: _panelController,
            builder: (context, controller) {
              return SingleChildScrollView(
                controller: controller,
                child: _SecondView(),
              );
            },
          ),
        ],
      ),
    );
  }
}

TODO

  • ~write README.md and dartdoc~
  • ~null-safety support~
  • ~write test code~
  • add List<double> anchor property to use multi snapping point.

カテゴリー

ソースリポジトリ

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

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