LoginSignup
5

More than 3 years have passed since last update.

MacでのFlutter開発環境構築(iOS&VSCode編)

Last updated at Posted at 2019-12-06

1.Flutterインストール

1.1 Flutterをダウンロード

FlutterのサイトからSDKをDLします。
https://flutter.dev/docs/get-started/install/macos

1.2 SDKを解凍

任意のディレクトリにSDLを解凍

$ cd ~/src
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip

1.3 パスを通す

.bashrcにパスを追加。

$ vi ~/.bashrc

[PATH_TO_FLUTTER_GIT_DIRECTORY] はflutterがあるディレクトリを指定。
今回でいうとsrcになる

export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

追加したらファイルを保存して変更を反映。

$ source ~/.bashrc

echoでパスが追加されたか確認。

$ echo $PATH

2.iOS環境のセットアップ

2.1 xcodeをダウンロード

Appストからxcodeをインストール
※macで開発してる人ならほぼインストール済みかと。。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

Xcodeライセンス契約に署名する

$ sudo xcodebuild -license

2.2 iOSシミュレーターのセットアップ

シミュレーターを起動します

open -a Simulator

メニューのHardwea>Deviceでデバイスを指定。

2.3 サンプルプロジェクトの作成と実行

任意の作業ディレクトリを作成

$ mkdir flutter_src
$ cd flutter_src

flutterコマンドを使ってプロジェクトを作成。


$ flutter create my_app
$ cd my_app

シミュレーターでアプリを起動

$ flutter run

2.3 CocoaPodsのインストール

CocoaPodsほiOSのアプリを作成する際のライブラリを管理してくれるもの。
これがないと管理が大変なので入れておきましょう。

$ sudo gem install cocoapods
$ pod setup

2.4 Xcodeのプロビジョニング

Runner > Signing & Capabilities でBubdke identifierを設定します

スクリーンショット 2019-12-06 16.11.23.png

変更したらアプリを起動。

$ flutter run

3. VSCodeのセットアップ

3.1 VSCodeをインストール

3.2 日本語化

MARKETPLACE (左メニューの四角が4つあるやつ)で
「Japan」と入力すると Japanese Language Pack が出てくるのでinstall

スクリーンショット 2019-12-06 16.32.54.png

3.3 FlutterとDartパッケージをインストール

MARKETPLACE でflutterを検索してインストール

スクリーンショット 2019-12-06 16.32.33.png

これでDartも同時にインストールされます

以上で、開発環境は完成です

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
5