![見出し画像](https://assets.st-note.com/production/uploads/images/124710897/rectangle_large_type_2_71526ab88e206431775c4271446c64d7.png?width=1200)
【50歳】次はflutter_1【我流リスキリング】
50歳超えた文系リーマンには、リスキリングと言われても、「デジタルスキルぐらい身につけないとリストラだ」と言われているような気がしてしょうがない。。
さて、今後のリスキリングについて、「Python」を勉強していましたが、スマホアプリを作ってみたくて、「flutter」に興味を持ちました。
↓ 前回の記事
まずは、私のMacBookに環境構築をする必要があるらしく、下記記事を参考にチャレンジ!
当然、初心者の私が1回でうまくいくはずがなく、エラーメッセージをネットで検索しながら奮闘。。。
(ネットに色々記事を書いてくれてる先輩の方々に感謝です)
![](https://assets.st-note.com/production/uploads/images/124707141/picture_pc_514eeb36ef70d19e73aa2571623d6fab.png?width=1200)
ターミナルで「flutter doctor」を実行して、全て緑色のチェック✅が付くと、環境構築完了!!
これだけで達成感(笑)
仮想のスマホ画面(エミュレーターというらしい)で画面イメージを確認しながら開発できるらしい。
早速iPhone(iOS)のエミュレーターを起動してみると、、
![](https://assets.st-note.com/production/uploads/images/124708437/picture_pc_c58d7119272ed0febec3b9d93ebd27a9.png?width=1200)
おー、iPhone15ProMax!
私はまだiPhone12なのに。。
flutterではデモプログラムがあるので、エミュレーターで表示してみます。
![](https://assets.st-note.com/production/uploads/images/124709419/picture_pc_fa010422909e10039a4812810c7361e9.png?width=1200)
右下のボタンを押すと、中央のカウンターが1増えるというプログラムです。
![](https://assets.st-note.com/production/uploads/images/124709085/picture_pc_d531584b33225f57fd4c69304eddab23.png)
ちゃんとiOS画面で操作できました!
すぐにスマホ画面イメージで確認できるのは便利ですねー!
こうなると、少しコードをいじりたくなる(笑)
全くflutterの勉強はしてませんが、コードを見たら表示される文字ぐらいは変更できそう。
![](https://assets.st-note.com/production/uploads/images/124709685/picture_pc_0de0da2ae762f0decb171855842cf96e.png?width=1200)
タイトルを「flutter記念すべき最初のデモ!」に修正!
中央の文字も修正!
コード修正したら、すぐに画面イメージも確認できて便利〜
ちなみにAndroidイメージも同様に確認できます。
iPhoneユーザーとして、Androidイメージも確認できるのは良いなぁ。
![](https://assets.st-note.com/production/uploads/images/124710108/picture_pc_4edd8a514bebb49040113b8ae499403f.png)
flutterの特徴である
「iOSとAndroid向けのアプリケーションを同じコードベースで開発できる」
を早速体感しました!
flutter少しずつ学習して、いつかはストアにアプリをリリースしてみたい(という妄想をしながら、本日はここまで)