[Flutter] 복사 붙여넣기에 사용되는 간단한 대화상자

개시하다

시청해 주셔서 감사합니다.난 건이야.
이번에는 Flutter에서 프로그램을 개발할 때 누구나 사용할 수 있는 대화상자를 썼습니다.
최소한의 디자인과 유니버설성을 중시하여 제작되었습니다.
읽은 사람에게 힘이 되었으면 좋겠어요.

대화상자

대화 상자는 무엇입니까?어떤 종류가 있습니까?이렇게 생각하는 사람은 이 문장이 참고가 될 것이라고 생각한다.
https://qiita.com/coka__01/items/4c1aea5fb1646e463f91#cupertino편집자
그나저나 이번에 나는 아주 Material 대화상자를 만들었다.

완성품

예/아니요 선택 가능한 버전

OK 버전만

최종 품목 코드

먼저 데이터 파일을 직접 만들어서 거기에 복사해서 사용하세요.
original_dialog.dart

import 'package:flutter/material.dart';

/// はい/いいえ が選択できるバージョン
Future showConfirmDialog(
  context, {
  required String title,
  required String content,
  required onApproved,
}) async {
  showDialog(
      context: context,
      // barrierDismissibleのbool値をtrueにすると、
      // ダイアログの外側を押した際にダイアログが出る前の画面に戻れるようになります。
      barrierDismissible: false,
      builder: (BuildContext context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Container(
            // デバイスに応じて横幅(width)は調整してください。
            width: 311.0,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blueAccent, width: 3),
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Column(
              // mainAxisSize: MainAxisSize.min があることで、
              // Columnの子要素の縦幅に合わせて表示できます。
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                    padding: const EdgeInsets.symmetric(vertical: 24.0),
                    child: Text(
                      title,
                      style: const TextStyle(
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  child: Text(
                    content,
                  ),
                ),
                const SizedBox(
                  height: 24.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        side: const BorderSide(
                          width: 1.0,
                          color: Colors.blueAccent,
                        ),
                        shadowColor: Colors.grey,
                        // elevation で影の長さを指定
                        elevation: 5,
                        // primary でボタンの背景色を指定
                        primary: Colors.white,
                        // onPrimary でボタンないの文字の色を指定
                        onPrimary: Colors.black,
                        // shape: const StadiumBorder() でボタンのサイドがまるくなります。
                        shape: const StadiumBorder(),
                      ),
                      onPressed: onApproved,
                      child: const Padding(
                        padding:
                            EdgeInsets.symmetric(vertical: 16, horizontal: 18),
                        child: Text('いいえ'),
                      ),
                    ),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        shadowColor: Colors.grey,
                        elevation: 5,
                        primary: Colors.blueAccent,
                        onPrimary: Colors.white,
                        shape: const StadiumBorder(),
                      ),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: const Padding(
                        padding:
                            EdgeInsets.symmetric(vertical: 16, horizontal: 18),
                        child: Text('はい'),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 24.0,
                ),
              ],
            ),
          ),
        );
      });
}

호출 시

onPressed: () {
          showConfirmDialog(
            context,
            // 好きな文字列を入れてください。
            title: 'タイトル',
            // 好きな文字列を入れてください。
            content: 'テキストテキストテキストテキストテキストテキストテキストテキスト',
            onApproved: () {
              // はい が押された時の処理を入れる。
              // 以下は例
              Navigator.of(context).pop();
            },
          );
        },

이렇게 하는 것이 비교적 좋다.
OK 버전만 쓰세요.사용 방법은 위와 거의 같다.

/// OK のみのバージョン
showAlertDialog(
  context, {
  required String title,
  required String content,
}) async {
  showDialog(
      context: context,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Container(
            width: 311.0,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blueAccent, width: 3),
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                    padding: const EdgeInsets.symmetric(vertical: 24.0),
                    child: Text(
                      title,
                      style: const TextStyle(
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  child: Text(
                    content,
                  ),
                ),
                const SizedBox(
                  height: 24.0,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        shadowColor: Colors.grey,
                        elevation: 5,
                        primary: Colors.blueAccent,
                        onPrimary: Colors.white,
                        shape: const StadiumBorder(),
                      ),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: const Padding(
                        padding:
                            EdgeInsets.symmetric(vertical: 16, horizontal: 36),
                        child: Text('OK'),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 24.0,
                ),
              ],
            ),
          ),
        );
      });
}

주의

Flutter2.0이 아닌 경우 require를 @require로 변경합니다.

끝맺다

대화상자는 모든 응용 프로그램에 필요합니다.
잘 준비하고 싶어요!그렇게 생각하시면 꼭 참고해주세요.