【2024年最新版】初心者でもできるFlutter環境構築ガイド

# 目次
- [はじめに](#はじめに)
- [環境情報](#環境情報)
- [Flutterについて](#Flutterについて)
- [環境構築](#環境構築)
    - [Appleシリコン搭載のMacでの注意点](#Appleシリコン搭載のMacでの注意点)
- [サンプルアプリの実行](#サンプルアプリの実行)
- [開発Tips](#開発Tips)
- [Flutter Doctorの実行](#Flutter-Doctorの実行)
- [よくあるエラーとその解決方法](#よくあるエラーとその解決方法)
- [動画チュートリアル](#動画チュートリアル)
- [サンプルコード](#サンプルコード)
- [まとめ](#まとめ)

# はじめに
Flutterに興味があるけれど、環境構築が不安なあなたへ！
この記事では、必要なツールのインストールから初期設定、アプリの実行までを丁寧に解説します。

# 環境情報
```
MacOS: Sonoma14.4.1
CPU: Apple Silicon
VScode: 1.89.1
```

# Flutterについて
FlutterはGoogleが提供するオープンソースのフレームワークで、単一のコードベースでiOSとAndroid向けの美しいネイティブアプリを開発できます。
高速なパフォーマンスと豊富なウィジェットにより、開発者に柔軟性と効率を提供します。
多くの企業や開発者が採用しており、人気が急速に高まっています。
Flutterの開発には、Dartという言語を使用します。

# 環境構築
以下のFlutterのサイトを開きます。
[Flutter Install MacOS](https://docs.flutter.dev/get-started/install/macos)

最初に、公式サイトからFlutterをダウンロードします。今回はiOSを選択します。

![スクリーンショット 2024-05-18 19.02.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/5a851e35-85e0-c5bd-7c1f-c7de69640c54.png)

**Start building Flutter iOS apps on macOS**という画面が開きます。
以下の注意点をお読みください。

## Appleシリコン搭載のMacでの注意点
Appleシリコン（M1やM2などのチップ）を搭載したMacでFlutterを使用する場合、一部のコンポーネントの動作にはRosetta 2という翻訳レイヤーが必要です。これは、Intel用に開発されたソフトウェアをAppleシリコン上で実行可能にするためのエミュレーション技術です。

Rosetta 2をインストールします
```shell
sudo softwareupdate --install-rosetta --agree-to-license
```
---

Rosetta 2をインストールしたら次に進みます。

今回は環境構築を省力化するために[VScode](https://code.visualstudio.com/docs/setup/mac) とVScodeの[Flutterのプラグイン](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)を使用します。

+ [VScode](https://code.visualstudio.com/docs/setup/mac)
+ [Flutterプラグイン](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
（FlutterプラグインはVS Codeのプラグインインストール画面で「Flutter」と検索してインストールするのが簡単です）
![スクリーンショット 2024-05-18 19.18.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/92c9d178-287e-657d-0395-0b0fa489ec0d.png)

次に、Flutterをインストールしていきます。VScodeを開きます。
Command + Shift + Pを押し、コマンドパレットを開きます。
「Flutter: New Project」を選択します。
![スクリーンショット 2024-05-18 19.21.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/a1ac6b87-c1ba-e653-1a25-51cdeb74a1c1.png)

Flutterのテンプレートを選択する画面が表示されますので、「Application」を選択します。
![スクリーンショット 2024-05-18 19.28.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/f414f2bb-4b90-04d1-3df7-31c4483e768e.png)

プロジェクトフォルダーのルートディレクトリを選択し、プロジェクト名を入力します。
![スクリーンショット 2024-05-18 19.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/f14b51fa-e3c1-0d2d-ffab-0bf8b3b7de71.png)

プロジェクトが作成されたら環境構築は完了です。
![スクリーンショット 2024-05-18 19.32.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/35bc843d-4478-391d-63ac-0c647ec32fd5.png)

# サンプルアプリの実行
作成したアプリを動かしてみます。iOSアプリをエミューレーター上で起動します。

Command + Shift + Pを押し、コマンドパレットを開きます。
「Flutter: Select Device」を選択します。
![スクリーンショット 2024-05-18 19.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/63131904-7c17-4200-4205-4e1f3e2cf7fa.png)

「Chrome」を選択します。
![スクリーンショット 2024-05-18 19.42.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/83065409-a8ea-8539-4195-e1a3f22dc442.png)

VScodeの「実行とデバッグ」を実行します。しばらく待つと下記のウインドウが開きます。
![スクリーンショット 2024-05-18 19.45.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/4ddfcdf8-315c-1cc1-efd7-854c2481eebd.png)

カウンターアプリが起動します。右下の+ボタンを押すと、画面中央の数字がカウントされていきます。

以上でアプリの実行は完了です。

# 開発Tips
### ホットリロード
Flutterは、ホットリロード（アプリを再起動したり状態を失ったりすることなく、ライブ実行中のアプリのコードをリロードする機能）による高速な開発サイクルを提供します。

アプリのソースコードを変更し、VS Codeでホットリロードコマンドを実行して、ターゲットデバイスでの変更を確認できます。

### その他
- [Flutter公式ドキュメント](https://docs.flutter.dev/)
- [Flutterコミュニティ](https://flutter.dev/community)
- [Flutterの学習教材](https://flutter.dev/docs/get-started/codelab)
- [Flutterサンプル](https://flutter.github.io/samples/#)
- [FlutterAPI](https://api.flutter.dev/)
- [ウィジェットカタログ](https://docs.flutter.dev/ui/widgets)

---

### Flutter Doctorの実行
Flutterの環境を正しく構築できたか確認するために、「Flutter Doctor」を実行します。Flutter Doctorは、環境構築に必要なツールや設定が正しくインストールされているかチェックしてくれます。

ターミナルを開き、以下のコマンドを実行します。
```shell
flutter doctor
```
コマンドの実行結果を確認します。必要なツールや設定が欠けている場合、Flutter Doctorがそれを指摘し、修正方法を提案してくれます。

# よくあるエラーとその解決方法
###  Xcode installation is incomplete
+ エラー内容：Xcodeがインストールされていない、または設定が完了していない。
+ 解決策：[App StoreからXcode](https://apps.apple.com/jp/app/xcode/id497799835?mt=12)をインストールし、インストール後にXcodeを一度起動して設定を完了させます。その後、再度ターミナルで以下のコマンドを実行します。
```shell
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```
### Unable to locate Android SDK.
+ エラー内容：Android SDKがインストールされていない。
+ 解決策：[Android Studio](https://developer.android.com/studio?hl=ja)をインストールし、SDK Managerから必要なSDKツールをインストールします。その後、Flutter Doctorを再度実行して確認します。

### CocoaPods not installed.
+ エラー内容：CocoaPodsがインストールされていない。
+ 解決策：[CocoaPods](https://guides.cocoapods.org/using/getting-started.html#installation)をインストールします。以下のコマンドをターミナルで実行します。
```shell
brew install ruby
sudo gem install cocoapods
```
インストールが完了したら、以下のコマンドを実行しCocoaPodsのセットアップを完了します。
```shell
pod setup
```

### Unable to get list of installed Simulator runtimes.
+ エラー内容：Xcodeがインストールされているシミュレータランタイムの一覧を取得できない。
+ 解決策：
    1.Xcodeを最新バージョンにアップデートします。
    2.Xcodeを開き、Settings > Platformsを選択し、iOS xx.xをインストールします。
    3.以下のコマンド実行し、Xcodeを再設定します
    ```shell
    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    sudo xcodebuild -runFirstLaunch
    ```

### Device not detected.
+ エラー内容：接続されたデバイスが認識されない。
+ 解決策：デバイスのUSBデバッグモードが有効になっているか確認します。iOSデバイスの場合は、信頼済みのデバイスとして設定されているか確認します。また、デバイスの接続を再確認し、再度Flutter Doctorを実行します。

# 動画チュートリアル
以下のYouTube動画では、Flutterの環境構築手順を実際に見ながら進めることができます。
+ [Flutter大学](https://www.youtube.com/@flutteruniv)
+ [Flutter 入門講座](https://www.youtube.com/watch?v=GN6HXSrObzg&list=PLY1cxwSQf6nz6zo2Y_UJlDjGOpASAO4hd)

# サンプルコード
以下は基本的なTODOアプリのサンプルコードです。
```dart:lib/main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoList(),
    );
  }
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  final List<String> _todoItems = [];

  void _addTodoItem(String task) {
    setState(() {
      _todoItems.add(task);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TODOリスト'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_todoItems[index]),
          );
        },
        itemCount: _todoItems.length,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _displayAddTodoDialog(context),
        tooltip: '追加',
        child: Icon(Icons.add),
      ),
    );
  }

  void _displayAddTodoDialog(BuildContext context) async {
    String newTask = '';
    await showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('新規'),
          content: TextField(
            onChanged: (String value) {
              newTask = value;
            },
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('取り消し'),
            ),
            TextButton(
              onPressed: () {
                if (newTask.isNotEmpty) {
                  _addTodoItem(newTask);
                }
                Navigator.pop(context);
              },
              child: Text('追加'),
            ),
          ],
        );
      },
    );
  }
}
```

# まとめ
この記事では、Flutterの環境構築手順について初心者向けに解説しました。以下は主要なポイントです。

1. **Flutterの概要**: FlutterはGoogleが提供するオープンソースのフレームワークで、単一のコードベースでiOSとAndroid向けのネイティブアプリを開発できる。
2. **環境構築の手順**: MacでのFlutter環境構築のステップを詳しく説明し、必要なツールのインストール方法を解説。
3. **Appleシリコン搭載のMacでの注意点**: Appleシリコンを搭載したMacでFlutterを使う際には、Rosetta 2のインストールが必要。
4. **サンプルアプリの実行**: 簡単なカウンターアプリを作成し、実際に動かす手順を紹介。
5. **開発Tips**: ホットリロード機能を活用して、効率的な開発サイクルを実現する方法を紹介。
6. **Flutter Doctorの実行**: 環境構築後にFlutter Doctorを実行し、必要なツールや設定が正しくインストールされているかを確認。
7. **よくあるエラーとその解決方法**: 環境構築時によくあるエラーとその解決方法を紹介。

### 次のステップ
Flutterの環境構築が完了したら、ぜひ様々なアプリ開発に挑戦してみてください。Flutterの公式ドキュメントやコミュニティフォーラムも活用しながら、より高度な機能やテクニックを学んでいきましょう。

この記事が役に立ったと思ったら、いいねやストックをお願いします！！