M1 MacでFlutterシンプル環境構築

はじめに

この記事では、M1 MacでFlutterの環境構築を行う方法を紹介します。

今回は最低限デモアプリが動くようになるまでを解説していきます。

事前準備

まず、Flutter本体のインストールを行う前にやっておかなければならないことが2つあります。以下に列挙します。

  1. Xcodeのインストール
  2. Visual Studio Codeのインストール

次項でそれぞれ解説します。

Xcodeのインストール

Flutterでは、Xcodeに含まれているiOSシミュレーターを使用します。(Android StudioをインストールすればAndroidエミュレーターも使用できます。)

以下インストール方法

  1. App Storeを開きます。
  2. 検索バーに"Xcode"と入力し[return]キーを押します。
  3. 表示結果にある「Xcode」の[入手]をクリックします。
  4. インストールが完了したらLaunchpadからXcodeを開きます。 初回起動時は色々な規約に同意を求められるので規約を読んですべて同意しておきます。(これを行っておくことは後にターミナル上で問題を引き起こさないために重要です。)
  5. Xcodeが正常に起動し、このような画面になればXcodeのインストールは完了です。f:id:penguinspizza:20210516014713p:plain

Visual Studio Codeのインストール

Visual Studio Codeはエディタと言い、Flutterのプログラムを書くために必要です。

エディタであればなんでも良い(メモ帳でもOK)ですが、ここではVisual Studio Codeで解説していきます。

以下インストール方法

  1. Visual Studio Codeのダウンロードページに行きます。

  2. 下記画像の矢印で示した箇所のいずれかをクリックします。Universal版・Apple Silicon版とありますがどちらでも構いません。ちなみにApple Silicon版の方がダウンロードサイズが小さいです。 f:id:penguinspizza:20210516020553p:plain

  3. Zipファイルがダウンロードされるので、Zipファイルをダブルクリックします。するとVisual Studio Code.appが出てきます。 出てきたVisual Studio Code.appをアプリケーションフォルダにドラッグアンドドロップすればインストールは完了です。

Flutterのインストール

事前準備、お疲れさまでした。

いよいよFlutterをインストールしていきます。

しかし、FlutterのインストールはXcodeVisual Studio Codeのように一筋縄にはいきません。ターミナルというものを使ってインストールしていきます。ターミナルを使ったインストール作業は殆どのプログラミング言語環境構築には必須です。

以下インストール方法

  1. Flutterのダウンロードページに行きます。

  2. 下記画像の箇所をクリックしてダウンロードフォルダに保存します。このとき必ず"ダウンロード"フォルダに保存してください f:id:penguinspizza:20210516022146p:plain

  3. ターミナル.appを起動します。Launchpadの「その他」に入っています。([command + スペース]で"ターミナル"と入力して起動することもできます。)

  4. ターミナル.appを起動すると、下記のような文字列が表示されていることを確認します。ここからはターミナル.appにコマンドを入力していきます。コマンドの実行が完了すると再度ユーザー名@端末名 ~ %という表示がされ次のコマンドが入力できるようになります。

Last login: 日時 on ttys001
ユーザー名@端末名 ~ %




%の後に続いて次のコマンドを入力し、[return]キーを押します。ここからは%の前は省略します。%の後(%は入力しない)のコマンドを入力してください。(解説は読み飛ばしていただいても構いません。)

% mkdir ~/development

解説: developmentというフォルダをホームフォルダ(自分のユーザー名のフォルダ)の中に作るコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% cd ~/development

解説: ターミナルの操作対象のフォルダをdevelopmentに移動するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。(ダウンロードしたときのバージョンによってバージョン番号は異なるので注意してください。)

% unzip ~/Downloads/flutter_macos_2.0.6-stable.zip

解説: ダウンロードフォルダに保存したFlutterのZipファイルをdevelopmentフォルダの中に解凍するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% cd

解説: ターミナルの操作対象をホームフォルダに移動するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% vim .zshrc

解説: vimというターミナル上で使えるのメモ帳のようなものを使って.zshrcという設定ファイルを開くコマンドです。


[i]キーを押します。

解説: vim上で文字を入力できるようになります。


次の文字列を入力します。

export PATH=$PATH:"$HOME/development/flutter/bin"

解説: この文字列はターミナル上でFlutterのコマンドを使えるように設定するものです。"パスを通す"といいます。これをしないとターミナル上でFlutterのコマンドを使うためにいちいち"/Users/ユーザー名/development/flutter/bin/flutter run"などと入力しなくてはいけなくなります。


[esc]キーを押します。

解説: vimの入力モードを終了します。


次の文字列を入力し、[return]キーを押します。

:wq

解説: vim上のコマンドで保存して終了するという意味です。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% source ~/.zshrc

解説: 先ほど書いた設定ファイルをターミナルに反映させるコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% flutter doctor

解説: flutterの状態を見ます。コマンドの通り異常がないか診察するようなものです。ここでは異常がいくつか発見された旨の表示がされますがデモアプリを動作させる上では問題ありません。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% cd documents

解説: ターミナルの操作対象をdocuments(Finderでは書類)に移動するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% flutter create my_app

解説: my_appというフォルダを作り、その中にデモアプリを動かすのに必要なプログラムを生成するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% cd my_app

解説: ターミナルの操作対象をmy_appフォルダに移動するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% open -a Simulator

解説: XcodeiOSシミュレーターを起動するコマンドです。


%の後に続いて次のコマンドを入力し、[return]キーを押します。

% flutter run

解説: デモアプリをiOSシミュレーター上で起動するコマンドです。


これでiOSシミュレーター上でFlutterのデモアプリが動作しました。右下のプラスマークを押すと画面中央の数字が増えるカウンターアプリです。デモアプリを終了するにはターミナル上で[q]キーを押します。f:id:penguinspizza:20210516042751p:plain


Flutterでプログラミングを始める

  1. Visual Studio Codeを起動します。
  2. 拡張機能「Flutter」をインストールします。
  3. 必要に応じて「Japanese Language Pack for Visual Studio Code」もインストールします。
  4. File(ファイル)からOpen...(開く...)をクリックし、書類の中のmy_appフォルダを開きます。
  5. あとはFlutterの世界を楽しみましょう!