Help us understand the problem. What is going on with this article?

ModalBottomSheetのChildでScrollableなViewを使う

showModalBottomSheetがお手軽便利だったのでメモ。

ソースコード

showModalBottomSheet<void>(
  context: context,
  isScrollControlled: true,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
  ),
  builder: (context) => DraggableScrollableSheet(
    expand: false,
    builder: (context, scrollController) {
      return ListView.builder(
        controller: scrollController,
        itemCount: 20,
        itemBuilder: (context, position) {
          return ListTile(title: Text('${position.toString()}'),);
        },
      );
    },
  ),
);

こんな感じのコードで、ModalBottomSheetを表示しつつスクロール可能な場合はスクロールさせつつ、スクロールがTopの場合はドラッグでBottomSheetが閉じていくUIを表現できる。

  • ModalBottomSheen.isScrollControlled = trueにする
  • DraggableScrollableSheet.expand = falseにする
  • DraggableScrollableSheetのbuilderから渡されるscrollControllerを、ScrollViewのcontrollerに渡す

この辺りがポイント。
また、DraggableScrollableSheetのinitialChildSizemaxChildSizeminChildSizeの値を調整することでBottomSheetの位置を調整できる。

余談

ちょっと残念な点として、このコードだといわゆるsnapping的な動きは表現できないので、maxChildSizeとminChildSizeの間みたいな中途半端な位置でも、BottomSheetがその高さで止まってしまい、どっちかに吸い付くみたいにはならない。

snappingな動作を表現したい場合は、素直にsliding_up_panelなどのパッケージを使うか、DraggableScrollableNotificationを監視して頑張る(draggable_snappable)など、工夫する必要がある。
自分の場合は、手の込んだ変なパッケージ作ったりもした(scrollable_panel)

「GoogleMapのみたいに動いてほしい!」みたいな要件が無い限りはModalBottomSheetで済ませて、どうしてもって時は各種パッケージを導入するのが楽そう。

renoinn
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした