LoginSignup
13
8

More than 3 years have passed since last update.

ZshでFlutter導入してみた(Mac用)

Posted at

今日Flutterを導入しようとして、手間取ってイライラしたので、この記事が他に同じことしようとしている人の助けになれば幸いです。
ZshでのFlutter導入の日本語のドキュメント、記事などは探したところありませんでした。なので、英語の記事とFlutterの公式ドキュメントを参考にさせていただきました。

最初に、こちらの2つの記事を参考にさせていただきました。(https://qiita.com/tomy0610/items/896dc8ec9ba95c33194f,
https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047)

ですが、こちらの記事はコマンドシェルにZshを採用している方用ではありません。

前提

Mac Catalina 10.15.2(Macbook pro 2019年モデル)
Xcode 11.3.1

環境構築手順

Flutter SDKのダウンロード

公式サイトでSDKをダウンロード。
最初にzipをダウンロードする場所はどこでもいいと思いますが、zipを解凍した後は解凍して出てきた、Flutterというフォルダを安全な場所に保管しましょう。(僕の場合は、userの下にdeveloperというフォルダを作って、そこに保管しました)

PATHを通す

まずTerminalを開きます。(Terminal見つけられない場合は、Spotlight Searchで検索してみてください)
Screen Shot 2020-02-18 at 8.59.28.png
こういう風に開けたらOKです。Terminalの上に家のロゴ的なものとユーザーネームがあるようにしてください。(Terminalでcdとタイプして、Enterでホームディレクトリに移動できます)

そこでPATHを通すために.zshrcをvimで開きます。

vim .zshrc

上記のコードをTerminalにコピーペーストしていただければzshrcを開けるかと思います。
そしてこのzshrcの中でflutterへのPATHを通すコードを書いていきます。

vimを開けたら、iを押してエディティングモードにします。

export PATH="$PATH:[FlutterフォルダまでのPATHを入力]/bin"

僕の場合は、Userの下のDeveloperというフォルダにflutterフォルダがあるので、コードは下のようになります。参考にしていたいただければ幸いです。

export PATH="$PATH:/Users/[僕のUSERNAME]/Developer/flutter/bin"

ご自分のPATHが入力できたら、escキーを押して、:wq!とタイプ。そしたら、元のホームディレクトリに戻れると思います。
そしたら、Terminalのタブをいったん閉じて、新しいタブを開きましょう。

ちゃんとPATHが通ったか確認しましょう。

which flutter

# 以下の様にパスが出ればOKです
/Users/[僕のUSERNAME]/Developer/flutter/bin/flutter

依存性確認

flutter doctorとTerminalでタイプし、依存性の確認をしましょう。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.2 19C57,
    locale en-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.42.0)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

上記のように表示されれば、大丈夫です。

ここでエラーが出てきても焦らないでください!

エラーが出ても、だいたいの場合は何はダウンロードしていないか、プラグインをインストールできていないだけなので、Terminalに出てくる指示にしたがってゆっくりダウンロードしていきましょう。

こちらの記事環境構築手順:おまけの章が参考になると思います。

エラーがなくなったら、環境構築完了です。お疲れ様でした!!

参考にした記事

13
8
3

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
13
8