appbar_elevation

パッケージ概要

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

appbar_elevation パッケージは、初期状態で画面の本文とフラットに揃えた AppBar を作成し、ユーザーが下方向にスクロールすると自動的に浮上（高さを増す）する Flutter ウィジェットを提供します。この挙動により、スクロール時にのみ AppBar を表示することで視覚的な階層を強化し、初期ビューを洗練されたものにします。長いコンテンツリストを持つアプリにおいて、動的な AppBar が UX を向上させる理想的な選択です。このウィジェットは軽量であり、ListView や CustomScrollView などの既存のスクロール可能なレイアウトにスムーズに統合可能です。滑らかな遷移をサポートし、複雑なカスタムロジックを必要としません。ソースコードは GitHub で公開されており、透明性と貢献を促進しています。

用途

スクロール可能なリスト内のダイナミックなAppBarの外観
繊細な浮き上がり効果でUIを強化する
モダンで応答性のあるアプリインターフェースの作成
スクロール中の視覚フィードバックの向上
AppBarのエレベーションロジックを簡素化する

主な機能

スクロール時に自動で上昇
初期のフラッシュ状態と本文
スムーズなトランジションアニメーション
軽量で統合が簡単
ListView および CustomScrollView と互換性があります

適している対象

洗練された AppBar の挙動を求める開発者
長いスクロール可能なコンテンツを持つアプリ
UIに焦点を当てたFlutterプロジェクト
ミニマリスティックなデザインの実装
ネイティブに近いスクロール効果を目指すプロジェクト

注意事項

スクロール可能な親コンテナが必要です
高度を超えるカスタマイズの範囲は限定的
プラットフォーム固有の動作をサポートしていません
デフォルト以外のテーマ用に追加のスタイリングが必要になる場合があります
静的またはスクロールしない画面には適していません

元の README

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

A Flutter Widget for an AppBar that is initially flush with the body and elevated when scrolled.

Usage

Use the ScrollActivatedAppBarElevation widget to wrap a Scaffold that contains a Scrollable view (e.g. ListView, CustomScrollView). The widget uses a NotificationListener to detect the scroll position and provides an appBarElevation value to be used.

Example

@override
Widget build(BuildContext context) {
  return ScrollActivatedAppBarElevation(
    builder: (BuildContext context, double appBarElevation) {
      return Scaffold(
        appBar: AppBar(
          elevation: appBarElevation,
        ),
        body: ListView(
          children: [
            // ...
          ],
        ),
      );
    },
  );
}

See example for full code.

License

BSD

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