個人開発者が勉強がてらまとめているだけのサイトです

ドラッグできるシート Draggable Scrollable Sheet

画面下に出しっぱなしの板を上下に引っ張って高さを変えられる。地図アプリの「近くのお店」一覧のあれ。

別名
引き出しシート地図アプリのシートセミモーダルスナップするシートPersistent Bottom Sheet
動き
ドラッグで高さが変わる途中で止まる中身もスクロール
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

Google マップや Apple マップで、地図の上に重なっている一覧の板です。

DraggableScrollableSheet は、シートの高さの変更と中身のスクロールを1本の指の動きで切り替えてくれます。

builder で渡される ScrollController を中の ListView に必ず渡すこと(渡さないと引っ張れません)。

snap と snapSizes を指定すると、指を離したとき決まった高さに吸い付きます。

こんなときに

  • 背景(地図・写真・動画)を見せつつ、関連する一覧も見せたい
  • 「ちょっと見る」と「しっかり見る」を行き来させたい

避けたい場面

  • 背景に操作するものがない画面(ただのボトムシートや普通の画面で十分)

最小コード

DraggableScrollableSheet(
  initialChildSize: 0.25,
  minChildSize: 0.12,
  maxChildSize: 0.9,
  snap: true,
  snapSizes: const [0.25, 0.5],
  builder: (context, controller) => Material(
    elevation: 8,
    borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
    child: ListView.builder(
      controller: controller, // ← これを渡さないと引っ張れない
      itemCount: 30,
      itemBuilder: (context, i) => ListTile(title: Text('項目 $i')),
    ),
  ),
)

使うウィジェット

DraggableScrollableSheet

似ているもの・一緒に見たいもの

触ってみる ↗
ダイアログ・シート モーダルボトムシートModal Bottom Sheet

画面の下から板がせり上がってきて、選択肢や小さなフォームを出す。外側を押すか下に引くと閉じる。

下から出てくる