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

flutter_wall_layout のカバー
パッケージ詳細v2.1.2

flutter_wall_layout

さまざまな形状を持つブリック(ウィジェット)のセットを、壁のように縦または横のリストとして表示するレイアウトウィジェット...

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
2570
いいね数
133
Pub ポイント
150

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

flutter pub add flutter_wall_layout

パッケージ概要

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

さまざまな形状のブロック(ウィジェット)を垂直または水平リストに配置するための柔軟なレイアウトウィジェットを提供するFlutterパッケージです。壁のような見た目になります。動的なサイズ調整と位置指定に対応しており、不規則な形状の要素を持つ視覚的に魅力的なグリッドを作成するのに最適です。異なる画面サイズや向きに自動的に対応し、プラットフォーム間でレスポンシブデザインを保証します。写真ギャラリー、ダッシュボード、非均一なレイアウトが必要なクリエイティブUIに特に役立ちます。

用途

  • 混合アスペクト比の写真ギャラリー
  • さまざまなサイズのダッシュボードウィジェット
  • 不規則な形状を備えたクリエイティブなUIレイアウト
  • 複数のプラットフォームで応答性グリッドを表示
  • インタラクティブな壁のようなインターフェース

主な機能

  • さまざまな形状とサイズのレンガをサポートしています
  • 垂直および水平方向のオプション
  • 応答性と適応型レイアウト
  • クロスプラットフォーム互換性
  • 既存のFlutterウィジェットとの簡単な統合

適している対象

  • 視覚的なバリエーションを求めるデザイナー
  • 動的グリッドを構築する開発者
  • 非一様なレイアウトを必要とするアプリ
  • 複数のプラットフォームをターゲットにするプロジェクト
  • 複雑な配置を持つUI重視のアプリケーション

注意事項

  • 大量のレンガがある場合、パフォーマンスにばらつきが生じる可能性があります
  • レンガサイズの制約を慎重に扱う必要があります
  • 制限された組み込みアニメーション
  • 静的または低動的なコンテンツに最適
  • 複雑な相互作用にはカスタムロジックが必要になる場合があります

元の README

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

flutter_wall_layout - Layout child having different shape into a vertical or horizontal list

This library provides a unique widget, WallLayout, rendering into a list children having different shapes.

There is two main classes: WallLayout and Stone.

  • A wall is composed by a set of stones, arranged in a certain way.
  • A stone is a component defining its shape by a width and a height.
Wall Layout Widget

This component has been inspired by the ListView widget, in which you can choose scroll direction and the way. Added to that, you can also define how many rows or column have the wall, if you want to create a responsive design.

WallLayout(
  stones: _buildStonesList(),
  layersCount: 3,
  scrollDirection: Axis.vertical,
  reverse: false,
);
Wall Layout Widget Properties
Parameter Description Default value
stones List of Stone widgets, representing wall layout's children. -
layersCount Define the number of layers the wall have. Must be higher or equal to 2. When direction is Axis.vertical, it defines the number of columns the wall has. When direction is Axis.horizontal, it defines the number of rows. -
wallBuilder Define how the wall is built: where each stone is positioned within the wall.The wall builder is allowed to use less stones than provided, and can create new stones (see ./example for more details). WallBuilder.standard()
stonePadding Padding between stones. 16.0
primaryAxisStoneSize Optional. If specified, indicates the exact size of each stone in the direction of the primary scroll axis. If not specified, each stone will be exactly square. -
scrollController Same as [ListView.scrollController]: "control the position to which this scroll view is scrolled". -
physics Same as [ListView.physics]: "How the scroll view should respond to user input". -
restorationId Same as [ListView.restorationId]: used "to save and restore the scroll offset of the scrollable". -
dragStartBehavior Same as [ListView.dragStartBehavior]: "Determines the way that drag start behavior is handled". DragStartBehavior.start
clipBehavior Same as [ListView.clipBehavior]: "ways to clip a widget's content". Clip.hardEdge
primary Same as [ListView.primary]: "Whether this is the primary scroll view associated with the parent [PrimaryScrollController]" false
scrollDirection Same as [ListView.scrollDirection]: "axis along which the scroll view scrolls". Axis.vertical
reverse Same as [ListView.reverse property]: "whether the scroll view scrolls in the reading direction". false
Stone Widget

A Stone Widget is a widget proxy defining stone's size (width and height). It's rendered object is optimized thanks to it's id property.

Stone(
    id: 7,
    width: 2,
    height: 2,
    child: Container(
      color: Colors.red,
      child: Center(child: Text("2x2")),
    ),
);
Stone Widget Properties
Parameter Description Default value
width Stone width (relative to the number of wall divisions). Must be higher or equal to 1. -
height Stone height (relative to the number of wall divisions). Must be higher or equal to 1. -
id Proxy layout identifier: must be unique. -
child Widget to render, where its size will be constrained by the stone width and height. -

カテゴリー

ソースリポジトリ

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

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