アラートダイアログ

　フラッターでアラートダイアログを表示する方法、値を返す方法、スクロールする方法、余白とボタンの変更方法をまとめました。

基本のアラートダイアログ表示

　基本のアラートダイアログ表示です。「ダイアログを表示」ボタンから呼び出される _showAlertDialog() 関数のみを取り出しました。

void _showAlertDialog() {
  showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: const Text('タイトル'),
        scrollable: true,
        content: const Text('内容'),
        actions: <Widget>[
          TextButton(
            child: const Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

全体のコード

　念のため全体のコードを記載します。この後は、_showAlertDialog() 関数のみを記載します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'AlertDialog Demo',
      home: MyHomePage(title: 'AlertDialog Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showAlertDialog() {
    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          title: const Text('タイトル'),
          scrollable: true,
          content: const Text('内容'),
          actions: <Widget>[
            TextButton(
              child: const Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: OutlinedButton(
          onPressed: _showAlertDialog,
          child: const Text('ダイアログを表示'),
        ),
      ),
    );
  }
}

値を返す方法

　値を返す方法です。コンソールに、選択したボタンから pop で渡した値が表示されます。

Future<void> _showAlertDialog() async {
  // 値を返す
  final answer = await showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: const Text('タイトル'),
        scrollable: true,
        content: const Text('内容'),
        actions: <Widget>[
          TextButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.of(context).pop('No');
            },
          ),
          TextButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.of(context).pop('Yes');
            },
          ),
        ],
      );
    },
  );
  // 値をコンソールに出力する
  print(answer);
}

タイトルと内容をスクロール

　タイトルと内容をスクロールするアラートダイアログです。内容が少ない場合はアラートダイアログの縦幅が小さくなり、スクロールはしません。

void _showAlertDialog() {
  // 内容の作成
  final list = <Widget>[];
  for (var i = 0; i < 20; ++i) {
    final item = Container(child: Text('内容$i'), color: Colors.lime.shade100);
    list.add(item);
  }

  showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: const Text('タイトル'),
        content: ListBody(
          children: list,
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: const Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
        // タイトルと内容をスクロール
        scrollable: true,
      );
    },
  );
}

内容だけスクロール

　内容だけスクロールするアラートダイアログです。内容が少ない場合はアラートダイアログの縦幅が小さくなり、スクロールはしません。

void _showAlertDialog() {
  // 内容の作成
  final list = <Widget>[];
  for (var i = 0; i < 20; ++i) {
    final item = Container(child: Text('内容$i'), color: Colors.lime.shade100);
    list.add(item);
  }

  showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: const Text('タイトル'),
        // 内容だけスクロール
        content: SingleChildScrollView(
          child: ListBody(
            children: list,
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: const Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

全体をスクロール

　全体をスクロールするアラートダイアログです。内容が少ない場合はアラートダイアログの縦幅が小さくなり、スクロールはしません。

void _showAlertDialog() {
  // 内容の作成
  final list = <Widget>[];
  for (var i = 0; i < 20; ++i) {
    final item = Container(child: Text('内容$i'), color: Colors.lime.shade100);
    list.add(item);
  }

  // ボタンの作成
  final actions = ButtonBar(
    children: [
      TextButton(
        child: const Text('Cancel'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      TextButton(
        child: const Text('OK'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
  );

  // 内容にボタンを追加
  list.add(actions);

  showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: const Text('タイトル'),
        content: ListBody(
          children: list,
        ),
        // 内容にボタンを追加した結果、全体をスクロール
        scrollable: true,
      );
    },
  );
}

余白とボタンの変更

　余白(パディング)とボタンは変更できます。

void _showAlertDialog() {
  showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: const Text('タイトル'),
        content: const Text('内容'),
        // パディングの変更
        titlePadding: EdgeInsets.zero,
        contentPadding: EdgeInsets.zero,
        // actionsPadding: EdgeInsets.zero,
        buttonPadding: EdgeInsets.zero,
        insetPadding: EdgeInsets.zero,
        actions: <Widget>[
          // ボタンの変更
          SizedBox(
            width: MediaQuery.of(context).size.width,
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: ElevatedButton(
                    child: const Text('Cancel'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: ElevatedButton(
                    child: const Text('OK'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    },
  );
}