Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】【Dart】三項演算子を使ってコードを簡潔にする(if文を?と:で記述する)
2020.09.26
以下のコードで、タップすると色が青と赤で交互に変化するようになっています。
Colorを返すselectColorというメソッドで条件分岐させて色を変化させています。

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ラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13