Zenn
🌏

Flutterで再利用できる便利なダイアログを作る。

2021/07/28に公開
Flutter
Dart
tech

はじめに

Flutterでアプリ開発をしていてこれめっちゃ便利！というダイアログの使い方を見つけたので共有します！

めっちゃ簡単なので是非やってみてください！

普通のダイアログ

ダイアログはなんでも良いんですが、例えばユーザーがボタンを押した時にダイアログを表示するとしたらこんな感じ。

onPressed: (){
  showCupertinoDialog(
    context: context,
    builder: (BuildContext context){
      return CupertinoAlertDialog(
        title: Text('タイトル'),
	content: Text('メッセージ'),
	actions: <Widget>[
	  TextButton(
	    onPressed: () {
	    　　/// キャンセルを押した時の処理
	     Navigator.pop(context);
	    },
	    child: Text('キャンセル'),
	  ),
	  TextButton(
	    onPressed: () {
	      /// OKを押した時の処理
	      Navigator.pop(context);
	    },
	    child: Text('OK'),
	  ),
	],
      );
    }
  );	
},

これだと、OKやキャンセルを押した時の処理をダイアログに直接書く必要があるため再利用できません。😱

便利なダイアログ

同じくユーザーがボタンを押した時にダイアログを表示するとしたらこんな感じ。

onPressed: () async {
  var result = await showDialog(context, '処理を続行しても良いですか？', 'キャンセルを押した場合、処理を途中で中断します。');
  if (result) {
    /// OKを押した時の処理
  } else {
    /// キャンセルを押した時の処理
  }
},

Future<bool> showDialog(BuildContext context, String title, String message) async {
  var result = await showCupertinoDialog(
      context: context,
      builder: (BuildContext context){
        return CupertinoAlertDialog(
          title: Text('$title'),
          content: Text('$message'),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.pop(context, false);
              },
              child: Text('キャンセル'),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(context, true);
              },
              child: Text('OK'),
            ),
          ],
        );
      }
  );
  return result;
}

普通のダイアログから変更した箇所は、以下の3つです。

  1. ダイアログを関数から呼び出せるようにした。
  2. OKやキャンセルを押してNavigator.popする時（ダイアログを閉じる）に、trueやfalseも引数にした。
  3. 引数を受け取りreturnで呼び出し元へ返した。

こうすることで、ダイアログに処理を直書きする必要がなくなりわかりやすくなる上、ユーザーがボタンを選択するまで処理が中断するため非同期の処理中からでも呼び出すことができます！🎉

ボタンのTextも引数にすればもっと柔軟に使うこともできます！🎉

おわりに

Twitterもやっているので是非フォローお願いします！🙏
https://twitter.com/fb_mihiro

Discussion