Flutterの環境構築

Flutter

ここでは、Flutterの環境構築方法について説明します。

この記事もだんだんと古くなり、最新の情報を追えない可能性があります。その場合、公式を見るのが一番正格ですので、そちらにも目を通しておくと良いと思います。

Windows

WindowsでFlutterを使用する場合は、以下のシステム要件を満たしていることを推奨します。

・Flutter SDKのダウンロード

stable channel(安定版)の場合、ここからSDKをダウンロードします。あとからchannelは変更できますので、まずは安定版を使うことをお勧めします。channelについては、別の記事にて説明する予定です。

FlutterにはDartが必要ですが、Flutterのバージョン1.19.0 devリリース以降のSDKにはDartも含まれているので、別途インストールの必要はありません。

・SDKの解凍

ダウンロードしたzipファイルを解凍し、中のflutterフォルダを任意の場所に配置してください。(例:C:\src\flutter

ここで、C:\Program Files\の中には配置しないようにしてください。

Gitを使ってダウンロードする場合は以下のようにしてください。

C:\src>git clone https://github.com/flutter/flutter.git -b stable

・環境変数の追加

コマンドプロンプトなどからFlutterコマンドを使いたい場合は以下の手順で環境変数を追加します。

  1. 検索バーにenvと入力し、システム環境変数の編集→環境変数ウィンドウを開く
  2. 変数Pathを選択し、編集
  3. 配置したflutter/binフォルダまでのフルパスを追加する
  4. OKを押し、環境変数編集ウィンドウを閉じる

・flutter doctorの実行

flutterコマンドが使える場所で、flutter doctorコマンドを実行してください。

flutter doctorは、環境に不足しているものがないかチェックしてくれます。

例えば、以下のように出力されれば、Android SDKが無いことを意味しています。ダウンロードできる場所のurlも分かるようになってますね。

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

flutter doctorで全てチェックにならなくても問題なく動く場合もありますが、できるだけチェックにしておくことをお勧めします。

Mac

MacOSでFlutterを使用する場合は、以下のシステム要件を満たしていることを推奨します。

  • macOS (64-bit)
  • ディスクスペース2.8 GB
  • コマンドラインツール
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • zip

・Flutter SDKのダウンロード

stable channel(安定版)の場合、ここからSDKをダウンロードします。あとからchannelは変更できますので、まずは安定版を使うことをお勧めします。channelについては、別の記事にて説明する予定です。

・SDKの解凍

好きな場所に解凍してください。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_1.20.4-stable.zip

Gitを使ってダウンロードする場合は以下のようにしてください。

$ git clone https://github.com/flutter/flutter.git

必要に応じてブランチを変更することができます。stable(安定版)のみを取得する場合は以下のようにします。

$ git clone https://github.com/flutter/flutter.git -b stable --depth 1

・環境変数の追加

unzipまたはgit cloneした後、移動などせずに以下を実行してください。

$ export PATH="$PATH:`pwd`/flutter/bin"

ただし、これは一時的な設定なので、ターミナルを新しく開くたびに同じことをしなくてはなりません。恒久的にflutterコマンドを使えるようにするための手順は以下になります。

  1. rcファイルを開く。(以下のHINTを参照)
  2. export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"を追加。[PATH_TO_FLUTTER_GIT_DIRECTORY]の部分は、ダウンロードした場所を指定してください。
  3. source $HOME/.<rc file>を実行するか、ターミナルを開きなおして設定を反映させる。

echo $SHELL コマンドを実行すると、どのシェルを使っているかが分かります。

Bashを使っている場合は、$HOME/.bash_profile$HOME/.bashrc 、

Zshを使っている場合は、$HOME/.zshrc がrcファイルになります。それ以外の場合は各自で対応してください。

$ echo $PATHを実行して、パスが設定されていることを確認した後、$ which flutterでflutterコマンドが使えることを確認します。

・flutter doctorの実行

flutterコマンドが使える場所で、flutter doctorコマンドを実行してください。

flutter doctorは、環境に不足しているものがないかチェックしてくれます。

例えば、以下のように出力されれば、Android SDKが無いことを意味しています。ダウンロードできる場所のurlも分かるようになってますね。

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

flutter doctorで全てチェックにならなくても問題なく動く場合もありますが、できるだけチェックにしておくことをお勧めします。

Linux

Linuxの場合は、snapdを使うとコマンド一つでFlutterをインストールできます。

$ sudo snap install flutter --classic

マニュアルでインストールしたい場合は、ここでは説明しないので、こちらを参考にしてください。

共通

Android Studioをインストールします。

おまけ

以下の書籍では、Flutterの環境構築はもちろん、Flutterの内部構造などが詳しく説明されていますので、まずは読んでみることをお勧めします。

この記事を書いた人

15歳からプログラミングを始め、現在は正社員+個人事業主でほぼ休まず労働
2018年に開発したアプリ「LIVLE」がTwitterで12000RTされる。(過去の栄光)
Flutter / Nuxt.js / Laravel / Go / React
お仕事依頼はこちらから⇢engineer@tepci.me

Tenma Endouをフォローする
Flutter
Tenma Endouをフォローする
目に優しいエンジニアブログ

コメント