【Flutter】showModalBottomSheetの使い方｜モーダルシートを画面下から表示

今回は「showModalBottomSheet」の基本的な使い方について紹介します。

ボタンがクリックされた際などにshowModalBottomSheetメソッドを実行させることで画面下からモーダルシートを表示できます。

showModalBottomSheetの使い方

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      child: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              leading: Icon(Icons.share),
              title: Text('シェア'),
              onTap: () {},
            ),
            ListTile(
              leading: Icon(Icons.link),
              title: Text('コピー'),
              onTap: () {},
            )
          ],
        ),
      ),
    );
  },
);

showModalBottomSheetはメソッドなのでonPressedプロパティなどと一緒に使用され、上記コードのようにcontextプロパティとbuilderプロパティが必要となります。

builderプロパティではコールバック関数の引数に「context」を渡し、モーダルシートで表示されるWidgetをreturnで返します。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class ShowModalSheet extends StatelessWidget {
  const ShowModalSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('クリック'),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (context) {
              return Container(
                child: SafeArea(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      ListTile(
                        leading: Icon(Icons.share),
                        title: Text('シェア'),
                        onTap: () {},
                      ),
                      ListTile(
                        leading: Icon(Icons.link),
                        title: Text('コピー'),
                        onTap: () {},
                      )
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

以上です。