※本記事で使用している環境
<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.3)
チップ:Intel Core i5
シェル:zsh
<ソフトウェア>
・Flutter(ver.3.19.4)
Flutterでアプリ開発を始めるにあたり、まずは環境構築の方法から紹介します。
今回は、Flutter SDK(Software Development Kit)のインストール方法を紹介します。
Flutter SDKとは、Flutterで開発を行うために必要なものです。
Flutterのインストール
![画像に alt 属性が指定されていません。ファイル名: -2024-03-23-23.26.55-1024x650.png](https://chiebukurozero.com/wp-content/uploads/2024/03/image.png)
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.27.02-1024x650.png)
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.27.10-1024x650.png)
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.27.26-1-1024x650.png)
使用しているMacBookがM1やM2などのM◯チップを搭載しているものであれば、右側の「Apple Silicon」を選択。
M1以前のintel Corei5などのインテルチップを搭載しているものであれば、左側の「intel Processor」を選択。
ボタンを押すと、ダウンロードが実行されダウンロードフォルダにzipファイルが落とされます。
ターミナルを開きます。
次に、以下のコードを打ち込んで現在いるディレクトリを確認します。
pwd
確認してみると、自分のホームディレクトリにいました。
今回は、ホームディレクトリの直下にdevelopment
というディレクトリを作成します。
このコードを入力してください。
mkdir development
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.32.31-1024x406.png)
ターミナルの操作については、こちらをご覧ください。
![](https://chiebukurozero.com/wp-content/uploads/2024/03/【macOS】基本的なコマンド操作-300x158.png)
解凍する前に、先ほどつくったdevelopment
に移動します。
cd development
pwd
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-13.50.22-1024x406.png)
そして、ターミナルに以下のコードを入力します。
unzip ~/Downloads/flutter_macos_3.19.4-stable.zip
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.38.06-1024x406.png)
lsコマンドでflutter
が格納しているものを確認します。
ls flutter
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.39.12-1024x406.png)
確認してみると、AUTHORS
やbin
などが存在することがわかります。
ファインダーを開いても確認することができます。
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.37.46-1024x544.png)
次に、flutter
の中のbin
の中を見ていきます。
ls flutter/bin
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-13.52.50-1024x406.png)
このbin
の中にflutterやdartのコマンドが保存されていることがわかります。
毎回、プログラムを書いて実行するときに以下のように入力しても構いません。
flutter/bin/dart
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-23-23.40.41-1019x1024.png)
しっかり、実行できていることがわかります。
しかし、毎回このようにPATHを入力するのはめんどくさいので「PATHを通す」作業を行います。
自分のシェルを調べる
ターミナルに以下のように入力すると、自分のシェルを調べることができます。
echo $SHELL
/bin/zsh とかえってきた場合のシェルは zsh
/bin/bash とかえってきた場合のシェルは bash
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-14.00.16-1024x406.png)
僕の場合はzshでした。
次に、zshの方がどのようにPATHを通すかを説明します。
パスを通す
このコードを打ち込みます。
pwd
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-14.11.23-1024x406.png)
このコードを打ち込みます。
cd flutter/bin
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-14.13.18-1024x406.png)
このコードを打ち込みます。
pwd
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-14.13.51-1024x406.png)
このコードを打ち込みます。
vi $HOME/.zshrc
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-15.32.39-1024x406.png)
viコマンドで編集モードを立ち上げます。
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-15.35.57-1024x406.png)
このままだと書き込むことができないため、キーボードの「i」を押します。
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-15.36.00-1024x406.png)
INSERT(インサート)モードに切り替わったため、書き込むことができるようになりました。
次に以下のコードを入力します。
先ほど確認したパス通りに入力しましょう。
export PATH="$PATH:/Users/[自分のユーザ名]/development/flutter/bin"
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-27-23.45.10-1-1024x406.png)
書き込んだら escキー を押して「:WQ」と入力し、保存して終了しましょう。
このコードを打ち込みます。
source $HOME/.zshrc
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-25-15.38.45-1024x406.png)
このコードを打ち込みます。
which flutter
![](https://chiebukurozero.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-27-23.46.33-1024x406.png)
このように入力し、/Users/~flutterとPATHがかえってきたら無事終了です。
これにて、Flutter SDK のインストール方法の紹介を終わります。
次回は、環境構築を行うための便利なコマンドを紹介します。
![](https://chiebukurozero.com/wp-content/uploads/2024/03/【Flutter】flutter-doctor-コマンドを使う(環境構築②)-300x158.png)
おすすめ書籍
コメント