【Flutter】ポップアップ表示から背景色・サイズを変更するまでの完全ガイド！

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ポップアップ表示デモ'),
        ),
        body: Center(
          child: PopupButton(),
        ),
      ),
    );
  }
}

class PopupButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('重要なお知らせ'),
              content: Text('これはFlutterによるポップアップのデモです。'),
              actions: <Widget>[
                TextButton(
                  child: Text('閉じる'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        );
      },
      child: Text('ポップアップを表示'),
    );
  }
}

// 上記のPopupButtonクラス内のshowDialog関数内でAlertDialogを定義する部分を以下のように変更します。

builder: (BuildContext context) {
  return AlertDialog(
    backgroundColor: Colors.blue, // ポップアップの背景色を青に設定
    title: Text('重要なお知らせ'),
    content: Text('背景色を変更しました。'),
    actions: <Widget>[
      TextButton(
        child: Text('閉じる'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
  );
},

// 上記のPopupButtonクラス内のshowDialog関数内でAlertDialogを定義する部分を以下のように変更します。

builder: (BuildContext context) {
  return AlertDialog(
    title: Text('サイズ変更デモ'),
    content: Container(
      width: double.maxFinite, // 最大幅に設定
      child: Text('ポップアップのサイズを変更しました。'),
    ),
    actions: <Widget>[
      TextButton(
        child: Text('閉じる'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
  );
},