![見出し画像](https://assets.st-note.com/production/uploads/images/35042859/rectangle_large_type_2_d2233a6d8e951f279a0dbe5728acc604.jpeg?width=1200)
Photo by
mericanadesico
【Flutter】【Dart】三項演算子を使ってコードを簡潔にする(if文を?と:で記述する)
以下のコードで、タップすると色が青と赤で交互に変化するようになっています。
Colorを返すselectColorというメソッドで条件分岐させて色を変化させています。
![画像1](https://assets.st-note.com/production/uploads/images/35042343/picture_pc_aa66cb1a868ec8265c36897ae7569871.gif)
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の場合
という形の三項演算子を使うと余計にメソッドを書いたりせずに簡単に記述できるので、使いこなせるようにしてみてください。
この記事が気に入ったらサポートをしてみませんか?