AlertDialogは、ユーザーにメッセージを表示し、そのメッセージに対する選択肢を提供するためのウィジェットです。通常、ダイアログは警告や確認、エラーなどのメッセージを表示するために使用されます。FlutterのAlertDialogは、ユーザーがタップすることでアクションを実行するボタンを複数含めることができます。
AlertDialogの使い方
まずは、AlertDialogを表示するための基本的なコードを紹介します。(下記以降のコードは AlertDialog(…) 部分の抜粋のみ記載します)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter AlertDialog',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AlertDialog Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('タイトル'),
content: Text('メッセージ'),
actions: <Widget>[
TextButton(
child: Text('キャンセル'),
onPressed: () {
Navigator.of(context).pop();
},
),
TextButton(
child: Text('OK'),
onPressed: () {
// OKボタンがタップされた時の処理
},
),
]),
);
},
child: Text('ボタン'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue, // ボタンの背景色を青にする
foregroundColor: Colors.white, // テキストの色を白にする
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0), // ボタンの角を丸くする
),
),
),
),
);
}
}
上記のコードでは、showDialogメソッドを使用してAlertDialogを表示しています。このメソッドにはcontext引数と、builder引数が必要です。
context引数は、現在のコンテキストを示すもので、通常はBuildContextオブジェクトを渡します。
builder引数は、ダイアログのウィジェットツリーを作成するためのコールバック関数で、BuildContextを引数として受け取り、AlertDialogを返します。
AlertDialogのtitle引数には、ダイアログのタイトルを指定します。content引数には、ダイアログの本文を指定します。
actions引数には、ダイアログに表示するボタンを指定します。この引数には、複数のTextButtonウィジェットを含めることができます。TextButtonウィジェットは、テキストを表示するためのウィジェットであり、onPressedコールバック関数を設定することで、ボタンがタップされた時に実行する処理を指定することができます。
AlertDialogのカスタマイズ
AlertDialogは、様々な方法でカスタマイズすることができます。以下は、いくつかのカスタマイズの例です。
ボタンのスタイルを変更する
ダイアログに表示されるボタンのスタイルを変更するには、TextButtonウィジェットを代わりに使用することができます。例えば、ElevatedButtonウィジェットを使用して、ボタンをより目立たせることができます。
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('タイトル'),
content: Text('メッセージ'),
actions: <Widget>[
TextButton(
child: Text('キャンセル'),
onPressed: () {
Navigator.of(context).pop();
},
),
ElevatedButton(
child: Text('OK'),
onPressed: () {
// OKボタンがタップされた時の処理
},
),
],
);
},
);上記のコードでは、OKボタンの代わりにElevatedButtonウィジェットを使用して、ボタンを目立たせるようにしています。
アイコンを追加する
AlertDialogにアイコンを追加することで、メッセージの種類を示すことができます。例えば、アラートの場合には赤い三角形のアイコンを追加することができます。
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Row(
children: [
Icon(Icons.warning, color: Colors.red),
SizedBox(width: 8),
Text('警告'),
],
),
content: Text('メッセージ'),
actions: <Widget>[
TextButton(
child: Text('キャンセル'),
onPressed: () {
Navigator.of(context).pop();
},
),
ElevatedButton(
child: Text('OK'),
onPressed: () {
// OKボタンがタップされた時の処理
},
),
],
);
},
);上記のコードでは、Iconウィジェットを使用して、赤い三角形のアイコンを追加しています。
ダイアログのサイズを変更する
ダイアログのサイズを変更するには、AlertDialogウィジェットのcontentPadding属性を設定することができます。
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('タイトル'),
content: Text('メッセージ'),
actions: <Widget>[
FlatButton(
child: Text('キャンセル'),
onPressed: () {
Navigator.of(context).pop();
},
),
RaisedButton(
child: Text('OK'),
onPressed: () {
// OKボタンがタップされた時の処理
},
),
],
contentPadding: EdgeInsets.symmetric(horizontal: 200, vertical: 100),
);
},
);
上記のコードでは、contentPadding属性を使用して、水平方向に24、垂直方向に20のパディングを設定しています。
以上が、FlutterのAlertDialogの使い方とカスタマイズの例になります。AlertDialogを使用することで、ユーザーにメッセージを表示し、アクションを実行することができます。