「スクリプちん」のサイトデザインをリニューアル作業中です…^^;

FlutterをMacにインストールしてPATHを通す

当ページのリンクには広告が含まれています。
Flutter:環境設定〜Pathを通す

前回、FlutterをMacにインストールするためのシステム最小要件を確認するでFlutterを使うに当たって、ターミナルで必要なコマンドツールなどを確認しました。

今回は、Flutterをインストールしていきます。

作業するにあたって参考にしたのは、Flutterの公式サイトです。

あわせて読みたい
Choose your first type of app Configure your system to develop Flutter on macOS.

こちらは日本語。

Flutter Doc JP
インストール | Flutter Doc JP Flutterの日本語解説配信サイト
目次

Flutter SDKのzipファイルをダウンロードして解凍する

Flutterの公式サイト:macOS版のSDKダウンロードする画面

公式サイトにアクセスして、zipファイルをダウンロードします。

ダウンロードフォルダにzipがダウンロードできたら、そのzipを解凍していきます。

公式サイトでは、次のように入力するようにと指示がありますが、超初心者はここで早まってはいけません

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

1行目は、cdコマンドで development フォルダに移動するように言っていますが、もし development フォルダがなければ、先にdevelopmentフォルダを作っておかないと、cdコマンドがエラーではじかれてしまいます。

ファインダーを見ると、やっぱり自分のマシンには development フォルダは存在しません。
(development フォルダじゃなきゃいけないってことは、ないんでしょうけど…)

ファインダー上で作ってもいいけど、ここはターミナルの練習がてら、次のmkdirコマンドでフォルダを作成しました。

$ mkdir ~/development
ファインダーに表示されたdevelopmentフォルダ

developmentフォルダができたので、改めてさっきの2行を実行します。

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

1行目の cd〜 でフォルダを移動して、
2行目の unzip〜 で、ダウンロードフォルダのzipファイルを解凍します。

このコマンドでの解凍先は、自分のいる場所(~/developmentフォルダ)です。

実行すると、ターミナルの画面がしばらくつらつらと動いたあとに、再度 $ が表示されて処理が終わりました。

念のためにファインダーで確認すると、development フォルダの中に flutter フォルダが出来上がって解凍されたことがわかります。

成功〜!

ファインダーに表示されたFlutterフォルダ

PATHを通す

zipファイルのダウンロードと解凍が済んで、Flutterをインストールするができました。

でも、このままではまだ使えません。

システムに、「Flutterは、このフォルダにあるよ」と教えてあげないといけません。

「ここにあるよ」って教えてあげることを「PATHを通す」って言います。

ターミナルでコマンドを使わずに、Finderから操作することもできます。

まずは、次のコマンドを打ってターミナル上でPATHを通してみます。

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

ちゃんと実行されたかどうか、flutterのバージョンを表示するコマンドを実行して、結果を見てみました。

$ flutter --version

すると、しばらく次のようなメッセージが出て、Dart SDKのダウンロードが終わるまで待機です。

Downloading Dart SDK from Flutter engine .....

その後、Flutter のバージョンが表示されました。
ということは、bashがFlutterの居場所がどこなのかを認識してくれた、ということです。

さて、このコマンドでPATHを通すことはできたけど、でもこの方法ではターミナルを立ち上げるたびに、このコマンドを実行しないといけません。

試しに、ここで一度ターミナルを閉じて、再び $ flutter –version を実行すると、「-bash: flutter: command not found」と言われてしまいました。
「fluterなんて知らないよ」って……、忘れっぽいのね…。

なので、教えるだけじゃなくて、ちゃんと覚えさせることにします。

~/.bash_profileファイルにPATHを書き込む

bashに覚えさせたいパスは、.bash_profileというファイルに書いておきます。

bashではなくzshを使うなら、.zshre というファイルを作成します。
ファイルの名前が違うだけで、これ以降でやることは同じです。

自分のマシンには、この.bash_profileがまだないので、先に空のファイルとして.bash_profileを作成します。

ファイルを作成するコマンドは、touchを使います。

$ touch ~/.bash_profile
Finderに出来上がったbashファイル

これでファイルが作成できたので、次のコマンドで.bash_profileにFlutterのPATHを書いておきます。

$ echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.bash_profile
$ source ~/.bash_profile

1行目のecho〜で、ファイルに書き込み。
2行目のsource〜で、.bash_profileの内容(パスを通す)を実行です。

パスが通っているかどうかを、次のコマンドで確認してみます。

$ echo $PATH

ターミナルに、~/development/flutter/binの文字が表示されて、パスが書き込まれていることが確認できました。

これで、Flutter をインストールして、PATHも通りました。

でも、まだまだ実際の開発作業にはかかれません。
次は、他に必要なツールのインストールをしていきます。

道のりは長いな〜〜。

よかったらシェアしてね!
  • URLをコピーしました!
目次