Flutterでのダイアログ利用

2022 6/07

2021.09.05 2022.06.07

こんにちは、株式会社Pentagonでエンジニアをしている阿久津です。
今回はFlutterでダイアログの利用方法について取り上げます。

ダイアログとは

ISOによると、"ユーザとシステムが相互作用するもの"みたいな定義らしい。

interaction between a user and an interactive system as a sequence of user actions (inputs) and system responses (outputs) in order to achieve a goal
例（GitHubをよくわからず操作している時、押したらダメ、絶対）

ポップアップ、モーダルとか色々と言い方(一般的な意味も若干違う)があるものの、今回の記事では以下をダイアログと呼びます。
モーダル = "画面の上になんか出てくるやつ"

Flutterで使えるダイアログ

以下のような"中央に浮き上がってくるタイプ"、"下部からせり上がってくるタイプ"の２種類が簡単に利用できます。

ダイアログの実装方法

中央に浮き上がってくるタイプ(showDialog)

 void _showDialog(BuildContext context) {
   showDialog(
     context: context,
     builder: (context) {
       return const AlertDialog(
         content: Text('真ん中に出てくるやつ'), // <= ここでダイアログに表示したいWidgetを返してあげればOK
       );
     },
   );
 }

下部からせり上がってくるタイプ(showModalBottomSheet)

 void _showModalBottomSheet(BuildContext context) {
   showModalBottomSheet(
     context: context,
     builder: (context) {
       return const SizedBox( // <= ここでダイアログに表示したいWidgetを返してあげればOK
         height: 150,
         child: Text(
           '下から出て来るやつ',
           textAlign: TextAlign.center,
           style: TextStyle(fontSize: 16), 
         ),
       );
     },
   );
 }

簡単。以上です。

注意点（ハマるかもポイント）

問題１：ダイアログの内部でListViewやColumnを利用すると縦幅が伸びてしまう。

 void _showDialogWithColumn(BuildContext context) {
   showDialog(
     context: context,
     builder: (context) {
       return AlertDialog(
         content: Column( // <= ここでダイアログに表示したいWidgetを返してあげればOK
           children: const [ 
             Text('真ん中に出てくるやつ'),
             Text('真ん中に出てくるやつ'),
             Text('真ん中に出てくるやつ'),
           ],
         ),
       );
     },
   );
 }

解決法１： mainAxisSize: MainAxisSize.min,を設定

  void _showDialogWithColumn(BuildContext context) {
   showDialog(
     context: context,
     builder: (context) {
       return AlertDialog(
         content: Column(
           mainAxisSize: MainAxisSize.min, <= ここ
           children: const [
             Text('真ん中に出てくるやつ'),
             Text('真ん中に出てくるやつ'),
             Text('真ん中に出てくるやつ'),
           ],
         ),
       );
     },
   );
 }

問題２：ListViewを使うとレンダリングで怒られる

 void _showDialogWithList(BuildContext context) {
   showDialog(
     context: context,
     builder: (context) {
       return AlertDialog(
         content: ListView(
           children: const [
             Text('真ん中に出てくるやつ'),
             Text('真ん中に出てくるやつ'),
             Text('真ん中に出てくるやつ'),
           ],
         ),
       );
     },
   );
 }

======== Exception caught by rendering library =====================================================
The following assertion was thrown during paint():
RenderBox was not laid out: RenderPhysicalShape#94df0 relayoutBoundary=up2
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

解決法２：SizedBoxでListViewのサイズを指定する

 void _showDialogWithList(BuildContext context) {
   showDialog(
     context: context,
     builder: (context) {
       return AlertDialog(
         content: SizedBox( <= ここ
           height: 80,
           width: 100,
           child: ListView(
             children: const [
               Text('真ん中に出てくるやつ'),
               Text('真ん中に出てくるやつ'),
               Text('真ん中に出てくるやつ'),
             ],
           ),
         ),
       );
     },
   );
 }