Flutterの導入に苦戦した話1️⃣-SDK導入編
はじめに
最近Kotlinを用いてAndroidアプリを開発していましたが、IOSやWebにも対応したいなと思いFlutterに手を出してみました。
その際環境構築に苦戦したのでまとめておきます。
使用機器
M1MacBookAir(Sonoma 14.2.1)
Flutterの導入
FlutterSDKのインストール
↑よりFlutterSDKのインストールをしてください。
今回Apple SiliconのM1を使用しているので、右側のものをインストールします。
ダウンロードしたzipファイルを解凍するとFlutterフォルダができるのでテキトーなディレクトリに置きます。
今回はホームディレクトリに置きました。
早速コマンドを打ってみましょう
コマンドが見つからないようです。
このようにインストールしただけでは使うことができませんflutterコマンドを使うにはパスを通してあげる必要があります。
Flutterへパスを通す
ターミナルを開く
ウィンドウ上部に書いてある文字を確認
今回の場合zshと書いてありますね、もしかするとbashの方がいるかもしれませんが大体の流れは変わりません。
zshのプロファイルを編集
次のコマンドを入力してください
#zshの人
vim .zprofile
#bashの人
vim .bash_profile
このコマンドを入力するとvimというエディターでzprofile(bash_profile)が編集できます。
下にこのような表記が出てくると思います。
Swap file ".zprofile.swp" already exists!
[O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it, (Q)uit, (A)bort:
今回は編集を行いたいのでEキーを押して編集モードにします。
次にIキーを押してinsertモードにします。
画面上にexport ***のような物がいくつか並んでいると思います。
その下あたりに以下のコマンドを追加します。
export PATH=”$PATH:$[保存したパス]/flutter/bin”
追加できたらESCキー->:wqと入力し編集を終了しましょう。
通常のターミナル画面に戻ってきたら
flutter --version
を実行してください。
Flutter 3.16.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b0366e0a3f (8 days ago) • 2023-12-05 19:46:39 -0800
Engine • revision 54a7145303
Tools • Dart 3.2.3 • DevTools 2.28.4
のように表示されたらFlutterの導入完了ですお疲れ様でした。
おわりに
ここまでで苦戦することはあまりないと思いますが大変だったのはここからです。
flutter doctor
のコマンドを打つと何個かチェックマークがないところがあると思います、Flutterの導入はできましたが各開発環境の準備ができていないのです。
FlutterはAndroid,IOS,Webの開発ができるのでそれぞれの開発環境も整えてあげないといけません。
次回↓は各環境の準備について触れていきます。
Discussion