月: 2021年3月

MacでFlutterの開発環境を構築する方法をメモしておきます。 Flutterをインストール 公式サイトからmacOS用のFlutter(flutter_macos_x.xx.x-stable.zip)をダウンロードします。 ダウンロードしたzipファイルを解凍して、任意のディレクトリに配置します。 https://flutter.dev/docs/get-started/install/macos パスを通す 解凍したフォルダを配置したらパスを通していきます。bashの場合は以下のコマンドでパスを通し反映させます。 [crayon-6715d3bee8708293710780/] [crayon-6715d3bee870c945839994/] flutter doctorで必要なものを確認する 以下のコマンドを実行することで、Flutterの実行環境で必要なものがわかります。 [crayon-6715d3bee870d632435674/] 現時点ではFlutterのみインストールしているため、他に必要なものはまだインストールされていないことがわかります。 [crayon-6715d3bee870e127696320/] Android Studioをインストールする 公式サイトよりmacOS用のAndroid Studioをダウンロードして、インストールします。 Welcome to Android Studioの画面が出れば完了です。 https://developer.android.com/studio/index.html Android StudioにFlutter、Dartのプラグインをインストール Android Studioの起動画面からConfigure→Pluginsを選択します。すると以下のPluginsの画面が表示されるので、検索ボックスから「Flutter」と入力し、インストールします。 Flutterをインストールすることで同時にDartもインストールできます。 デバイスのエミュレーターをダウンロードする エミュレーターをダウンロードしていきます。 まず起動画面から「Create New Flutter Project」を選択します。 「Flutter Application」を選択して次にいきます。 Project Nameを入力し、SDKとプロジェクトのパスを指定して次にいきます。 Finishをクリックします。 完了して編集画面が表示されたらTools→AVD Managerを選択します。 「Create Virtual Device」を選択します。 エミュレーターに使うデバイスを選択します。 System Imageを選択し、次にいきます。 最後にFinishをクリックして完了です。 Androidのライセンスを許可する 以下のコマンドでAndroidのライセンスを許可します。ライセンスの許可について聞かれるので「y」で承諾します。 [crayon-6715d3bee870f085720710/] Xcodeをインストールする App StoreからXcodeをインストールします。 https://apps.apple.com/us/app/xcode/id497799835 「Xcodeは“Macintosh HD”にはインストールできません。macOSバージョンxx.xx.x以降が必要です」とでたら、macOSのバージョンを上げるか、過去のバージョンをインストールできる方法があるようなのでどちらかで対応しましょう。 CocoaPodsをインストールする 以下のコマンドでCocoaPodsをインストールします。 [crayon-6715d3bee8710735667130/] flutter doctorで実行環境が整ったか確認する 最後にflutter doctorで実行環境が整ったか確認します。以下のようにNo issues found!となったら開発環境は完了です。 [crayon-6715d3bee8711377961848/] flutter doctorでFlutter plugin not installedと言われたら Flutterのプラグインを正常にインストールできたのにnot installedと言われた場合は、以下の方法で解決しました。シンボリックリンクを作成することで認識できるようになったようです。 [crayon-6715d3bee8712025090986/] 参考：https://github.com/flutter/flutter/issues/68429 VSCodeでFlutterが使える環境を整える VSCodeを使っているので、Flutterが使えるようにします。 VSCodeにFlutterの拡張機能をインストールする まず、拡張機能からFlutterをインストールします。 VSCodeでFlutter新規プロジェクトを作成する コマンドパレットから「Flutter」と入力して、「Flutter: New Project」を選択します。プロジェクト名を入力し、ディレクトリを指定することでプロジェクトを作成できます。 エミュレーターを起動する場合は右下のNo Device選択することで、iOSとAndroidのエミュレーターを起動することができます。 ホットリロードできるようにする コマンドパレットから「Debug: Attach to Flutter on Device」を選択することで、ホットリロードができるようになります。