はじめに
iPhoneアプリ開発集中講座にあるじゃんけんアプリをFlutterでもしも作ったらというお題で移植してみました。
なるべく同じアプリになるようにしました。
解説
コードはgithubに公開してあります。
一部紹介させていただきます。
じゃんけん画像
iPhoneアプリ開発集中講座内ではImageViewのimageプロパティーが初期はnilでじゃんけんをすると画像がセットされる作りでしたが、それをうまくできなかったのでWidgetを作って対応しました。
Widget image(String image) {
if (image.isEmpty) {
// 画像のファイル名がない場合には、Container()を返して何も表示しない
return Container();
} else {
// 指定された画像ファイル名を表示する
return Image.asset(
image,
);
}
}
変数
3つの変数を作りました。
| 変数名 | 概要 |
|---|---|
| answerNumber | じゃんけんの結果を保持している変数 これで同じ結果が連続して表示されないようにしている |
| jankenText | じゃんけんの結果（文字）を保持している変数 初期値は、「これからじゃんけんをします！」として初期タイトルとなるようにした |
| jankenImage | じゃんけんの結果（画像）の画像ファイル名を保持している変数 初期値は空文字にすることによって先ほど作成したWidgetで何も表示しないようにしている |
int answerNumber = 4;
String jankenText = 'これからじゃんけんします';
String jankenImage = '';
じゃんけんの乱数処理
repeat文だったのがdo 〜 while文に変わっている以外はあまり変化ありません。
// 新しいじゃんけんの結果を一時的に格納する変数を設ける
int newAnswerNumber = 0;
// ランダムに結果を出すが、前回の結果と異なる場合のみ採用
// do {} while は繰り返しを意味する
do {
// 0,1,2の数値をランダムに算出（乱数）
newAnswerNumber = math.Random().nextInt(3);
// 前回と同じ結果のときは、再度、ランダムに数値を出す
// 異なる結果のときは、while を抜ける
} while (answerNumber == newAnswerNumber);
// 新しいじゃんけんの結果を格納
answerNumber = newAnswerNumber;
setState(() {
if (answerNumber == 0) {
// じゃんけんの数字が0だったら、グー画像を指定
jankenImage = 'images/gu.png';
jankenText = 'グー';
} else if (answerNumber == 1) {
// じゃんけんの数字が1だったら、チョキ画像を指定
jankenImage = 'images/choki.png';
jankenText = 'チョキ';
} else if (answerNumber == 2) {
// じゃんけんの数字が2だったら、パー画像を指定
jankenImage = 'images/pa.png';
jankenText = 'パー';
}
});
画像が大きくて画面に収まらない
スクリーンショットのように画像が縦長だったりして大きいと画面からはみ出てしまいエラーとなってしまいました。
そこで、Expanded()を使い調整しました。
Expanded(
child: image(jankenImage)
),
最後に
まだまだFlutterに挑戦し始めたばかりで適切じゃないコードもあると思います。
ただ、FlutterはSwiftUIに近い感じで作れてこれでiOS/Android両方のアプリが作れるのでいいと思いました。
またこれからもこのシリーズ続けていきたいと思います。