[Flutter]ModalBottomSheetをドラッグアップできるようにする方法

どうも、ちょげ(@chogetarou)です。

ModalBottomSheetをドラッグアップできるようにする方法を紹介します。

方法

ModalBottomSheetをドラッグアップできるようにするには、DragableScrollablSheetを使います。

まず、showModalBottomSheetの引数「isScrollControlled」に「true」を指定します。

また、引数「color」にColors.transparentを指定しておきます。

showModalBottomSheet(
  isScrollControlled: true,
　　backgroundColor: Colors.transparent,
  context: context,
  builder: (context) {
    return BottomSheet();
  },
);

次に、ModalBottomSheetとして表示するウェジェットを、DragableScrollableSheetの引数「builder」でreturnするようにします。

showModalBottomSheet(
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  context: context,
  builder: (context) {
    return DraggableScrollableSheet(
      builder: (BuildContext context, scrollController) {
        return BottomSheet();
      },
    );
  },
);

最後に、DraggableScrollablSheetの引数でサイズの設定をします。

showModalBottomSheet(
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  context: context,
  builder: (context) {
    return DraggableScrollableSheet(
      builder: (BuildContext context, scrollController) {
        return BottomSheet();
      },
      initialChildSize: /*最初の大きさが親ウェジェットの何倍か*/,
      minChildSize: /*最小の大きさが親ウェジェットの何倍か*/,
      maxChildSize: /*最大の大きさが親ウェジェットの何倍か*/,
    );
  },
);

これでModalBottomSheetをドラッグアップできるようになります。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              isScrollControlled: true,
              backgroundColor: Colors.transparent,
              context: context,
              builder: (context) {
                return DraggableScrollableSheet(
                  builder: (BuildContext context, scrollController) {
                    return Container(
                      height: 400,
                      color: Colors.white,
                      child: ListView.builder(
                        controller: scrollController,
                        itemCount: 10,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(title: Text('Item $index'));
                        },
                      ),
                    );
                  },
                  initialChildSize: 0.4,
                  minChildSize: 0.4,
                  maxChildSize: 0.8,
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }