🤔

[Dart]if文、else(条件分岐)を使って表示、非表示のやり方

3 min read

注意

この記事はプログラミング初心者によるFlutter、Dartを使用した解説記事になります。
間違いがあれば 私のTwitterアカウントまで連絡下さい。 https://twitter.com/hikarugp24
では一緒に学んでいきましょう!!

さりげなく宣伝

https://apps.apple.com/jp/app/id1592323088#?platform=iphone
下記のGIFは私が個人開発している「ポケユナデータ」というアプリに、ログインしている(していない)時に起きるギミックを実装したGIF。
ここではその「ポケモン」に因んだ内容でわかりやすく説明していく流れにします。
  • ログイン前のGIF
  • ログイン後のGIF

やりたいこと

if、else(条件分岐)を使用

  • ログイン中、IconButtonを押したら投稿画面に遷移
  • ログインしていないなら、IconButtonを押したらアラートダイアログを表示

そもそもif、else(条件分岐)とは

もしXなら、Yを実行。
そうでなければ、Zを実行。
よく使う場面ですと、ユーザーが行う行動によって制限を掛けたい場合ですね。

下記が今回のコード

IconButton(
              onPressed: () async {
	          //ログインしていたら投稿画面へ遷移
                if (FirebaseAuth.instance.currentUser != null) {
                  await Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => PostPage(pokemonName),
                    ),
                  );
                  model.fetchComments(pokemonName);
                  //ログインしてなかったらAlertDialog表示
                } else {
                  showDialog(
                      context: context,
                      builder: (_) {
                        return AlertDialog(
                          content: Text('ログインすると投稿機能が使えます'),
                          actions: [
                          ],
                        );
                      }
                  );
                }
              },
                icon: Icon(Icons.edit)
            );

もう一つの方法

  • ログオフ時はアイコンが非表示、ログイン時はアイコンが表示される
    IconButtonをifで囲い、elseを何かしらのWidgetで返す方法。
Consumer<PokemonDetailModel>(builder: (context, model, child) {
            if (FirebaseAuth.instance.currentUser != null) {
              return IconButton(onPressed:
                  () async {
                await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => PostPage(pokemonName),
                  ),
                );
                model.fetchComments(pokemonName);
                }, icon: Icon(Icons.edit)
              );
            } else {
              return SizedBox();
            }
          })

コード解説

FirebaseAuth.instance.currentUserは今ログインしているUserを拾ってます。
Userがnullじゃなかったらログインしている。

if (FirebaseAuth.instance.currentUser != null){
//以下略

Userがnullだったら、ログインしていない。
アラートダイアログが表示される。

else {showDialog(context: context,builder: (_) {return AlertDialog(
//以下略

おわりに

Flutterを学び役5ヶ月目で最近Dartのコードを覚え始めました。
私はプログラミング未経験からFlutter大学というオンラインサロンで学んでいます。
アプリなどで教材を学べ、現役のFlutterエンジニアの方々とコミュニケーションが取れるプラットフォームです。モバイルアプリ開発に興味がある方は入ってみてはいかがでしょうか?

https://apps.apple.com/jp/app/flutter大学/id1532391360
  • Androidアプリ

https://play.google.com/store/apps/details?id=jp.kboy.kboyflutteruniv&hl=ja&gl=US

Discussion

ログインするとコメントできます