flutter学習備忘録【三項演算子の使い方】

19163 ワード
If 三項演算子 Dart Flutter Dart テキストリンク

前書き

初めてのQiitaに投稿になります。宜しくお願いします。
4月から入社した会社の方で、flutterの研修をさせてもらいながら、日々の課題や学習に取り組んでいます。
実務未経験で課題や学習で四苦八苦しながらも、今回アウトプットも兼ねて、Qiitaに投稿させて頂きます。
今回は、入社前の学習中にて三項演算子について言及があり、とても便利だな感じたので、復習も兼ねて投稿します。

if文と三項演算子の基本的な書き方の違い

if文
int age = 20;

if(age >= 20) {
  print('成人です。');
} else {
  print('未成年です。');
}

// コメント
// if(条件分岐式) {
//   条件が成り立つ時の処理
// } else {
//   条件が成り立たない時の処理
// }
三項演算子
int age = 20;

age >= 20 ? print('成人です。') : print('未成人です。');

// コメント
// 条件分岐式 ? 条件が成り立つ時の処理 : 条件が成り立たない時の処理

上記のコードはどちらも、 成人です。 と出力されます。
全く同じ結果を出力しますが、三項演算子で書くほうが短く簡潔に書けていると思います。

デモアプリ

■動作環境
flutter: Flutter 1.22.6
Android Studio: Version 4.1.2

実際に学習していた時のコードを一部変更を加えながら、作成してみました。
動作としは、男性か女性を選択し、選択した方の背景が少し明るくなり、選択されていない方が背景色と同じ色に切り替わっています。

・if文使用時のサンプル

main.dart
// if文使用時

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// enumを使用していますが、詳細につきましては、割愛させて頂きます。
enum Gender { male, female }

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // タップON/OFFの色を変数に格納しています。
  final activeCardColor = Color(0xFF1D1E39);
  final inactiveCardColor = Color(0xFF1111328);

  Color maleCardColor;
  Color femaleCardColor;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF1111328),
        appBar: AppBar(
          title: Text('MyApp'),
        ),
        body: Row(
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    // 切り替えを動作メソッド呼び出し
                    updateColor(Gender.male);
                  });
                },
                child: buildCard(maleCardColor, '男性'),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    // 切り替えを動作メソッド呼び出し
                    updateColor(Gender.female);
                  });
                },
                child: buildCard(femaleCardColor, '女性'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 切り替わる背景色の枠組みの関数を定義
  Widget buildCard(Color color, String text) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(fontSize: 28, color: Colors.white),
      ),
      margin: EdgeInsets.all(15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: color,
      ),
      height: 150,
    );
  }

  // 切り替えを動作の関数を定義(if文)
  void updateColor(Gender selectedGender) {
    maleCardColor = inactiveCardColor; //男性側の背景色の初期値を代入
    femaleCardColor = inactiveCardColor; //女性側の背景色の初期値を代入
    if (selectedGender == Gender.male) {
      maleCardColor = activeCardColor;
    }
    if (selectedGender == Gender.female) {
      femaleCardColor = activeCardColor;
    }
  }
}

こちらが、三項演算子使用時のサンプルコードです。
下記サンプルのように三項演算子を使用することで、切り替え動作の関数を定義することなく、ON/OFFを条件に応じて切り替えることが出来るので、記述量も減り、関数の定義もいらなくなるのが、メリットかなと感じました。

・三項演算子使用時のサンプル

main.dart
// 三項演算子使用時

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

enum Gender { male, female }

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Gender selectedGender;

  final activeCardColor = Color(0xFF1D1E39);
  final inactiveCardColor = Color(0xFF1111328);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFF1111328),
        appBar: AppBar(
          title: Text('MyApp'),
        ),
        body: Row(
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    selectedGender = Gender.male;
                  });
                },
                child: buildCard(
                    // ここで三項演算子使用
                    selectedGender == Gender.male
                        ? activeCardColor
                        : inactiveCardColor,
                    '男性'),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    selectedGender = Gender.female;
                  });
                },
                child: buildCard(
                    // ここで三項演算子使用
                    selectedGender == Gender.female
                        ? activeCardColor
                        : inactiveCardColor,
                    '女性'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildCard(Color color, String text) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(fontSize: 28, color: Colors.white),
      ),
      margin: EdgeInsets.all(15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: color,
      ),
      height: 150,
    );
  }
}

最後に

ここまでご覧頂き、本当にありがとうございます。
まだまだ勉強の身でコードの不備や適切ではない使用等であまり参考にならないかもしれませんが、その際は、是非ご教授頂ければと思っております。