SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 スマートフォンのアプリでは、画面が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 {

  @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 _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 _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を利用して作成します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
BottomSheet

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15887 2022/09/05 20:24

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング