stacked_listview

パッケージ概要

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

StackedListView は、Flutter のウィジェットで、子要素を1つずつ重ねて表示し、最初のアイテムが完全に表示され、ユーザーがスクロールするにつれて後のアイテムが部分的に重なります。アイテムが互いに積み重なっているように見える視覚的な効果を生み出し、動的でレイヤードされたリストインターフェースを作成するのに最適です。このパッケージは、Android、iOS、Web、macOS、Windows、Linux を含むすべての主要プラットフォームをサポートしており、クロスプラットフォームアプリケーションに非常に柔軟に対応できます。複雑なカスタムペイントなしで独自のリストアニメーションを実現したい開発者向けに設計されています。

用途

レイヤードスクロール可能なリストの作成
奥行きを備えたカードベースのUIの設計
視覚的に豊かなフィードレイアウトの構築
インタラクティブなスタックアイテムの遷移を実装する
視覚的ヒントによるモバイルアプリのナビゲーション向上

主な機能

スタックされた子要素のレンダリング
レイヤー効果付きのスムーズスクロール
クロスプラットフォーム互換性
pub を通じたシンプルな統合
カスタマイズ可能なスタック動作
組み込みアニメーションサポート

適している対象

視覚的な奥行きを求めるUIデザイナー
現代のアプリインターフェースを構築する開発者
カードまたはタイムライン形式のコンテンツを持つアプリ
繊細なアニメーションリスト効果を必要とするプロジェクト
Flutterの初心者が高度なリストパターンを探求する

注意事項

多数のアイテムがあるとパフォーマンスに影響する可能性があります
慎重なレイアウト計画が必要です
中程度のアイテム数に最適
スタックを超えるカスタマイズは限られている
濃密なデータリストには適していない
低性能デバイスでのテストが必要です

元の README

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

A Stacked ListView

Video

v1.0.4 Breaking Change

onRemove(int index) changed to onRemove(int index, AxisDirection dir)
beforeRemove(int index) changed to beforeRemove(int index, AxisDirection dir)

🎉🎉 Yes, Now you can know the user's swipe direction for each list item 🎉🎉

Install

flutter pub add stacked_listview

Example code:

Scaffold(
  appBar: AppBar(),
  backgroundColor: Colors.black,
  body: SafeArea(
    child: StackedListView(
      padding: EdgeInsets.only(left: 20, right: 20, top: 50),
      itemCount: data.length,
      itemExtent: itemHeight,
      heightFactor: 0.7,
      fadeOutFrom: 0.7,
      onRemove: (index, direction) {
        setState(() {
          data.removeAt(index);
        });
      },
      beforeRemove: (index, direction) async {
        return await showDialog<bool>(
          context: context,
          builder: (_) => AlertDialog(
            title: Text('Delete ${data[index]} ?'),
            actions: [
              TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('Cancel')),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, true),
                child: Text('Delete'),
              ),
            ],
          ),
        ).then((value) => value == true);
      },
      builder: (_, index) {
        return Container(
          width: double.infinity,
          height: itemHeight,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            color: Colors.white,
            boxShadow: [
              BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 10),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                data[index],
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              Text('Slide to left or right to delete'),
            ],
          ),
          padding: EdgeInsets.all(20),
        );
      },
    ),
  ),
);

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

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