Flutterラボの

プレミアム会員になる

【Flutter】【Dart】三項演算子を使ってコードを簡潔にする(if文を?と:で記述する)

2020.09.26

以下のコードで、タップすると色が青と赤で交互に変化するようになっています。
Colorを返すselectColorというメソッドで条件分岐させて色を変化させています。

画像1
bool _isRed = false;

@override
Widget build(BuildContext context) {
 return Scaffold(
     appBar: AppBar(
       title: Text('三項演算子'),
       centerTitle: true,
     ),
     body: GestureDetector(
       child: Container(
         color: selectColor(),
       ),
       onTap: () {
         setState(() {
           _isRed = !_isRed;
         });
       },
     )
 );
}

Color selectColor() {
 if(_isRed) {
   return Colors.red;
 } else {
   return Colors.blue;
 }
}

これを三項演算子を使って記述するとこのようになります。

  bool _isRed = false;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text('三項演算子'),
         centerTitle: true,
       ),
       body: GestureDetector(
         child: Container(
           color: _isRed ? Colors.red : Colors.blue,
         ),
         onTap: () {
           setState(() {
             _isRed = !_isRed;
           });
         },
       )
   );
 }

1行で簡単に記述することができました。

_isRed ? Colors.red : Colors.blue

このように、 

 ​(条件) ? trueの場合 : falseの場合

という形の三項演算子を使うと余計にメソッドを書いたりせずに簡単に記述できるので、使いこなせるようにしてみてください。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt