技術的備忘録

基本自分用備忘録

Flutter 環境構築

Flutterの環境構築は必要なものが少し多くて、ややこしいのでまとめておこうと思います。 Windows版です。

FlutterSDKのダウンロード

  • 公式サイトからダウンロード・解凍します
  • ダウンロード後、環境変数にPathを通します

docs.flutter.dev

Flutter doctorコマンドの実行

  • Flutterのパスを通したフォルダで以下コマンドを実行します
  • flutter doctor
  • 開発環境構築で不足しているものがわかります

f:id:syoch:20220310060943p:plain

  • VisualStudioはデスクトップアプリの開発に必要ですが、今回は省きます

AndroidStudioのインストール

  • 公式サイトからダウンロード・インストールをします

developer.android.com

Androidライセンスの承認

  • 以下コマンドを実行します
  • flutter doctor--android-licenses

Androidエミュレーターの作成

f:id:syoch:20220310062240p:plain

f:id:syoch:20220310062258p:plain

f:id:syoch:20220310062307p:plain

f:id:syoch:20220310062319p:plain

f:id:syoch:20220310062329p:plain

f:id:syoch:20220310062421p:plain

VisualStudioCodeのダウンロード

  • 公式サイトからダウンロードします

azure.microsoft.com

拡張機能のインストール

  • FlutterとDartをインストールしておきます

f:id:syoch:20220310063126p:plain

プロジェクトの作成

  • ctrl + shift + p から Flutter: New Project を選択します

f:id:syoch:20220310063413p:plain

  • Applicationを選択 f:id:syoch:20220310063506p:plain

  • ディレクトリを選択して、プロジェクト名を入力します f:id:syoch:20220310063705p:plain

アプリの実行

f:id:syoch:20220310063918p:plain

f:id:syoch:20220310070536p:plain

f:id:syoch:20220310072401p:plain

  • main.dartを開いた上で、F5キーを押すとエミュレーターにインストールされアプリが起動します

f:id:syoch:20220310072600p:plain