【Flutter】Flutterの環境構築


開発環境
⭐️Flutter
（flutter_macos_v1.9.1+hotfix.5-stable）

⭐️Android Studio 3.5.1
⭐️Xcode１１.２ beata

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">✨✨Flutter(フラッター)✨✨<br>Flutterの環境構築と「Hello World」を表示してみたよぉ😍<br><br>Flutter(フラッター)は Dart というGoogle が開発している言語🧸🧸<br>同じコードで 🐸Androidと🍎iOS 両方の📲アプリを作る事ができるフレームワーク😊<a href="https://t.co/s7hYorzwhn">https://t.co/s7hYorzwhn</a><a href="https://twitter.com/hashtag/Flutter?src=hash&amp;ref_src=twsrc%5Etfw">#Flutter</a> <a href="https://t.co/Lxww6AtXd9">pic.twitter.com/Lxww6AtXd9</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1186695340512038919?ref_src=twsrc%5Etfw">October 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# Flutter SDKをダウンロードする
下記のサイトにアクセスする
https://flutter.dev/

「Get started」を選択する
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/21404c91-e980-7cda-78ba-b721520ab107.png)

開発環境を選択する。ここでは「Mac OS」を選択した。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ba16e63a-e571-ed82-e148-f77a72407f05.png)

「flutter_macos_v1.9.1+hotfix.5-stable.zip」をダウンロードする

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7c4f5902-1c36-ad0d-a657-5493c2fb9a92.png)

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/071922bc-d2c2-70b8-b118-b79cbe3a803b.png)



「flutter_macos_v1.9.1+hotfix.5-stable.zip」を展開すると「flutter」フォルダができます。

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c4c25562-75b6-a2bd-34a4-ed026570a3ea.png)

flutterのbinにパスを通します。

```
vi ~/.bash_profile
```

下記を追加する

```
export PATH=/Users/dev/flutter/bin:$PATH
```

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a0d1fed7-0d32-c56c-0efd-3278018315cc.png)

ソースコマンドで反映する

```
source ~/.bash_profile
```

flutterのバージョン確認をします。

```
flutter --version
```

下記の表示になれば、OK！

Flutter 1.9.1+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 1aedbb1835 (4 days ago) • 2019-10-17 08:37:27 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/efec384f-f1ea-d81e-3523-407d4bdc650d.png)

Flutter　SDK 設定完了！

# Android Studio

Android Studioのバージョンは、3.5.1で実施しました。

<img width="499" alt="スクリーンショット 2019-10-23 0.18.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bf86921d-c399-f174-3dc4-9f5b42cfd0ca.png">

# Android StudioにFlutterのプラグインをインストールします。

「Android Studio」ー「Preferences」を選択します。

![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d1d217cb-8025-6a00-4192-851d152d44d2.png)

「Plugins」タブを選択し、検索エリアで「Flutter」と入力してします。
Flutterをインストールします。

![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5e8dca8a-7a07-9157-0675-0f205740e9af.png)

# Flutterの新規プロジェクトを作成します。
「File」ー「New」ー「New Flutter Project」を選択します。

![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bf419f19-29f9-13d7-e427-891a7d84ed75.png)

Flutter Applicationを選択します。

![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3e97c2cf-5076-bca5-7882-4e98af7eee6d.png)

アプリ情報を入力します。
Project name　プロジェクト名
Flutter SDK path　Flutter SDKのパス
Project Location　保存場所
Description　説明文

![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fc7631aa-51c9-86bf-77ae-014a44873090.png)

パッケージ名を入力します。
Company domain　ドメイン名
Platform channel launguage　Android用にKotlin、iOS用にSwiftをサポートするかの確認。両方チェックONでOK。
![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/78ed1a2d-ac62-51e1-86dd-95b804a174dd.png)

プロジェクト作成完了！

では、Android Studioでエミレーター起動してみた。

事前にAVDとSDKのエミレーター設定済み。

Androidエミレーターを選択する
![015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/12f76f68-eac5-3709-3833-87022417d308.png)

![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/02736771-11bb-c703-ddb9-5ca9d9475e3b.png)

Androidエミレーター起動成功

![017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/15587774-6054-fa18-f257-8da31517b89d.png)

iPhoneエミレーターを選択する

![018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dad01a9f-bf0e-45d7-5bbe-bf9ae46ca76b.png)

![019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e05af217-9ebe-321d-8e66-0eb92a6f357b.png)

iPhoneエミレーター起動成功
![020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b6cd8d53-5f7a-bc21-e68d-78a34bcd5cb5.png)