[Dart]if文、else(条件分岐)を使って表示、非表示のやり方
注意
この記事はプログラミング初心者によるFlutter、Dartを使用した解説記事になります。
間違いがあれば 私のTwitterアカウントまで連絡下さい。
では一緒に学んでいきましょう！!
さりげなく宣伝
下記の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を学び役５ヶ月目で最近Dartのコードを覚え始めました。
私はプログラミング未経験からFlutter大学というオンラインサロンで学んでいます。
アプリなどで教材を学べ、現役のFlutterエンジニアの方々とコミュニケーションが取れるプラットフォームです。モバイルアプリ開発に興味がある方は入ってみてはいかがでしょうか？
-
Flutter大学 公式サイト
https://kboyflutteruniv.com/ -
iOSアプリ
- Androidアプリ
Author And Source
この問題について([Dart]if文、else(条件分岐)を使って表示、非表示のやり方), 我々は、より多くの情報をここで見つけました https://zenn.dev/hikaru24/articles/f1e35480015fde著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol