三項演算子について学ぶ

? : なんだこれ...

React勉強してたときに、? : なるものを知りました🤔
三項演算子と呼ぶそうですね。英語だと、ternary operatorだそうです💁‍

DartPadで実行してみたらこうなりました!

変数roleがadminのとき

変数roleがuserのとき

Flutterで使うとどんなことができるのか?
画面を切り替えて動きをつける機能を作ることが、多い気がしますね。trueだったら画面に表示したり、falseだったら、画面から消す。こんな感じかな🤔

---

ボタンを押して画面を切り替えてみた

Scaffoldのところから、trueかfalseで画面を切り替える処理を考えてみました。
switch文で、複数やってみたかったのですが、うまくいかずに三項演算子を使って表現しました。

main.dart

import 'package:flutter/material.dart';

class ternaryOperator extends StatefulWidget {
  const ternaryOperator({Key? key}) : super(key: key);

  @override
  State<ternaryOperator> createState() => _ternaryOperatorState();
}

class _ternaryOperatorState extends State<ternaryOperator> {
  bool users = true;

  @override
  Widget build(BuildContext context) {
    // 条件がtrueかfalseで、Scaffoldのコードを切り替える.
    return users
        ? Scaffold(
            // trueの時の画面.
            appBar: AppBar(
              title: const Text('trueの画面に切り替える'),
            ),
            body: Container(
              child: users
                  ? Column(
                      //trueの時に表示される画面.
                      children: [
                        const SizedBox(height: 50),
                        const Text('条件が正しいので画面に表示できました!'),
                        const SizedBox(height: 20),
                        ElevatedButton(
                            onPressed: () {
                              setState(() {
                                users = false;
                              });
                            },
                            child: const Text('false')),
                      ],
                    )
                  : Column(
                      //falseの時に表示される画面.
                      children: [
                        const SizedBox(height: 50),
                        const Text('条件が正しくないので、画面に表示できません!'),
                        const SizedBox(height: 20),
                        ElevatedButton(
                            onPressed: () {
                              setState(() {
                                users = true;
                              });
                            },
                            child: const Text('true')),
                        const SizedBox(height: 50),
                        // ローディングが走る.
                        const SizedBox(
                          height: 50, //指定
                          width: 50, //指定
                          child: CircularProgressIndicator(),
                        ),
                      ],
                    ),
            ),
          )
        : Scaffold(
            // falseの時の画面.
            appBar: AppBar(
              title: const Text('falseの画面に切り替える'),
            ),
            body: Container(
              child: users
                  ? Column(
                      //trueの時に表示される画面.
                      children: [
                        SizedBox(height: 50),
                        Text('条件が正しいので画面に表示できました!'),
                        SizedBox(height: 20),
                        ElevatedButton(
                            onPressed: () {
                              setState(() {
                                users = false;
                              });
                            },
                            child: const Text('false')),
                      ],
                    )
                  : Column(
                      //falseの時に表示される画面.
                      children: [
                        const SizedBox(height: 50),
                        const Text('条件が正しくないので、画面に表示できません!'),
                        const SizedBox(height: 20),
                        ElevatedButton(
                            onPressed: () {
                              setState(() {
                                users = true;
                              });
                            },
                            child: const Text('true')),
                        const SizedBox(height: 50),
                        // ローディングが走る.
                        const SizedBox(
                          height: 50, //指定
                          width: 50, //指定
                          child: CircularProgressIndicator(),
                        ),
                      ],
                    ),
            ),
          );
  }
}

まとめ

最近は、使ったことない文法を使ってアプリに動きをつけるのをやってます。Validation作ったり画面を切り替えたりするのをやっていると、ビジネスロジックを考えるので、難易度が上がってこれがデザインパターンなのかなと、考えていたりしますね。
もっといいコード書きたいので色々試してみます!