Re:ゼロから始めるスマホアプリ開発 Flutter導入編

## はじめに
初めまして！
最近、Warlanderにハマっているエンジニアです。
Flutterを使ったスマホアプリに挑戦してみたいと思います。
今回は最初なので、Flutterを導入して、エミュレータでサンプルを動かすところまでやってみます！
スマホアプリの開発は初心者なので生暖かい目で見てくれると幸いです。

ちなみにいくつかに分けて投稿していくので最終的には何か一つアプリを作りたいと思っています！

## この記事のゴール
Flutterの導入から、エミュレータを起動してサンプルを動かすところまで。

## Flutterとは何ぞ？
クロスプラットフォームアプリケーション開発に秀でたフレームワークです。
言語はdartという言語使って開発します。
AndroidでもiPhoneでもwebでも何でも開発できちゃうので、開発にかかる負担が少なくなるといった感じです。
ただ、OS独自の機能は別途ネイティブなコードで実装する必要があるようで、完全に開発を一元化するといったことはできないようです。

## 制作環境
実装用PC：windows11
エディタ：Visual Studio Code、Android Studio
確認用実機：Google Pixel 5a

今回はAndroid用のアプリを作っていきます。
iPhoneはXcodeが必要なので今回は見送ります。
~~Appleって閉鎖的なんですよね。~~

## Flutter 導入
まずは、FlutterのSDKをダウンロードします。
1. 公式サイトからwindowsを選択
https://docs.flutter.dev/get-started/install
![スクリーンショット_20230130_215051.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/2ba2bff8-cf63-3f93-a7eb-3162b2bd4f91.png)

2.  Flutter SDKをダウンロード
![スクリーンショット_20230130_215613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/9c3abe63-053d-0f2e-9917-b5eda3d9690d.png)

3. ダウンロードしたものを解凍して、任意の場所に配置します

4. 環境変数を設定します
下記のパスを通してください。
手順は https://www.howtonote.jp/windows11/blog/index11.html が参考になるかと思います。
ユーザのシステム変数のpathを編集してください。
    ```
    flutter_windows_3.7.0-stable\flutter\bin
    ```

5. コマンドプロンプトで以下のコマンドを実行します
    ```
    flutter doctor
    ```
Flutterのインストールがうまくいっているか確認できます。
![コマンド プロンプト - flutter  doctor 2023_01_30 22_16_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/7bd81dc9-8123-643d-4209-4f196690dc71.png)

## Android Studio 導入
1. 公式サイトからAndroid Studioをダウンロードしてインストールします。
https://developer.android.com/studio
![スクリーンショット_20230130_223619.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/6f6441da-71b4-2f79-306c-f316f4f15988.png)

2. PluginsからFlutter Pluginをインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/b2b7cb66-7433-7b29-ba06-98043ba4b3b5.png)

3. Android SDK Command-line Tools をインストールします
    1. 「More Actions」を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/d7555236-a757-17b2-bb31-dfe36ba6c19c.png)
    2. 「SDK Manager」を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/a07e2f33-dc1d-a79c-b184-0b813c26edc9.png)
    3. 「Android SDK Command-line Tool」にチェックを入れてインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/a6696378-0a20-a70d-867c-072fa8487314.png)

## Licenses認証
1. コマンドプロンプトで以下のコマンドを実行します
    ```
    flutter doctor
    ```
    Androidと記載してある部分が黄色くなっていることを確認します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/f925863e-f935-9e36-59bc-15026436767e.png)

2. 以下のコマンドを実行します
    ```
    flutter doctor --android-licenses
    ```
    ここで下記みたいなエラーが表示されたらJAVA_HOMEが環境変数に設定されてないので、設定しましょう。
    ```
   ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Java\jdk-18.0.2.1
    ```
    その後、いろいろ聞かれますが、すべてyesで問題ないです。
    下記の文言が表示されればOKです。
    ```
    All SDK package licenses accepted
    ```
## Android仮想環境作成
1. 「SDK Manager」から「Virtual Device Manager」を押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/462d9120-41ef-7d51-8124-1f4ac9663392.png)
　
2. 「Create virtual device」を押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/5a803e0c-4c11-c3ef-5d0a-6169f0e8d750.png)

3. 適当な端末を選択してしてNextを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/c7113b5f-9301-7644-def4-747cb8e9d85a.png)

4. 端末に乗せるOSを選択してNextを押下する
ちなみに、最初はダウンロードから入るのでちょっと時間がかかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/48c9db2d-8900-517f-3a1e-12b561931cbe.png)

5. 仮想端末の名前を設定する
ここで先ほど選択した端末やらOSやらを選び直せるみたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/26d24edf-d92a-f25b-ccf4-9f7d39a7d513.png)

これで仮想端末の作成は完了！

## Visual Studio Codeの設定
Visual Studio Codeは以下からダウンロードしてください。
https://azure.microsoft.com/ja-jp/products/visual-studio-code

1. FlutterプラグインをインストールしてVisual Studio Codeを再起動してください。
![vscodepng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/002dfb25-9982-32dc-d832-a9b32a6a03aa.png)

2. プロジェクトを作成する

F1を押下して、「flutter」と入力して、「New Project」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/13166db8-1f29-7f0f-563a-33a2ff512851.png)

その後、「Application」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/55d2be27-d51f-e7ac-73f3-0b189b13b369.png)

適当な名前を付けて、任意の場所に配置してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/f54f016b-f25b-a564-cea6-107ebefc4c2a.png)

すると、何やら勝手に色々と生成されてました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/7be9584b-3393-bd6c-7d3b-57296a850d0f.png)

## とりあえず、動かしてみる
1. 右下の「Windows」と表示している部分を押下します
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/3e801822-3bf5-786e-47b8-b5cb769b0458.png)

2. 先ほど作成したエミュレータを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/dacfe60b-e263-38bf-dd71-3d88e8d58fc0.png)

3. するとエミュレータが立ち上がります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/0bb5e8ee-b97b-d16a-0cf5-c89e505a5f23.png)

4. この状態から上部のメニューから「ターミナル」から「新しいターミナル」を選択して、「flutter run」と入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/844954cc-3cbe-222b-a06b-fe25b3e48f2e.png)

エミュレータが立ち上がった！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112426/324138e5-fc60-a2dd-49dd-e11ef6b83d89.png)

## 次回
とりあえずサンプルを動かせる環境まで作れました。
Flutterにはホットリロード機能が付いてるいるので、その辺りを使ってみてFlutterを実際に触ってみたいと思います！