こんにちはレオです。

普段はWebのフロントエンダーとしてVueやFirebaseなどを駆使してPWAなどのWebアプリケーションを開発していますが、やっぱりネイティブアプリ作りたい欲が止まりません。

先日、試しにReact Nativeの環境構築はやりましたが、今回はここ数年で話題沸騰のクロスプラットフォームであるFlutterの環境構築を行って、実際にアプリを作りたいと思います。

ということでまずは環境構築を完璧にやります。

システム要件

• オペレーティングシステム：macOS（64ビット）
• ディスク容量：2.8 GB（IDE /ツールのディスク容量は含まれません）
• ツール：以下のコマンドラインツールが使用できる環境
  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which
  • zip

ここ数年内購入のMacでOSを最新版にしておけば問題ないかと思います。ディスク容量はちゃんと空けておきましょう。

Flutter SDKのインストール

Flutter公式サイトよりmacOSをクリック。

flutter_macos_1.20.2-stable.zip のボタンをクリックするとダウンロードが始まります。

ダウンロードが完了したらターミナルを開いて以下コマンドを叩いていきます。

ホームディレクトリに移動（Macのユーザー名になるかと思います）

$ cd

developmentディレクトリを作成

$ mkdir development

作成したdevelopmentフォルダに移動しつつ、ダウンロードフォルダにあるflutter_macos_1.20.2-stable.zipをdevelopmentフォルダに解凍します。

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

最後にpathを通します。

.bash_profileをエディタで開いて一番下の行に、下記を追加して保存します。（〇〇〇〇の箇所はMacのログインユーザー名になります。）

export PATH="$PATH:/Users/〇〇〇〇/development/flutter/bin"

ここまできたら一度ターミナルを終了し、再起動してwhichコマンドでFlutterが使えるか確認します。

$ which flutter
/Users/〇〇〇〇/development/flutter/bin/flutter

上記の様に/Users/〇〇〇〇/development/flutter/bin/flutterと出てきたらpathが通ってる証拠なのでOKです。

以上でFlutterのインストールとpathを通す作業が完了しました。

FlutterはクロスプラットフォームなのでAndroidアプリを開発するAndroid StudioとiOSを開発するXcodeのダウンロードが必要になりますので次回に続きます。