FlutterArtist BlockItemsView WaterFallFlow ex1

Install the library.
Example structure
Currency38aShelf
Currency38aWaterfallFlowItemsView

In app development, choosing how to display data lists is crucial for UX. waterfall_flow is a popular package in pub.dev that creates a "waterfall" grid layout, where items have flexible heights based on content. In this article, we will explore how to integrate WaterfallFlow into the FlutterArtist.

1. Install the library.

https://pub.dev/packages/waterfall_flow

First, add the waterfall_flow package to your project:

pubspec.yaml (*)

dependencies:
  waterfall_flow: ^3.1.1

2. Example structure

3. Currency38aShelf

currency38a_shelf.dart

class Currency38aShelf extends Shelf {
  @override
  ShelfStructure defineShelfStructure() {
    return ShelfStructure(
      filterModels: {},
      blocks: [
        Currency38aBlock(
          name: Currency38aBlock.blkName,
          description: null,
          config: BlockConfig(),
          filterModelName: null,
          formModel: null,
          childBlocks: [],
        ),
      ],
    );
  }

  Currency38aBlock findCurrency38aBlock() {
    return findBlock(Currency38aBlock.blkName) as Currency38aBlock;
  }
}

4. Currency38aWaterfallFlowItemsView

The core of this example lies in the Currency38aWaterfallFlowItemsView class. In FlutterArtist, BlockItemsView is an incredibly flexible component. BlockItemsView doesn't restrict you to any specific display widget. Whether it's a ListView, GridView, DaviTable, or WaterfallFlow, the library focuses on providing data while leaving the visual rendering entirely up to you.

No ADS

currency38a_waterfall_flow_items_view.dart

class Currency38aWaterfallFlowItemsView
    extends BlockItemsView<Currency38aBlock> {
  const Currency38aWaterfallFlowItemsView({
    required super.block,
    super.key,
  });

  @override
  Widget buildContent(BuildContext context) {
    List<CurrencyData> currencyDatas = block.items;
    //
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final double minBoxWidth = 170;
        final int boxCount = constraints.constrainWidth() ~/ minBoxWidth;

        return WaterfallFlow.builder(
          gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
              crossAxisCount: boxCount,
              crossAxisSpacing: 5.0,
              mainAxisSpacing: 5.0,

              /// follow max child trailing layout offset and layout with full cross axis extend
              /// last child as loadmore item/no more item in [GridView] and [WaterfallFlow]
              /// with full cross axis extend
              //  LastChildLayoutType.fullCrossAxisExtend,

              /// as foot at trailing and layout with full cross axis extend
              /// show no more item at trailing when children are not full of viewport
              /// if children is full of viewport, it's the same as fullCrossAxisExtend
              ///  LastChildLayoutType.foot,
              lastChildLayoutTypeBuilder: (index) {
                return index == currencyDatas.length
                    ? LastChildLayoutType.foot
                    : LastChildLayoutType.none;
              }),
          itemBuilder: (BuildContext context, int index) {
            if (index >= currencyDatas.length) {
              return null;
            }
            CurrencyData currencyData = currencyDatas[index];
            return Currency38aBox(
              currencyData: currencyData,
              selected: block.isCurrentItem(currencyData),
              onCurrencyPressed: _onCurrencyPressed,
            );
          },
        );
      },
    );
  }

  Future<void> _onCurrencyPressed(CurrencyData currencyData) async {
    // Write Log:
    FlutterArtist.codeFlowLogger.addMethodCall(
      ownerClassInstance: this,
      currentStackTrace: StackTrace.current,
      parameters: null,
    );
    // IMPORTANT:
    // - Call this method when the user clicks on an ITEM in the list.
    await block.refreshItemAndSetAsCurrent(
      item: currencyData,
      navigate: null,
    );
  }
}

Combining BlockItemsView with WaterfallFlow is more than just a UI facelift; it brings significant technical advantages:

Spatial Optimization

For data with varying content lengths (like currency descriptions or notes), WaterfallFlow eliminates the dead space common in standard GridView(s), allowing more information to be displayed on screen.

Responsiveness

By integrating with LayoutBuilder, you can easily adjust the column count (crossAxisCount) in real-time based on the device width. This ensures the BlockItemsView remains visually appealing across mobile, tablet, and desktop.