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

reorderable_grid のカバー
パッケージ詳細v1.0.13

reorderable_grid

Flutter のネイティブな再順序付け可能なリストに似た完全な再順序付け可能なグリッドの実装。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
1.4万
いいね数
136
Pub ポイント
150

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

flutter pub add reorderable_grid

パッケージ概要

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

ユーザーがグリッドアイテムをドラッグアンドドロップして動的に再配置できる、完全に機能する再順序付け可能なグリッドを提供するFlutterパッケージです。FlutterのネイティブなReorderableListViewからインスパイアされており、Android、iOS、Web、macOS、Windows、Linuxなどすべての主要プラットフォームをサポートしています。滑らかなアニメーションを維持し、タッチジェスチャーを効率的に処理するため、ダッシュボード、写真ギャラリー、タスクボードなどのカスタマイズ可能なレイアウトに最適です。既存のFlutterアプリにシームレスに統合でき、カスタマイズ用のシンプルなAPIも提供しています。

用途

  • カスタマイズ可能なダッシュボードレイアウト
  • 写真またはメディアギャラリーの並べ替え
  • タスクまたはカードベースのインターフェースの再配置
  • ユーザー定義のウィジェット配置
  • インタラクティブなグリッドベースのデータ管理

主な機能

  • ドラッグアンドドロップによる再順序付け
  • クロスプラットフォーム互換性
  • スムーズなアニメーション遷移
  • 柔軟なアイテムカスタマイズ
  • 組み込みのジェスチャー処理

適している対象

  • インタラクティブなグリッドインターフェースを構築する開発者
  • ユーザー主導のレイアウトカスタマイズを必要とするアプリ
  • 動的コンテンツ構成を持つプロジェクト
  • 直感的なUIインタラクションを望むデザイナー
  • 複数のプラットフォーム向けのFlutterアプリケーション

注意事項

  • 状態管理の適切な取り扱いが必要です
  • 大規模なデータセットではパフォーマンスに影響する可能性があります
  • タッチターゲットには適切なパディングと余白が必要です
  • 制限された組み込みスタイルオプション
  • 非常に多数のアイテム数に対して最適化されていない

元の README

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

:white_square_button: Reorderable Grid

Pub Version Likes Pub points Pub codecov

A full reorderable grid implemention similar to Flutters Reorderable_List. with full ReorderableGridView, ReorderableGrid and SliverReorderableGrid implementations

gif showing basic usage

:hammer: How it works

ReorderableGridView is a drop in replacement for the existing GridView and adds an onReorder callback that provides the original and new index of the reordered item.

/// create a new list of data
final items = List<int>.generate(40, (index) => index);

/// when the reorder completes remove the list entry from its old position
/// and insert it at its new index
void _onReorder(int oldIndex, int newIndex) {
setState(() {
    final item = items.removeAt(oldIndex);
    items.insert(newIndex, item);
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
    home: Scaffold(
      body: ReorderableGridView.extent(
        maxCrossAxisExtent: 250,
        onReorder: _onReorder,
        childAspectRatio: 1,
        children: items.map((item) {
          /// map every list entry to a widget and assure every child has a 
          /// unique key
          return Card(
            key: ValueKey(item),
            child: Center(
            child: Text(item.toString()),
            ),
          );
        }).toList(),
      ),
    ),
);
}

ReorderableGrid provides all the constructors and parameters the normal GridView has. The package also includes:

  • ReorderableGridView, which is a prebuild Material-ish implementation of the grid.
  • ReorderableGrid, A barebones widget that allows you to customize the grid however you want
  • SliverReorderableGrid, a reorderable grid sliver for custom scroll implementations

Documentation

You can find all features and fuctionality documented here

:wave: Get Involved

If this package is useful to you please :thumbsup: on pub.dev and :star: on github. If you have any Issues, recommendations or pull requests I'd love to see them!

カテゴリー

ソースリポジトリ

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