【初心者向け】Flutter環境構築を徹底解説！
この記事では、クロスプラットフォーム開発のフレームワーク「Flutter」の環境構築手順を、初心者の方にも分かりやすく解説します。WindowsとmacOS、どちらのOSにも対応していますので、ぜひこの記事を見ながら一緒に進めていきましょう！
1. Flutter SDKのダウンロード
まずは、Flutterの公式サイトからSDKをダウンロードします。
ご自身のOS（WindowsまたはmacOS）を選択し、最新の安定版（Stable channel）のSDKをダウンロードしてください。
2. ダウンロードしたSDKの展開と配置
ダウンロードしたZIPファイルを解凍し、任意の場所に配置します。
Windowsの場合:C:\src\flutterなどの、空白や日本語を含まないパスに配置するのがおすすめです。
macOSの場合:~/development/flutterなどに配置するのが一般的です。
3. パスを通す
Flutterコマンドをターミナル（コマンドプロンプト）のどこからでも実行できるように、パスを通す設定を行います。
Windowsの場合:
コントロールパネルから「システムの詳細設定」を開き、「環境変数」をクリックします。
「ユーザー環境変数」のPathを選択し、「編集」をクリックします。
flutter\binフォルダのパス（例: C:\src\flutter\bin）を追加して保存します。
macOSの場合:
ターミナルを開き、以下のコマンドを実行します。
export PATH="$PATH:[Flutter SDKを配置したパス]/bin"
ただし、この設定はターミナルを閉じると消えてしまうため、.zshrcや.bash_profileなどの設定ファイルに追記して永続化させる必要があります。
4. Flutter Doctorで環境チェック
パスが通ったら、ターミナルで以下のコマンドを実行して、環境が正しく設定されているか確認します。
flutter doctor
実行後、以下のような結果が表示されます。
✅ [✓] Flutter (Channel stable, 3.x.x, on macOS...)
✅ [✓] Android toolchain - develop for Android devices...
✅ [✓] Xcode - develop for iOS and macOS... (macOSのみ)
✅ [✓] VS Code (version 1.x.x)
✅ [✓] Connected device (2 available)
もし、[✗] や [!] が表示された場合は、その項目に対処する必要があります。例えば、Android StudioやXcodeがインストールされていない場合は、それぞれの公式サイトからインストールしてください。
5. 開発環境のセットアップ
Flutter開発には、以下のいずれかのエディタを推奨します。
Visual Studio Code (VS Code): 軽量で拡張機能が豊富です。FlutterとDartの拡張機能をインストールしましょう。
Android Studio: Android開発との連携がスムーズで、強力なデバッガーが備わっています。
6. アプリケーションの作成と実行
いよいよ、初めてのFlutterアプリを作成してみましょう。
プロジェクトの作成: ターミナルで以下のコマンドを実行します。
flutter create my_first_app
プロジェクトのディレクトリに移動:
cd my_first_app
アプリの実行:
iOSシミュレータ/Androidエミュレータを起動した後、以下のコマンドを実行します。
flutter run
これで、エミュレータ上にFlutterの初期アプリが表示されれば成功です！
まとめ
この記事の手順通りに進めれば、Flutterの環境構築は完了です。最初は少し大変に感じるかもしれませんが、一度構築してしまえば、あとは快適にアプリ開発を進めることができます。
Flutterの公式ドキュメントには、さらに詳しい情報が掲載されていますので、ぜひこちらも参考にしてみてください。
関連記事
Discussion