【Flutter】showModalBottomSheetの使い方｜画面下のボトムシートを実装

2023年7月12日

FlutterでBottomSheet（ボトムシート）を実装できる「showModalBottomSheet」の使い方を紹介します。

showModalBottomSheetの使い方

BottomSheet を表示するには showModalBottomSheet メソッドを使用します。

今回は ElevatedButton の onPressed で showModalBottomSheet メソッドが実行されるようにしています。

showModalBottomSheet メソッドでは context と builder が必須となります。また BottomSheet として表示したいwidgetは下記コードのように書きます。（現時点で Container が表示される）

ElevatedButton(
  child: Text('Show BottomSheet'),
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(),
    );
  },
),

BottomSheetを非表示する

showModalBottomSheet メソッドで表示した BottomSheet を非表示するには Navigator.pop メソッドを使用します。

下記コードでは showModalBottomSheet メソッドで表示した ElevatedButton の onPressed で Navigator.pop メソッドを実行できるようにしています。

ElevatedButton(
  child: Text('Show BottomSheet'),
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 400,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              child: Text('Close BottomSheet'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
    );
  },
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: const BottomSheetExmaple(),
      ),
    );
  }
}

class BottomSheetExmaple extends StatefulWidget {
  const BottomSheetExmaple({super.key});

  @override
  State<BottomSheetExmaple> createState() => _BottomSheetExmapleState();
}

class _BottomSheetExmapleState extends State<BottomSheetExmaple> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('Show BottomSheet'),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (context) => Container(
              height: 400,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  ElevatedButton(
                    child: Text('Close BottomSheet'),
                    onPressed: () => Navigator.pop(context),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/showModalBottomSheet.html