【Flutter】環境構築

目次

  • 概要
  • 必要なもののインストール

概要

何事もそうだが、慣れるまでが難しい。
ITにおいてもあらゆる分野の最初の鬼門となるのは環境構築。
そのうえ、Flutterでアプリ開発をする際はAndroidStudioという他の開発環境でプログラミングをしていくため、少々手間。
まずは必要なものから用意しよう。

必要なもののインストール

おおよそ必要なものは以下

必要なファイル理由
FlutterSDKFlutterで開発するのに必要なファイル群
Visual Studio Codeプログラミングをしていくのに必要
Android StudioAndroidで動作確認を行うのに必要
XcodeiOSで動作確認を行うのに必要（Macのみ）

Android Studio

Android Studioをこちらからダウンロードする。

FlutterSDK（Mac）

FlutterSDKをダウンロードする前にFlutterで開発を行うためのフォルダを作っておこう。
フォルダを作る場所はどこでもいいが、

FlutterSDKはこちらからダウンロードする。

筆者の環境はMacなので、赤枠の部分をクリックしてダウンロードする。
ダウンロードしたら展開しよう。

展開したらこんなかんじ。

このディレクトリはFlutterアプリを開発するためのディレクトリに移しておこう。
やはり必要なディレクトリはひとまとまりにするのがいいですからね。筆者はこんな感じ。
「/Users/[ユーザー名]/Desktop/Develop/FlutterApp/」

次にパスを通してあげよう。
パスを通すというのは、「特定のプログラムをプログラム名だけで実行できるようにする」こと。

以下のようターミナルでコマンドを叩いてパスを通そう。

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

[PATH_OF_FLUTTER_GIT_DIRECTORY]というのは、先ほどダウンロードしたFlutterSDKの場所。
今回、「Desktop/Develop/FlutterApp/」にFlutterSDKを置いたので、
「/Users/[ユーザー名]/Desktop/Develop/FlutterApp/flutter/」が[PATH_OF_FLUTTER_GIT_DIRECTORY]となる。

そして、以下のコマンドを叩いてパスが通っているか確認してみよう。

echo $PATH
flutter --version

// 実行結果
Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f468f3366c (5 weeks ago) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1

パスが通っているなら以下のコマンドを叩いたときに、FlutterSDKまでのパスが表示される。

which flutter

// 結果
/Users/[ユーザー名]/Desktop/Develop/FlutterApp/flutter/bin/flutter

続いていいあのコマンドを実行して、セットアップを完了させよう。
必要なものがインストールされていれば以下のような出力になる。

flutter doctor

// 実行結果
Found an existing Pub cache at /Users/[ユーザー名]/.pub-cache.
It can be repaired by running `dart pub cache repair`.
It can be reset by running `dart pub cache clear`.
Found an existing Dart Analysis Server cache at /Users/[ユーザー名]/.dartServer.
It can be reset by deleting /Users/[ユーザー名]/.dartServer.
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F770820d darwin-x64, locale ja-JP)
    ! Warning: `dart` on your path resolves to /usr/local/Cellar/dart/2.17.1/libexec/bin/dart, which is not inside your current
      Flutter SDK checkout at /Users/[ユーザー名]/Desktop/Develop/FlutterApp/flutter. Consider adding
      /Users/[ユーザー名]/Desktop/Develop/FlutterApp/flutter/bin to the front of your path.
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.81.1)
[✓] Connected device (2 available)
[✓] Network resources

FlutterSDK（Windows）

こちらの手順に則る。

本質的な部分はMac版とそこまで相違はない。

  • FlutterSDKをインストールして、ディレクトリを任意の場所に移動する
  • flutterのパスを通す
  • 「flutter docotor」で必要なものがインストールされているか確認する。

参考ページ

Zenn「04.環境構築」
Qiita「PATH を通す」の意味をできるだけわかりやすく説明する試み」
【Flutter】アプリ開発入門 Flutter環境構築 Hello Flutter!!