【Flutter】画面いっぱいのダイアログの表示方法

2024年3月7日
2024年7月3日
Flutter標準

Flutter標準

Table of Contents

対象者

Flutterを使用してアプリ開発を行っている方
ダイアログを表示したいが、画面いっぱいに表示させる方法がわからない方
ダイアログの表示サイズが小さくて不満を持っている方
特に、PDFやWebViewなどのコンテンツをダイアログ内で大きく表示したい方

はじめに

この記事では、Flutterにおけるダイアログの表示方法をすでに理解していることを前提として、ダイアログを最大化する方法や、画面いっぱいに対して適切なパッディングを加えた大きめのダイアログを表示する方法について解説します。
通常、ダイアログは画面の中央に小さく表示されますが、コンテンツの視認性を向上させるためには、画面いっぱいに表示することが望ましい場合があります。この記事では、そのようなニーズに応えるための実装方法を提供します。

こっちの方が正攻法？

ダイアログっぽくないですが、以下のようにすれば画面いっぱいに広がるダイアログが作成できます。いっぱいすぎてダイアログというより、別のページみたいな感じになりますが。

    showDialog(
      context: context,
      builder: (BuildContext context) => Dialog.fullscreen(
        child: Container(),
      ),
    )

方法

以下の2つの点を実装すれば可能になります。

insetPadding プロパティを使用して、ダイアログの周囲にパディングを適用します。
設定しないとダイアログの周りのパディングがデフォルトになります。それを避けるため、設定します。
SizedBox ウィジェットを使用して、ダイアログの幅と高さを画面のサイズに合わせて設定します。
画面サイズを取得して、ダイアログの大きさに設定します。

SimpleDialogの場合、高さをシビアに設定する場合、画面サイズからパディングとタイトル分の高さも引かないといけない。スクロールするのが良くない場合は、AlertDialogを使用するのが良いかもしれない。

応用例

上記の考えで、以下が実現できます。横幅のみを、いっぱいにしたい場合は、高さは指定しません。

SimpleDialogを画面いっぱいに広げる
SimpleDialogを横幅いっぱいに広げる
AlertDialogを画面いっぱいに広げる
AlertDialogを横幅いっぱいに広げる

まとめ

ということで、ダイアログを画面いっぱいにする方法を記述しました。

参考

Flutter AlertDialogの幅を画面いっぱいに引き伸ばす

ソース(main.dartにコピペして動作確認用)

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(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            FilledButton(
              onPressed: () => _showSimpleDialog(context),
              child: Text('showSimpleDialog'),
            ),
            FilledButton(
              onPressed: () => _showAlertDialog(context),
              child: Text('showAlertDialog'),
            ),
          ],
        ),
      ),
    );
  }

  void _showSimpleDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          final size = MediaQuery.sizeOf(context);
          const sizePadding = 8.0;
          return SimpleDialog(
            title: Text('大きな SimpleDialog'),
            insetPadding: const EdgeInsets.all(sizePadding),
            children: [
              SizedBox(
                width: size.width,
                height: size.height,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text('ダイアログの中身'),
                    FilledButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: Text('閉じる'),
                    ),
                  ],
                ),
              )
            ],
          );
        });
  }

  void _showAlertDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          final size = MediaQuery.sizeOf(context);
          const sizePadding = 8.0;
          return AlertDialog(
            title: Text('大きな AlertDialog'),
            insetPadding: const EdgeInsets.all(sizePadding),
            actions: [
              FilledButton(
                onPressed: () => Navigator.of(context).pop(),
                child: Text('閉じる'),
              ),
            ],
            content: SizedBox(
              width: size.width,
              height: size.height,
              child: Center(child: Text('ダイアログの中身')),
            ),
          );
        });
  }
}

上記のソースは、Flutterで画面いっぱいに広がるダイアログを表示する方法を表してます。

SimpleDialogの場合

画面サイズの取得：
- final size = MediaQuery.of(context).size;を使用して、現在の画面のサイズを取得します。
ダイアログの表示：
- showDialog関数を使用して、SimpleDialogを表示します。
ダイアログのサイズ設定：
- SizedBoxウィジェットを使用して、SimpleDialogの幅と高さを画面サイズに合わせます。
- insetPaddingプロパティを使用して、ダイアログの周囲に一定のパディングを設定します。これにより、ダイアログが画面の端まで広がるが、縁には接触せず、見た目が良くなります。
ダイアログの中身：
- Columnウィジェットを使用して、ダイアログの中にテキストやボタンなどを配置します。
閉じるボタン：
- '閉じる'ボタンを配置して、ダイアログを閉じることができるようにします。

AlertDialogの場合

画面サイズの取得：
- 同様に、final size = MediaQuery.of(context).size;を使用して画面サイズを取得します。
ダイアログの表示：
- showDialog関数を使用して、AlertDialogを表示します。
ダイアログのサイズ設定：
- AlertDialogのcontentプロパティにSizedBoxウィジェットを使用して、幅と高さを画面サイズに合わせます。
- こちらも同様に、insetPaddingプロパティを使用して、ダイアログの周囲にパディングを設定します。