【Flutter】CustomScrollView/SliverListで空きスペースの表示領域を確保したい

FlutterのCustomScrollView内でSliverListを使用していて、リストが空の場合に画面いっぱいに表示領域を確保したい場合。

今回は、Emptyもしくは、リストが画面を埋めきらないときにも画面いっぱいに領域を確保したいシーンになりました。具体的にはCTAボタンを画面下部にFloating配置したいときですね。

SliverFillRemainingの使用

リストが空の場合、SliverFillRemainingを使用して残りのスペースを埋めることができます。このウィジェットは、利用可能なスペースを埋めるために拡大します。

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          // リストアイテムのビルド
        },
        childCount: items.length, // itemsはリストのデータ
      ),
    ),
    if (items.isEmpty)
      SliverFillRemaining(
        child: Center(
          child: Text('リストが空です'),
        ),
      ),
  ],
)

実際に実装した際はblankで良かったため、判定なしで SizedBox.shrink()で適用しました。

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          // リストアイテムのビルド
        },
        childCount: items.length, // itemsはリストのデータ
      ),
    ),
    const SliverFillRemaining(
      hasScrollBody: false,
      child: SizedBox.shrink(),
    ),
  ],
)

参考になれば幸いです。

https://api.flutter.dev/flutter/widgets/SliverFillRemaining-class.html