Flutter入門の入門 触りはじめの10分(インストール ＆ Run)

Flutter...最近beta版でましたよね。
普段Androidアプリ開発をしている身としては**「　嫌でも気になる！！　」**
これからFlutterアプリを開発する機会が来た時のためにデバックだけでもできたらいいなくらいで調べてみました。
この記事は自分のメモ程度です。

Flutter、「なんぞや🤔」という人は以下の記事を見ると興味が湧くかも。
https://www.gizmodo.jp/2018/02/google-flutter-sdk.html

# いざ、Flutter入門！！ 🙇

> 今回の記事ではFlutterがどういうもので、言語で使うDartがどういう文法なのかみたいな事については書きません。
>　Runまで一直線です

## GOAL

iOS, Androidでとりあえずデバッグ確認（ちゃんと動くかだけ）

![Screen Shot 2018-03-03 at 23.32.12.png](https://qiita-image-store.s3.amazonaws.com/0/73994/23b46528-38c1-e44c-7b09-f8230b152056.png)

## 使用したもの

* git
* homebrew (開発環境がMacだったため)
* intellij　（公式の推奨はVScode or intellij）

使うツールは先に入れておきましょう。

## 手順

1. Dartのインストール　✨
2. Flutterのインストール　✨
3. Run　🎉

### ✨　Let's install Dart

`Dart`を`Homebrew`でインストールしましょう！！

[Dart公式のインストール方法](https://www.dartlang.org/install/mac)には何種類かにわかれて書かれてました。

> Web開発作業にDartを使用する場合は、DartiumとContent Shellもインストールする必要があります。

今回はWeb開発作業はしませんがオプションつけてインストールしました。

```shell
$ brew tap dart-lang/dart
$ brew install dart --with-content-shell --with-dartium
```

他にも開発者チャンネルで開発したい人は`--devel`つけてインストールしてねってありました。

まぁ用途別にインストールすればOKってことです。
> You can use any combination of the --devel, --with-dartium, and --with-content-shell options.

これで`Dart`のインストールは完了です。💪

### ✨　Let's install Flutter

`Flutter`を`git`でインストールしましょう！！

[Flutter公式インストール方法](https://flutter.io/setup-macos/)には以下のように書かれていました。

> If this is the first time you’re installing Flutter on this machine, clone the beta branch of the repository and then add the flutter tool to your path:

初めてインストールする際は`beta`レポジトリをクローンしてねと。

```shell
$ git clone -b beta https://github.com/flutter/flutter.git
```

pathの設定を`.zshrc`や`.bash_profile`などに書いちゃいましょう！

```$HOME/.zshrc
export PATH=$HOME/flutter/bin:$PATH
```

書き終えたら`source .zshrc`を実行

☝🏻
>　今回は＄HOMEディレクトリにflutterをクローンしている前提で書いています。
> 他のディレクトリにクローンしてそこから使いたいのであれば$HOMEの部分をflutterファイルのある`pwd`に変えてください。

最後に`Flutter doctor`コマンドを実行します。

実行すると依存関係のチェックをしてくれます。
自分の場合、`iOS`の開発環境が皆無だったためそのへんで注意が出ました。

* AndroidStudio
* Xcode

上記ふたつは先に入れて置くと便利かもしれません。

なにはともあれ、これで`Flutter`のインストールも完了しました。💪

🙇　Flutterの公式に以下のような記載がありました。
> This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

公式にDartは個別でインストールする必要はありませんと書いてありました。

### 🎉 Run

ではでは早速動かして見ましょう！！

#### プラグインのインストール　✨

動かす前に`intellij`にプラグインをインストールしましょう。

`intellij`を立ち上げて右下にある`Configure`をクリックします。

<img width="802" alt="Screen_Shot_2018-03-04_at_1_01_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/73994/7f56fe0b-aa85-c32d-703d-ec04f57e76cf.png">

プルダウンメニューに出てくる`Plugins`をクリックします。

次に`Browse repositories...`というボタンがあるのでそちらをクリックします。

<img width="815" alt="Screen_Shot_2018-03-04_at_1_05_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/73994/6ae3c9f3-5295-d785-766e-600532f10fa9.png">

上にある検索欄に`Flutter`と打ち、`install`ボタンをクリックします。
自分は一応`Dart`のプラグインもインストールしました。
インストールが終わったら`intellij`を再起動します。

#### プロジェクトの作成

再起動が終わったらついにプロジェクト作りです。
intellijを立ち上げて

1. `Create New Project`をクリックします。

1. `Flutter　SDK　path`があっていることを確認してください。
なければ自分でクローンした`flutter`ファイルまでのPATHを書けばOKです。

1. `Next`をクリックします。

1. `Project name`を適当にいれます。（何でも好きな名前で`first_flutter_project`みたいにアンダーバーでつなげる形で）
これは個人的な好みなのですが、`Android　language`はKotlin、`iOS language`はSwiftに選択しました。

1. 後は`finish`ボタンを押すだけです。

以上の事を完了すればプロジェクトが立ち上がります。

あとはRunボタンを押せばいいだけの話なのですが、`iOS`の方はここからXcodeで設定を入れてあげる必要があります。
Androidももしかするといるかもしれませんが自分がAndroidStudioを普段から使っているので飛ばしてしまっているかもしれません。

##### `iOS`でのデバッグについて 🌟

`iOS`アプリをデバッグするにはAppleアカウントが必要なようです。
この辺`iOS`アプリ開発未経験なのでよくわかっていません。 👻

###### 手順

1. `Xcode`を開きます。

2.　先程自分の作った`flutter project`フォルダ内の`ios`を開きます。

3.　`Runner`というディレクトがあるのでそこをクリックして、`General`の`Signing`で`Add Account...`をクリックしてアカウントを追加してあげればOKです。


# Flutter少し調べてみて
UIパーツが豊富になればなるほど強力になってくるのかなと思いました。（今でも十分強力ですが笑）
何より新しい事やると自然とモチベーションも上がってよかったです。
少しコードも書いてはいますが、まだテンプレ少しいじったくらいで本格的には触っていないので空き時間見つけて追っかけていきたいです。