FlutterでWidgetの表示をif-else文で分岐させる

はじめに

先日の記事から引き続きFlutterを触ってみてアプリ作ってみてるところなんですが、

Widgetの表示をユーザーの状態によって分岐したいなという場面があったので調べてみました。

if-else文で表示を分岐させる

今回は複数のWidgetの表示を分岐させたいなと思いましてその時の記載ってどうすればいいんだ?

と思って調べてみたところ、下記の記事が見つかりました。

language/accepted/2.3/control-flow-collections/feature-specification.md at main · dart-lang/language
Design of the Dart language. Contribute to dart-lang/language development by creating an account on GitHub.

パッと思いつきで実装してみた時に

isAndroid ? IconButton(icon: Icon(Icons.search)) : null,

みたいな三項演算子を使った書き方や

      if (isAndroid)
        IconButton(icon: Icon(Icons.search))
      else
        IconButton(icon: Icon(Icons.about)),

みたいな単一のWidgetしか表示させるやり方しか思いついてなかったんですが、

複数を表示させるときには下記みたいに...[]を使えばいいんですね。

三項演算子を使う場合

...isAndroid ? [IconButton(icon: Icon(Icons.search))] : [],

if-else文を使う場合

if (isDisplay) ...[
        IconButton(icon: Icon(Icons.search)),
        IconButton(icon: Icon(Icons.refresh)),
        IconButton(icon: Icon(Icons.help))
      ]
else ... [
        Text('読み込み中')
]

勉強になりました。

最後に

一応書きたいことは書けましたけどメソッド別に分けて表示するでもよかったのかなと思っております。

行き当たりばったりで実装進めているのでもっといい書き方あればコメントでご意見お願いいたします。

今はとりあえずカードゲームチックなものを実装中なんですが、今週末から1週間ほど夏季休暇があるのでそこで作り上げてしまいたい。

本当は実家帰ったり、可能であれば東京遊びに行きたかったけどコロナがまた感染者増えてきたので流石になーと思い、1週間引きこもり生活が確定しました。

やったぜ。

1週間家で暇つぶしができることがありましたら併せてコメント募集中です。

ひたすら酒を飲んでいつの間にか休みが終わってました、ということだけは避けたいです。

酒浸りにならないよう気を付けます。

それでは今日はこの辺で。

それではー。

コメント

タイトルとURLをコピーしました