【Flutter】ダイアログを表示する

Flutterでダイアログを表示したい！

概要

今回の記事では、Flutterでダイアログを表示する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

TextButtonをタップするとダイアログが表示される例。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const ShowDialogSample1()
      )
    )
  );
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: TextButton(
          onPressed: () {
            showMyDialog(context);
          },
          child: const Text('Open Dialog'),
        ),
      ),
    );
  }

  void showMyDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('タイトル！'),
          content: const Text('コンテンツ！！'),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('アクション（閉じる）！！！'),
            ),
          ],
        );
      },
    );
  }
}

メソッドbuildとは別にダイアログを表示するためのメソッドshowMyDialogを作る感じ。

メソッドshowMyDialogの中でNavigator.of(context).pop()を実行するとダイアログを閉じ、前画面に戻る。

まとめ（感想文）

簡易的な設定画面とか入力画面に使えるかもね！