coordinator_layout

パッケージ概要

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

coordinator_layout パッケージは、Flutter アプリケーションにおける折りたたみヘッダーの挙動を管理するためのウィジェットとレイアウトのセットを提供します。Android の CoordinatorLayout を靈感としており、ヘッダーと下部コンテンツ間のスムーズで調整されたスクロール操作を可能にします。このライブラリは、ユーザーがスクロールする際にヘッダーが折りたたまれたりコンテンツが表示されたりするような、ダイナミックで応答性のあるUIを作成するのに最適です。モバイル、Web、デスクトップなど複数のプラットフォームをサポートしており、クロスプラットフォーム開発に非常に柔軟です。既存の Flutter ウィジェットとシームレスに統合され、ネイティブのようなスクロール体験を提供します。

用途

折りたたみ可能なアプリバーの実装
動的スクロール可能なインターフェースの作成
応答性のあるヘッダーのレイアウトを構築する
スムーズスクロールによるユーザーエクスペリエンスの向上
複雑なスクロール動作の設計

主な機能

折りたたみヘッダーのアニメーション
クロスプラットフォーム互換性
ScrollController との統合
ネストされたスクロールのサポート
カスタマイズ可能なレイアウト動作

適している対象

Material Design アプリを開発する開発者
高度なスクロールエフェクトを求めるUIデザイナー
動的なヘッダー操作を必要とするアプリ
クロスプラットフォーム Flutter プロジェクト
複雑なスクロールUIパターン

注意事項

スクロールコントローラーの理解が必要です
シンプルなレイアウトの複雑さを増す可能性があります
高度なUIデザインに最適
パフォーマンスはウィジェットのネストに依存します
コアFlutterウィジェットと比較してドキュメントが限られている

元の README

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

a Library contains widget/layout to handle collapsing header behavior

Example

CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    headers: [
        SliverCollapsingHeader(
            builder: (context, offset, diff) {
                return ...;
            },
        ),
    ],
    body: Container(height: null, child: buildBody(context)),
),

Fit content

CoordinatorLayout(
    headerMaxHeight: 200,
    headerMinHeight: kToolbarHeight + MediaQuery.of(context).padding.top,
    header:[ 
        Builder(builder: (context) {
            return SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverSafeArea(
                top: false,
                sliver: SliverCollapsingHeader(
                builder: (context, offset, diff) {
                    return ...;
                },
                ),
            ),
            );
        }),
    ],
    body: Container(height: null, child: buildBody(context)),
),

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