【50歳】次はflutter_7【我流リスキリング】
50歳超えた文系リーマンには、リスキリングと言われても、「デジタルスキルぐらい身につけないとリストラだ」と言われているような気がしてしょうがない。。
さて、今後のリスキリングについて、「Python」を勉強していましたが、スマホアプリを作ってみたくて、「flutter」に興味を持ち、学習中〜
これまで、Pythonで作成したゲームをChatGPTの力を借りて、flutterで再現しました。（ChatGPTすごい。。）
↓ 前回の記事
学習するコード（flutter）
ChatGPTが作成したコード。
Pythonで40行ぐらいのコードが、150行ぐらいになってます。。
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'じゃんけんアプリ2!!',
theme: ThemeData.dark().copyWith(
primaryColor: Colors.green[800],
scaffoldBackgroundColor: Colors.brown[200],
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> comHandImg = ["assets/comh0.png", "assets/comh1.png", "assets/comh2.png"];
final List<String> myHandImg = ["assets/myh0.png", "assets/myh1.png", "assets/myh2.png"];
final List<String> message = ["あいこ", "あなたの勝ち", "COMの勝ち"];
final List<String> faceImg = ["assets/face01.png", "assets/face03.png", "assets/face02.png"];
String myHandImage = "";
String comHandImage = "";
String resultMessage = "";
String faceImage = "assets/title.png";
void janken(int myNum) {
Random random = Random();
int comNum = random.nextInt(3);
setState(() {
comHandImage = comHandImg[comNum];
myHandImage = myHandImg[myNum];
resultMessage = message[(comNum - myNum) % 3] + "でーす！\n さあ、もう一度勝負だ!";
faceImage = faceImg[(comNum - myNum) % 3];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'COMとじゃんけんをしよう!!(改良版)',
style: TextStyle(fontSize: 20),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if (myHandImage != "" && comHandImage != "") ...[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Image.asset(
myHandImage,
width: 200,
height: 200,
),
),
SizedBox(width: 20),
Text(
'VS',
style: TextStyle(fontSize: 40),
),
SizedBox(width: 20),
Expanded(
child: Image.asset(
comHandImage,
width: 200,
height: 200,
),
),
],
),
SizedBox(height: 20),
Image.asset(
faceImage,
width: 200,
height: 200,
),
],
if (myHandImage == "" && comHandImage == "") ...[
Image.asset(
faceImage,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
),
],
SizedBox(height: 20),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
resultMessage,
style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => janken(0),
style: ElevatedButton.styleFrom(
primary: Colors.green[800],
onPrimary: Colors.white,
textStyle: TextStyle(fontSize: 24),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
child: Text('グー'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => janken(1),
style: ElevatedButton.styleFrom(
primary: Colors.green[800],
onPrimary: Colors.white,
textStyle: TextStyle(fontSize: 24),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
child: Text('チョキ'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () => janken(2),
style: ElevatedButton.styleFrom(
primary: Colors.green[800],
onPrimary: Colors.white,
textStyle: TextStyle(fontSize: 24),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
child: Text('パー'),
),
],
),
],
),
),
);
}
}
assetsフォルダに下記の名前の画像ファイルを入れてあります。
自分のじゃんけん画像:
myh01.png myh02.png myh03.png
相手のじゃんけん画像:
comh01.png comh02.png comh03.png
タイトル画像:
title.png
今日の学習
コードの内容について、引き続きChatGPTに聞きながら勉強してみます。
今回は、前回の下段の下記コードをChatGPTに聞いてみます。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}このコードは、Flutterで動的なUIを構築するためのウィジェットを示しています。`MyHomePage`はアプリのメイン画面を表し、`StatefulWidget`を継承しているため、内部で変更可能な状態を持つことができます。このウィジェットの状態は`_MyHomePageState`クラスで管理され、ユーザーの入力やデータの変更などに応じて動的な変化を反映させるのに役立ちます。`_MyHomePageState`クラスは`createState`メソッドで生成され、その中にウィジェットの状態に関するロジックが含まれます。状態が変更されると、関連するUIが更新され、ユーザーに最新の情報を表示します。
何となく理解。。確か前回のStatelessWidgetが動きのない静的なウィジェットだったので、今回のStatefulWidgetは動的なアプリ画面を作るためのウィジェットということかなー
今日はもう1つ次のコードもいってみよー
class _MyHomePageState extends State<MyHomePage> {
final List<String> comHandImg = ["assets/comh0.png", "assets/comh1.png", "assets/comh2.png"];
final List<String> myHandImg = ["assets/myh0.png", "assets/myh1.png", "assets/myh2.png"];
final List<String> message = ["あいこ", "あなたの勝ち", "COMの勝ち"];
final List<String> faceImg = ["assets/face01.png", "assets/face03.png", "assets/face02.png"];
String myHandImage = "";
String comHandImage = "";
String resultMessage = "";
String faceImage = "assets/title.png";このFlutterコードは、じゃんけんゲームの単純なUIを構築しています。`_MyHomePageState`クラス内で、プレイヤーとコンピューターの手の画像、勝敗メッセージ、および画面上部に表示される顔の画像を管理しています。`myHandImage`、`comHandImage`、`resultMessage`、`faceImage`はそれぞれ、プレイヤーのじゃんけんの手の画像、コンピューターのじゃんけんの手の画像、勝敗メッセージ、および画面上部に表示されるキャラクターの表情の画像のパスを保持しています。
これは、コードを見ても何となく想像がつく内容でした！
今日はここまで
flutter少しずつ学習して、いつかはストアにアプリをリリースしてみたい（という妄想をしながら、本日はここまで）
