0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Flutter環境構築】

Posted at

はじめに

Mac を使用していることを前提とした記事なので,Windows をお使いの方は戻るボタンを押していただき別の記事をご覧ください.
手順はたった3ステップ.公式ドキュメントを参照しながら進めていきます.
さっそく環境構築を始めていきましょう!

Flutter のインストール

  1. SDKをダウンロード
    基本的にはStable 版の最新バージョンをダウンロード
  2. Flutterの保存先ディレクトリを作成して,ダウンロードしたzipを解凍
    ※保存先場所は好きなところにディレクトリを作成してください.
$ mkdir /Users/(user name)/bin/flutter
$ cd /Users/(user name)/bin/flutter
$ unzip ~/Downloads/flutter_macos_2.0.2-stable.zip

パスを通す

  1. 使用しているシェルを調べる
$ echo $SHELL
  1. 使用してるシェルに応じてパスを設定する
// zshの場合
$ echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
$ source ~/.zshrc
// bashの場合
$ echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.bash_profile
$ source ~/.bash_profile
// fishの場合
$ echo 'set -x PATH ~/bin/flutter/bin $PATH' >> ~/.config/fish/config.fish
  1. 新しいターミナルを開き下記を実行し,パスが通っていればOK
$ which flutter

開発環境に必要なものを確認する

$ flutter doctor

上記を実行することで足りないもの,問題があるところを教えてくれる

  • ✔︎マーク:問題なし
  • ✖︎マーク:開発環境が不足
  • !マーク:問題あり

Android Studio

Android Studioをインストール

  1. Android Studioをダウンロード
  2. Android Studioを起動し、表示にしたがってインストール.
    ※基本的には全部Next, Finishをクリック

Welcome to Android Studioの画面が出れば成功です.

Android Studioにプラグインをインストール

Android StudioにFlutterとDartのプラグインをインストール.
起動画面から

  1. Configure->Pluginsを選択
  2. 検索ボックスにFlutterと入力
  3. Flutterをインストール
    ※DartプラグインはFlutterプラグインのインストールと同時にインストールされます.

デバイスのエミュレータをインストール

Android Studioでデバイスのエミュレータをインストール.

起動画面から

  1. Start a new Flutter projectを選択
  2. Flutter Applicationを選択してNextをクリック
  3. Project nameは任意の名前で入力しNextをクリック
  4. Company domainは任意の名前で入力しFinishをクリック
  5. エディタが表示されたら、メニューバーのTools->AVD Managerを選択
  6. Create Virtual Deviceをクリック
  7. Category->Phoneを選択されていることを確認し、任意のDeviceを選択してNextをクリック
  8. 任意のOSをDownloadをクリックしてダウンロード
  9. ダウンロードした項目を選択し、Nextをクリック
  10. 設定画面が出てきますが、何もせずにFinishをクリック

これでデバイスのエミュレータのインストールが完了しました.

Androidのライセンスを許可

Androidのライセンスを許可しないと実行した際に,!マークが出るので許可する.

$ flutter doctor --android-licenses

上記コマンドを実行するとライセンス認証画面が出てくるので yを入力し,Enterを押して許可.

flutter doctorを実行し、Android toolchainの部分に✔マークがついていれば成功.

Xcode

Xcodeをインストール

AppStoreから入手できるので,そこからダウンロードしてインストール.

CocoaPods

CocoaPodsをインストール

CocoaPodsが必要なのでインストール.

$ sudo gem install cocoapods

VSCode

VSCodeをインストール

  1. VSCodeをダウンロード
  2. 特に難しいところはないので,解凍してアプリケーションフォルダに移動

Flutterの拡張機能をインストールする

Shift+Command+Xで拡張機能を表示
検索ボックスにFlutterと入力
Flutterの拡張機能をインストール

最終チェック

flutter doctorで確認する

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on macOS 11.2.3 20D91 darwin-x64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.52.1)
[✓] Connected device (1 available)

• No issues found!

一番最後にNo issues found! と表示されていれば環境構築完了

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?