Help us understand the problem. What is going on with this article?

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

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をインストール

https://code.visualstudio.com/

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も同時にインストールされます

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away