Chapter 03

Flutterの環境構築について

ひろ@アプリ開発
ひろ@アプリ開発
2022.06.30に更新

環境構築について

環境構築はFlutter公式ドキュメントをベースに、ターミナルをあまり使ったことのない人向けに詳しく説明を行います。環境構築では躓かせないようにしたい(切実...)

やってほしいこと

Flutterのインストール

installページ

macOS版

Flutter SDKをインストール

  1. 公式サイトのzipファイルをダウンロードしてください。保存先はダウンロードにしました。
  2. ターミナルAppを開く
  3. ダウンロードしたzipファイルをdevelopmentフォルダに展開する
cd ~/development
unzip ~/Downloads/ダウンロードしたzipファイル
cd: no such file or directoryエラー時

'development'ディレクトリが存在しないので、まず、ディレクトリを作成します。

mkdir ~/development

再度、 cd ~/development

  1. flutterコマンドを使えるようにパスを通す
    ターミナル起動時にFlutterのパスを永続的に通してくれる設定を行います。
    まずは、現在使っているのシェルの確認をします。
echo $SHELL
/bin/zshの場合のパスの通し方

ZSHの設定ファイルは.zshrcファイルなので、そこにFlutterのパスを追加します。

echo export PATH="$PATH:[DEVELOPMENT_PATH]/flutter/bin" >> ~/.zshrc
/bin/bashの場合のパスの通し方

BASHの設定ファイルは.bash_profileなので

echo export PATH="$PATH:[DEVELOPMENT_PATH]/flutter/bin" >> ~/.bash_profile 

一度ターミナルを再起動してください。設定ファイルからパスが更新されます。

  1. flutterのパスが通っているかの確認
which flutter
/Users/xxx/development/flutter/bin/flutter

お疲れ様でした🎉

windows版

  1. 公式サイトのzipファイルをダウンロードしてください。
  2. エクスプローラーで'C:\Users[USER_NAME]'下に新規フォルダdevelopmentを作成

  1. ダウンロードしたzipファイルをC:\Users\[USER_NAME]\developmentに展開
developmentフォルダにflutterを展開している図

  1. flutterコマンドを使えるようにパスを通す
    検索の開始バー(windowsボタン)からenvと入力しシステム環境変数の編集を開き、環境変数ボタンをクリックします。

ユーザーの環境変数からPathを選択し、先程追加したflutterのPathを入力してください。今回はC:\Users\[USER_NAME]\developmentに展開したので、入力するパスはC:\Users\[USER_NAME]\development\flutter\bin

パスを追加するときの例

  1. パスが通っているか確認
    コマンドプロンプトを開きなおして以下のコマンドを入力してください。
where flutter
//設定したパスが表示される

お疲れ様でした🎉

更新日時

2022/6/30