目次

はじめに
環境情報
Flutterについて
環境構築
- Appleシリコン搭載のMacでの注意点
サンプルアプリの実行
開発Tips
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

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

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

Appleシリコン搭載のMacでの注意点

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

Rosetta 2をインストールします

sudo softwareupdate --install-rosetta --agree-to-license

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

今回は環境構築を省力化するためにVScode とVScodeのFlutterのプラグインを使用します。

VScode
Flutterプラグイン
（FlutterプラグインはVS Codeのプラグインインストール画面で「Flutter」と検索してインストールするのが簡単です）

次に、Flutterをインストールしていきます。VScodeを開きます。
Command + Shift + Pを押し、コマンドパレットを開きます。
「Flutter: New Project」を選択します。

Flutterのテンプレートを選択する画面が表示されますので、「Application」を選択します。

プロジェクトフォルダーのルートディレクトリを選択し、プロジェクト名を入力します。

プロジェクトが作成されたら環境構築は完了です。

サンプルアプリの実行

作成したアプリを動かしてみます。iOSアプリをエミューレーター上で起動します。

Command + Shift + Pを押し、コマンドパレットを開きます。
「Flutter: Select Device」を選択します。

「Chrome」を選択します。

VScodeの「実行とデバッグ」を実行します。しばらく待つと下記のウインドウが開きます。

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

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

開発Tips

ホットリロード

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

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

その他

Flutter Doctorの実行

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

ターミナルを開き、以下のコマンドを実行します。

flutter doctor

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

よくあるエラーとその解決方法

Xcode installation is incomplete

エラー内容：Xcodeがインストールされていない、または設定が完了していない。
解決策：App StoreからXcodeをインストールし、インストール後にXcodeを一度起動して設定を完了させます。その後、再度ターミナルで以下のコマンドを実行します。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Unable to locate Android SDK.

エラー内容：Android SDKがインストールされていない。
解決策：Android Studioをインストールし、SDK Managerから必要なSDKツールをインストールします。その後、Flutter Doctorを再度実行して確認します。

CocoaPods not installed.

エラー内容：CocoaPodsがインストールされていない。
解決策：CocoaPodsをインストールします。以下のコマンドをターミナルで実行します。

brew install ruby
sudo gem install cocoapods

インストールが完了したら、以下のコマンドを実行しCocoaPodsのセットアップを完了します。

pod setup

Unable to get list of installed Simulator runtimes.

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

Device not detected.

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

動画チュートリアル

以下のYouTube動画では、Flutterの環境構築手順を実際に見ながら進めることができます。

サンプルコード

以下は基本的なTODOアプリのサンプルコードです。

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の環境構築手順について初心者向けに解説しました。以下は主要なポイントです。

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

次のステップ

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

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