M1 Macbook Air に Flutter環境を構築する

Flutter 作成日：2022.11.30

WordPressでサイト構築して、ReactでWebアプリをつくって、次はネイティブアプリ開発だ。
ということで、Flutterでアプリ開発を初めてみることにしました。

さっそく、M1 Macbook AirにFlutter環境を構築していきます。

構築方法は、公式サイトが一番わかりやすい

導入方法を紹介している記事はたくさんありますが、公式サイトが一番わかりやすいし、正確だし、情報が古くないし、で最高です。

Flutterは、とても公式ドキュメントが充実している感じがします。環境構築だけじゃなくて、チュートリアルやリファレンスもかなり丁寧です。

ということで、導入方法をこの記事で書いても役に立つことはないので、導入手順だけをメモがわりに書き残しておきます。

まず、Flutter SDKを以下のURLからインストールします。https://docs.flutter.dev/development/tools/sdk/releases?tab=macos
M1 mac 向けには、「Mac OS」＞「Stable(安定版)」＞「arm64(M1用)」を選んでDLします。

解凍して、パスを通します。

次にAndroid Studioをセットアップして、エミュレートするデバイスを追加します。
ぼくは、Pixel 3 を選びました。

後は、Android SDKをインストールします。
ぼくは、以下を選びました。

ターミナル上で flutter doctor でチェックして、ライセンスの認証を通せばおしまいです。

まず、VS Codeで「Flutter」の拡張機能をインストールしておきます。

つぎに、実行するためのデバイスを起動しておきます。
Android デバイスの場合は、AndroidStudio＞VirtualDeviceManagerから起動しておきます。

VS Codeで、Flutterのプロジェクトを新規作成するには、コマンドパレット上から生成します。

既に生成済みのプロジェクトであれば、プロジェクトフォルダを開きます。

実行時は「実行とデバッグ」から実行するだけです。
実行時のデバイスを切り替えるには、画面右下のデバイス部分をクリックして選べばOKです。

起動しました。