目次
事前説明
Flutterの「AlertDialog
」を元に、コンポーネント化したYES/NOダイアログの作り方、使い方を記載します。
コンポーネントのソースコードの全量
コンポーネントのソースコードの全量は以下です。
import 'package:flutter/material.dart'; class YesNoDialog extends StatelessWidget { final String title; final String message; final Function() onYesAction; const YesNoDialog( {required this.title, required this.message, required this.onYesAction}); @override Widget build(BuildContext context) { return AlertDialog( title: Text(title), content: Text(message), actions: <Widget>[ GestureDetector( child: new Container( padding: const EdgeInsets.only(top: 16, right: 8, bottom: 16, left: 16), child: Text('いいえ'), ), onTap: () { Navigator.pop(context); }, ), GestureDetector( child: new Container( padding: const EdgeInsets.only(top: 16, right: 16, bottom: 16, left: 8), child: Text('はい'), ), onTap: () { onYesAction(); }, ) ], ); } }
使い方(呼び出し方)
ボタン押下時の処理などで、以下のように呼び出す事ができます。
showDialog<void>( context: context, builder: (_) { return YesNoDialog( title: "タイトル", message: "ダイアログメッセージ", onYesAction: () { print("ボタン押下"); } ); } );