11
3

More than 1 year has passed since last update.

Flutter [Android Studio]FVMを超基礎的なことから設定していく

Last updated at Posted at 2022-04-14

FVMの導入方法

今回私がFVMの設定で躓いた点を述べ、その解決策をまとめて記しておきます。
補足:筆者はM1 Macを使って行いました。

初めに

基本的にFVMの大まかな設定方法はこちらを見て貰えばわかります。
まずFVMてなんぞやって方に簡単に説明すると、共同開発をする際に
みんなのバージョンを合わしてくれるというものです。

大抵はこちらを見るとできるんですが初心者である私は色々なところでつまづいたので
この記事はそういう方に向けて書いております。

まず記事通りFVMのインストールをしましょう。

その後PATHを通すという処理を行うんですが、この処理で一回躓きました。
そこで活用したのがこの記事です。

具体的な処理

上記を見ていただくと大体は分かるんですが、忙しい人用に実行した処理を書いておきます。

1 FVMの導入

まずはFVMをPCに導入していきます。

dart pub global activate fvm

するとFVMのバージョンが書いてあるこのような文が出てきます。

fvm 2.1.3version 

これでPCにFVMが導入されました!

2ターミナルのシェルの確認

次にあなたが使っているシェルがzshなのかbashなのかを確認してください。

echo $SHELL

私の場合はこのように出ます。

/bin/zsh

上記の結果から使っているシェルはzshということがわかります。

3 dartコマンドが使えるようにPATHを通す

次はPATHを通していきます。
補足 筆者は環境がzshだっため以下はzshの処理を行なっています。

open ~/.zshrc

このようにターミナルで打つと...
スクリーンショット
上記のようなエディタが出てきます。
ここで以下の一文を追記します。

export PATH="$PATH:$HOME/.pub-cache/bin"

追記し終わったら再度ターミナルに戻り

source ~/.zshrc

これを必ず実行してください!!
こうすることによって変更が反映されます。

4 FVMの適用

最後に使用するプロジェクトをFVMに適用させていきます。
まずプロジェクトを開いてください。
あとはみなさんご察しの通りです。
プロジェクトのターミナルにて以下のコマンドを打ってください。

fvm install

すると...

Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (3 weeks ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

このような文章が出てくるのでこれでインストール完了です!!

ちなみに本当にインストールできてるか心配な方はこちらも試すといいかもです。

fvm --version

これで(2.3.1)バージョンが出てくるので少し安心できますよ。

Android Studioの設定

これでFVMの設定は終わりです!
と言いたいとこなんですがAndroid Studioの場合もう一つ処理が残っています。

まずはAndroid Studioを立ち上げてください。
そして以下の処理を行なってください。

スクリーンショット 2022-04-14 19.53.20.png

文字で表すとこれですね

Preferences > Language & Frameworks > Flutter

そして通常であれば
Languages & FrameworksのところにFlutterが出てくれるんですが
筆者の場合はなぜか出てくれませんでした😂
そんな方でもご安心ください!
無理やりだす方法を特別にお教えしましょう!!
まずこのように出てこない場合...
スクリーンショット

自分の作っているプロジェクトを開いてみてください。
そして一番下のタブバーにあるVみたいなやつをタップして設定画面を開きます。
スクリーンショット

するとあら不思議
スクリーンショット
出てきてくれました🤗
補足(先ほどのVみたいなアイコンがない場合は普通にプラグインで
Flutterをインストールしたみたいにインストールしてあげると出てきますよ。)

あとは通常にFlutter SDK path:と書いてあるところをこのように書き換えます。

 /プロジェクトのパス/.fvm/flutter_sdk

そしてApplyしてあげると成功です!!

終わり

ここまでお疲れ様でした〜
初めての記事投稿ということで少し分かりにくかったかもしれませんが、
見てくださってありがとうございました🙇‍♂️
一応この記事でわからないという場合は後で私のチャンネルの方に気が向いた時に
動画あげますので是非ご覧ください!!

11
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
3