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

side_header_list_view のカバー
パッケージ詳細v0.0.4

side_header_list_view

サイドにスタックするヘッダーを持つ ListView。Androidの連絡先アプリとカレンダーアプリからインスパイアされました。

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

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

flutter pub add side_header_list_view

パッケージ概要

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

Androidの連絡先やカレンダー アプリに似た、スタイックなサイドヘッダーを備えた ListView を実装する Flutter パッケージです。ユーザーがリストをスクロールする際、セクションヘッダーをサイドに表示し続けられるため、ナビゲーションと視覚的な整理が向上します。ユーザーがスクロールしてもヘッダーは固定されたままになるため、カテゴリまたは期間ごとにグループ化された長いリストの使いやすさが向上します。カテゴリー別データ表示が必要なアプリ向けに、洗練された直感的なインターフェースを設計しています。

用途

  • アルファベット順グループ化付きの連絡先リスト
  • 日付ヘッダー付きのカレンダービュー
  • カテゴリ別製品一覧
  • ラベル付きのユーザー・プロファイル セクション
  • トピック見出しを含む長文コンテンツ

主な機能

  • スタック付きサイドヘッダー
  • アルファベット順またはカスタムヘッダーのグループ化
  • ヘッダーの整合性を伴うスムーズスクロール
  • カスタマイズ可能なヘッダーのスタイル
  • 大規模データセットの効率的なレンダリング

適している対象

  • カテゴリ化されたデータを含むアプリ
  • 連絡先またはディレクトリアプリ
  • 時刻に基づくデータ表示
  • 明確なセクションの区切りが必要なUI
  • Androidスタイルのリストデザインを求める開発者

注意事項

  • 垂直リストに限定
  • ヘッダーの位置決めにはレイアウトの調整が必要になる場合があります
  • 狭めから中程度の画面幅に最適
  • ダークモード用に追加のスタイル設定が必要になる場合があります
  • 水平スクロールのシナリオには適していない

元の README

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

side_header_list_view

pub package Donate

Listview with sticky headers like the Android contact page

alt text

Usage

  new SideHeaderListView(
    // Set how many items the list has
    itemCount: items.length,
    
    // Set the height of the item widgets. For now this has to be a fixed height
    itemExtend: 150.0,
    
    // Set the header builder, this needs to return the widget for the side header
    headerBuilder: (BuildContext context, int index){
      return new HeaderWidget(items[index].startDate);
    },
    
    // Set the item builder, this is everything in the row without the header
    itemBuilder: (BuildContext context, int index){
      return new ListItem(items[index]);
    },
    
    // HasSameHeader will be used to know whether the header has to be shown for a position 
    hasSameHeader: (int a, int b){
      return items[a].day == items[b].day;
    },
  );

カテゴリー

依存関係

依存関係一覧 1 件

ソースリポジトリ

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

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