【Dart】 Flutter × VSCode で、環境構築から HelloWorld まで（Mac）

こんにちは。サイオステクノロジーの木村です。
今回は、Flutterの環境構築（Macでの手順）から Hello World を表示するまでを書きたいと思います。
コードエディタにはVisual Studio Codeを使います。Visual Studio Codeのインストール手順は含んでおりませんのでインストールしていない方は事前にインストールしておいてください。

1 Flutterとは
2 環境構築
3 サンプルアプリで動作確認
- 3.1 プロジェクトの作成
- 3.2 カウンターアプリの実行
4 Hello World

Flutterとは

Googleが開発したオープンソースのアプリケーション開発用フレームワーク。Dart言語を使用し、単一のコードベースでiOSやAndroid、Web、デスクトップアプリなど様々なプラットフォームのアプリを構築できます。

環境構築

Macでの環境構築の手順を記載します。

拡張機能のインストール

VSCodeにて、Flutterの拡張機能をインストールします。
1. VSCodeを起動し、サイドバーの拡張機能のアイコンをクリックします。

2. 「Flutter」と入力すると、検索結果に表示されますので、「インストール」をクリックします。

Flutterをインストールすると、「Dart」の拡張機能も自動でインストールされます。

Flutter SDK のインストール

VSCodeにて、Flutter SDK をインストールします。
1. VSCodeにて、メニューバーより「表示」-「コマンドパレット」をクリックしてコマンドパレットを開きます。

2. コマンドパレットにて「flutter」と入力すると、「Flutter:New Project」が表示されるので、選択します。

3. 以下の画像のような SDK のダウンロードを促すプロンプトが表示されますので、「Download SDK」をクリックします。

4. 任意のフォルダを指定し「Clone Flutter」をクリックします。

指定したフォルダ配下に、「flutter」というフォルダが作成されます。こちらのパスをメモしておきます。（メモしたパスは、以降の Path の設定の手順で使います。）

Path の設定

FlutterのPathを通します。

1. お使いの Mac のシェルを確認します。ターミナルを起動し、以下のコマンドを実行します。

echo $SHELL

「/bin/zsh」と表示された場合、シェルは zsh です。
「/bin/bash」と表示された場合、シェルは bash です。

2. 以下のコマンドを入力して Path の設定を行います。（以下はシェルが「zsh」の場合のコマンドです。お使いの環境が「bash」の場合は .zshrc のところを .bash_profile としてください。）

echo export PATH="$PATH:/bin" >> ~/.zshrc

3. 以下のコマンドを実行して設定を反映させます。（以下はシェルが「zsh」の場合のコマンドです。お使いの環境が「bash」の場合は .zshrc のところを .bash_profile としてください。）

source ~/.zshrc

4. ターミナルにて、「flutter」と入力して以下のように表示されれば、Path の設定は完了です。

Android Studio のインストールと設定

1. Android Studio の公式サイトにアクセスします。

2. 「Android Studio Koala をダウンロード」をクリックします。

3. 利用規約の同意にチェックを入れ、お使いの Mac が使用しているチップに応じたもの（チップが「intel」の人は Intel を、「Apple M1」「Apple M2」の人は Apple をダウンロード）をダウンロードします。

お使いの Mac が使用しているチップは、画面の左上にあるメニューバーのAppleアイコンをクリックし、［このMacについて］より確認することができます。

4. ダウンロードしたファイルを開き、案内通りにインストールを進めます。

5. インストールが完了したら、Android Studio を開きます。

6. 画面左の[Plugins]をクリックし、検索欄に「flutter」と入力します。Flutterが検索結果に表示されるので「Install」をクリックします。

7. 「Restart IDE」をクリックします。

8. 「Restart」をクリックします。

9. Android Studio が再起動されます。「More Actions」より「SDK manager」をクリックします。

10. 「SDK Tools」タブを選択し、「Android SDK Command-line Tools」にチェックを入れ、「Apply」をクリックします。

11. 確認ダイアログが表示されますので「OK」をクリックします。

12. 「Finish」をクリックします。

13. ターミナルを起動し、以下のコマンドを実行します。

flutter doctor --android-licenses

何度か確認メッセージが表示されますので、全て「y」を入力します。
以下のメッセージが出れば完了です。

XCode のインストール

1. App Store を起動します。

2. App Store の検索欄に「xcode」と入力し検索します。検索結果に XCode が表示されますので「入手」をクリックしてインストールします。以降は案内通りにインストールを進めます。

Google Chrome のインストール

Google Chrome の公式サイトより、ダウンロードしてインストールします。

flutter doctor で確認

環境構築が正しく行えているか確認します。
ターミナルを起動し、以下のコマンドを入力します。

flutter doctor

以下のように、全て緑のチェックマークが表示されれば、完了構築完了です。

「!」や、「×」が表示された場合は、環境に何らかの問題があります。表示されるメッセージの内容に従って対応しましょう。

サンプルアプリで動作確認

VSCodeにて、サンプリアプリを動かしてみましょう。

プロジェクトの作成

1. VSCodeにて、メニューバーより「表示」-「コマンドパレット」をクリックしてコマンドパレットを開きます。

2. コマンドパレットにて「flutter」と入力すると、「Flutter:New Project」が表示されるので、選択します。

3. 「Application」を選択します。

4. 作成するプロジェクトをどこに配置するか聞かれるので、任意のフォルダを選択して「Select a folder to create the project in」をクリックします。

5. 任意のプロジェクト名を入力します。ここでは「flutter_hello_world」とします。

6. プロジェクトの作成が完了すると、以下のように表示されます。

カウンターアプリの実行

作成したプロジェクトにはデフォルトでサンプルアプリとして「カウンターアプリ」の実装が含まれています（lib 配下の main.dart というファイルに記載されています）。まずはこちらをビルドし、動作させてみましょう。

1. 画面右下の「macOS(darwin)」をクリックします。

2. 今回は、iOSのシミュレータで立ち上げます。「Start iOS Simulator」を選択します。

3. シミュレータが立ち上がります。

4. サイドバーの「実行とデバッグ」のアイコンをクリックします。

5. 「実行とデバッグ」をクリックします。

6. シミュレータにて、カウンターアプリが立ち上がります。

右下の「+」をタップすると、画面中央に表示される数字がカウントアップされます。

7. アプリの実行を終了するには、赤い四角のボタンをクリックします。

Hello World

先ほどのカウンターアプリを変更して、Hello World を表示するようにしてみましょう。
「main.dart」の実装を以下のように修正します。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
      ),
      body: const Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24,),
        ),
      ),
    );
  }
}

以下、コードの簡単な説明です。

3〜5行目
Flutterアプリでは、lib配下にある「main.dart」ファイルの main 関数がエントリーポイントとなり、ここからアプリが開始されます。
runApp 関数には、アプリケーションのルートウィジェット（アプリ上で最初に展開して欲しいウィジェット）を指定します。ここでは MyApp を呼び出しています。
7〜22行目
MyAppでは MaterialApp というウィジェットで、アプリケーション全体の基本的な設定と構造を定義しています。画面の中身の部分は MyHomePage を呼び出しています。
debugShowCheckedModeBanner: false, と記載すると、画面右上に表示されるDEBUGバナーを非表示にします。
24〜42行目
MyHomePageでは、アプリバーの表示と、「Hello, World!」の文字を画面中央に表示するようにしています。

実行すると、以下のような画面が表示されます。