이전

첫 Qiita에 게시됩니다. 잘 부탁드립니다.
4월부터 입사한 회사 쪽에서, flutter의 연수를 시켜 주면서, 매일의 과제나 학습에 임하고 있습니다.
실무 미경험으로 과제나 학습으로 사고팔고하면서도, 이번 ​​아웃풋도 겸해, Qiita에 투고하겠습니다.
이번은, 입사전의 학습중에 3항 연산자에 대해서 언급이 있어, 매우 편리하다고 느꼈으므로, 복습도 겸해 투고합니다.

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,
    );
  }
}

마지막으로

여기까지 보셔서 정말 고마워요.
아직 공부의 몸으로 코드의 미비나 적절하지 않은 사용등으로 별로 참고가 되지 않을지도 모릅니다만, 그 때는, 꼭 교수 받을 수 있으면이라고 생각하고 있습니다.