だら$ちっぷす

仕事の覚書です

flutter開発環境構築 その1.flutterインストール、Android Studioインストール、Visual Studioインストール

AndroidiPhoneとを共通で開発できるflutterなるものがあると聞き及んだので試してみようと思う。

ぐぐった。おおー、Googleのやつなのねー。
codelabs.developers.google.com
windowsMacLinux、web(web?どういう意味やろ?ブラウザ対応?PaaSとかIaaSとか?)でも使えるらしい。
なにその万能感。( ゚o ゚)


基本的に、上記記述に沿って開発環境を構築しようと思います。
自分のマシンはwindows10です。


エディタ
  なんでもええらしい。
  自分はnode.jsでVScode使てるんで、そのままそれを使います。


開発ターゲットを選ぶ
 pixel7使てるんで、androidで。。。と思ったら、そういう意味ではないようだ。
 開発マシンがwindowsなんで、windowsを選ぶ方がいいらしい。


FlutterSDKをインストールする


docs.flutter.dev

docs.flutter.dev

ここからは、基本的に上記のサイト(Windows install | flutter)の記述に沿ってインストールしていきます


FlutterSDKを入手する



 zipが落ちてくるので、インストールしたいディレクトリに置いて、解凍。
 (解凍=インストールなやつのようです。インストーラはありません)
 このとき、ディレクトリ名に特殊文字とかスペースを含んではだめ。
 昇格した特権が必要なディレクトリに置いてはだめ。例えばちょっと置きたい気持ちになるけど、program Filesの下とかはダメ。(まあ、スペース入ってるしそこであかんわなー)

 わたしは、まあ、適当に「c:\google\flutter」にしました。
 お手本はc:\src\flutterなんだけど、なんかc:\直下にsrcって名前のディレクトリ置くのってやだなーって感情で。^^;


flutter\binにパスを通す







ちゃんとできてるかドクターに診断してもらう

 実行できる環境になってるかどうか、ドクターが診断してくれるらしい。
 助かる。^^

 C:\google\flutter>flutter doctor



 なんかキャッシュが残ってるぽい?
 指摘されてる通り、dart pub cache clean を実行してみた。



 なくなった。めっちゃ親切やな。感動。
 次いきます。
 自分の環境では3つほど必要なものがないらしいが、インストールの手引書通りに進めれば全部入るのかな?


Android Studioをダウンロード

developer.android.com



 同意する。



 「プロフィールを作成」を選んでみたらなんか色々入力しないといけなかったんで、やめて、「表示しない」を選んだ。



Android Studioをインストールする

 上記ダウンロードで落ちてきたexeを起動。



 ざくざく進めて…

 完了。結構時間かかった。



 flutter doctor で確認


 Android studioが√になった。^^v


 ここで、お手本に沿って、
  Androidバイスをセットアップする
  Androidエミュレータをセットアップする
 をしたんやけど、ドクターの診断に変更はなかった。
 多分、今、やらなくてもいいと思う。
 ごちゃごちゃするので「flutter開発環境構築 その2」に移します。


 また、お手本通りにやったら他の足りないものが入ると思ってたのに入らなかったんで、行き詰まって、他にインストールしてはる人のブログとか漁ってみた。
 そしてたら、flutterプラグインていうのをインストールしてはったんで、これ入れたら万事解決か?!と思って入れてみた。


flutterプラグインをインストール


 Dartも一緒にいれますか?て聞かれて、はい。て答えたかも。スクショ撮ってない(><;
 プラグインの一覧にDartもあるのでもしかしてInstalledになってなかったらinstallしといた方がいいと思います。



 結果、なんも解決せんかった。悲しみ。(つ﹏<)・゚。
 でも、これはいずれにせよ必要な気がするんで、よかったことにする。
 気を取り直して、ドクターの言葉に耳を傾けて、問題点を1個ずつ潰していく。


Google USB ドライバをインストール

developer.android.com




Android SDK Command-line Toolsをインストール




Androidライセンスに同意する




Android toolchainがOKになった!^^v


残るはVisual Studioか。。。というところで一旦中止。他の仕事します。

  三(‘ω’)三( ε: )三(.ω.)三( :3 )三(‘ω’)三( ε: )三(.ω.)三( :3 )ゴロゴロゴロ

久々に続きをやります。
flutter doctor を走らせたら、後1つ足りないのと、バージョンアップしろというのが来ていました。



とりあえず指示通りのコマンド打ち込んでバージョンアップしました。

  C:\google\flutter>flutter upgrade

バージョンアップも教えてくれるのか。親切やなー。^^
さて。最後に残ったVisual Studio関連に取り掛かる。


Windowsのセットアップ

 C#いろてるからVisual Studioは入れてるのになんであかんのかなーとおもてんけど、そういえばC++を入れてなかったかも。

learn.microsoft.com

 インストーラ(VisualStudioSetup.exe)を起動。
 インストーラ、既に入ってるVisual Studioのメニューかスタートメニューにあるかなあ?と思って探したけど見つからなかったです。そういうものなの?exeを探し出してダブルクリック。



 これかなあ?と思って「C++によるモバイル開発」にチェックをつけて、「変更」をクリック。
 結果、ドクターの診断は変わらなかったので、これは必要ないかもです。一応、入れたので書いとく。



 インストール、めっちゃ時間かかりました!><

 ドクターに見てもらったが状況変わらず。
 もしかしたら、こっちかな?

 「C++によるデスクトップ開発」にチェックをつけて、「変更」をクリック



 またまた、めっちゃ時間かかります!
 しかも今度はインストール終わったら「再起動した方がいいよ」て言われました。
 マシンを再起動する。
 ・・・もしかしたら、Visual Studioを再起動って書いてただけかも?^^;

 まあ、ええわ。患者の意識が戻りました!ドクター!



 うおおおお!✧
。٩(ˊᗜˋ)و✧。やった!ドクターのお許しが出ました!完全体です!



Android Studio日本語化

後、ついでなので、Android Studioを日本語化しておきます。


日本語化パックはマーケットプレイスにないので、JET BRAINS のサイトからダウンロードしてきます。
plugins.jetbrains.com
Android Studioを起動して、「設定」→「About」

バージョンをチェックする

該当するバージョンのプラグインを選んで、ダウンロード



Android Studioの「plugin」のタブで、「設定」→「Install Plugin from Disk...」

ディスク上からダウンロードしたファイルを選択して「OK」

日本語化パックが表示されるので、「Restart IED」をクリック

「Restart」をクリック

再起動されて、日本語になりました!じゃーん!°˖✧◝(⁰▿⁰)◜✧˖°

プラグイン」「インストール済み」に入ってるのを確認