CodeZine(コードジン)

特集ページ一覧

Flutterのマテリアルデザインで用意されているウィジェットを紹介【Dialog/BottomSheet/SnackBar編】

Flutterで始めるモバイルアプリ開発 第19回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2022/05/30 11:00

 今回は、入力の際の補助的表示や処理前後の確認・通知などのモーダルやポップアップ表示して利用するウィジェットを紹介します。ダイアログは開発者にとって非常に使いやすいウィジェットではありますが、利用者にとっては必ずしも適した方法ではない場合があります。そこで、マテリアルデザインで用意されているウィジェットを中心に紹介します。

目次

ポップアップやモーダル形式で追加コンテンツを表示するウィジェット

 スマートフォンのアプリでは、画面がPCなどに比べて小さいことがあります。そのため、すべての情報をあらかじめ表示しておくことができません。特に入力項目をすべてあらかじめ表示してしまうことは、入力の煩わしさや複雑なイメージを利用者に与えることになります。

 そのため、必要なタイミングで表示することとその情報に対する注意喚起を利用者に促す必要があります。そのような用途として利用できるウィジェットが表1です。

表1:追加コンテンツのウィジェット種類
クラス名 説明
Dialog 入力決定前の再確認や、追加の入力情報など汎用的に利用できる追加コンテンツのポップアップ表示。処理の確認。
BottomSheet 画面下に選択できるアイテムを表示するためのポップアップ表示。現在の表示の追加選択を促す。入力項目があってもキーボード表示の上に表示できるので、入力してもらいやすい。
SnackBar 処理結果を表示するためのポップアップ表示。その処理結果の取消など追加の処理が必要な場合にも利用可能なウィジェット。

ダイアログ

 ダイアログは、以下の3つの種類のダイアログがあります。

表2:Dialogの種類
クラス名 説明
AlertDialog YES/NOなどの入力を促すためのダイアログ
SimpleDialog 選択アイテムを表示するためのダイアログ
Dialog AlertDialogやSimpleDialogの元となる基盤ダイアログ

 Dialogは、AlertDialogやSimpleDialogでは十分でない場合に利用するウィジェットです。今回は、AlertDialogとSimpleDialogの使い方を紹介しますが、これらはダイアログウィジェット自体が異なるだけで、表示する方法に違いはありません。また、より自由な表示を望む場合には、Dialogを利用を検討するとよいでしょう。

AlertDialog

 AlertDialogは、メッセージとともにYes/Noなどのアクションを促すためのダイアログです。リスト1がAlertDialogを利用する場合の簡単なコード例で、その実行結果が図1です。

図1:AlertDialogの実行例
 
[リスト1] 標準的なAlertDialogの利用例(lib/dialog/AlertDialogWidget.dartの抜粋)
class _AlertDialogWidget extends State<AlertDialogWidget> {

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        alignment: Alignment.center,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              OutlinedButton(
                  onPressed: (){
                    // (1) ボタンが押された時にダイアログを表示
                    _openAlertDialog1(context);
                  },
                  child: Text("AlertDialog(1)")
              ),
              // : (省略)
            ])
    );
  }
  Future<void> _openAlertDialog1(BuildContext context) async {
    // (2) showDialogでダイアログを表示する
    var ret = await showDialog(
        context: context,
        // (3) AlertDialogを作成する
        builder: (context) => AlertDialog(
          title: Text("入力確認"),
          content: Text("よろしいですか"),
          // (4) ボタンを設定
          actions: [
            TextButton(onPressed: () => {
              //  (5) ダイアログを閉じる
              Navigator.pop(context,false)
            },
                child: Text("いいえ")
            ),
            TextButton(onPressed: (){
              Navigator.pop(context,true);
              },
              child: Text("はい")
            ),
          ],
        )
    );
    // (6) ダイアログが閉じたときの結果
    if(ret != null) {
      if (ret == true) {
        print("---- YES -----");
      }
      else {
        print("---- NO -----");
      }
    }
    else{
      //  (7) 選択せずに閉じた場合
      print("---- NULL ----");
    }
  }
}

 (1)のようにボタンを押した時にダイアログを表示するようにします。

 実際にダイアログを表示するには、(2)のようにshowDialogを利用します。この処理はSimpleDialogやDialogであっても同様です。そして、表示するダイアログウィジェット本体のAlertDialogを(3)のように作成します。AlertDialogでは、タイトル(title)や本文(content)とボタンがあります。

 アクションのためのボタンは(4)のactionsプロパティに設定します。また、ダイアログを閉じるには、(5)のようにNavigatorのpopメソッドを使います。閉じた時の戻り値は第二引数にわたすことができます。ダイアログが閉じたときの処理が必要な場合には(6)のようにします。

 ただし、このダイアログはいずれのボタンを押さなくても閉じることができます。そのため(7)のようにnullの場合の考慮が必要になります。もしも、必ずいずれかのアクションを選択してほしい場合には、リスト2のようにします。

[リスト2] ダイアログを閉じないようにする場合の利用例(lib/dialog/AlertDialogWidget.dartの抜粋)
var ret = await showDialog(
    context: context,
    //  (1) ダイアログウィジェット外をタップしても閉じないようにする
    barrierDismissible: false,
    builder: (context) => AlertDialog(
        // (省略)
    );
);

 showDialogを実行する際に、(1)のようにbarrierDismissibleプロパティにfalseを設定します。これで、ダイアログは閉じなくなるので、ユーザには必ずいずれかのアクションを選択させることができます。

SimpleDialog

 SimpleDialogは、複数の選択肢を表示するためのダイアログです。リスト3がSimpleDialogを利用する場合の簡単なコード例で、その実行結果が図2です。

図2:SimpleDialogの実行例
[リスト3] 標準的なSimpleDialogの利用例(lib/dialog/SimpleDialogWidget.dartの抜粋)
Future<void> _openAlertDialog1(BuildContext context) async {
    // (1) ダイアログの表示
    var answer = await showDialog(
        context: context,
        // (2) SimpleDialogの作成
        builder: (context) => SimpleDialog(
            title: Text("よく利用する言語を選択してください"),
            children: [
                // (3) SimpleDialogOptionで表示アイテムを作成
                SimpleDialogOption(
                    child: ListTile(
                        title: Text("Flutter"),
                        leading: Icon(Icons.circle),
                    ),
                    onPressed: (){ Navigator.pop(context,"flutter"); },
                ),
                SimpleDialogOption(
                    // : (省略)
                ),
                // : (省略)
            ],
       )
    );
}

 SimpleDialogを表示する際にも(1)のようにshowDialogを利用します。また、(2)でSimpleDialogを作成し、表示するアイテムは(3)のようにSimpleDialogOptionを利用して作成します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5