Flutter環境構築(Windows)

前回の記事でAndroid Studioの環境構築を解説しました。本記事ではAndroid StudioでFlutterを使えるよう、環境構築をします。


まずAndroid StudioでFlutterの開発するには、Flutter SDKのインストールと、Android StudioでFlutterのプラグインのインストールが必要になります。本記事では順にインストールし、Android10でアプリを起動するところまでをお見せします。

Flutter SDK

インストール

下記サイトからFlutter SDKのzipファイルをインストールします。

展開先は「Program Files」以外にしましょう。私は「src」というフォルダをCドライブ直下に作成し、そちらに展開しました。
ちなみに「src」は「source」の略みたいです。

「展開」を押し管理者権限で続行し、zipファイルを解凍します。私のPCでは5分30秒ほど解凍時間かかりました。結構長かったです笑

Pathの設定

今のままではPC上でflutterを認識してくれないので、「環境変数を編集」から、Flutterを追加します。

システム環境変数に「flutter」の入っているPathを追加することで、PC側でFlutterを扱えるようになります。

Pathの場所については先ほどダウンロードしたFlutterのフォルダからbinのフォルダを探し、「C:\src\flutter\bin」をコピーします。「src」以外に展開した人は展開先を確認し、自分のものをコピーしてください。

コマンドプロンプトからflutterを確認することができました。
※コマンドプロンプトは「win+r」から「cmd」と入力すると飛べます。

Android Studio

Flutterのプラグインをインストール

FlutterのSDKをインストールし、Pathも通したためFlutterを使用できるようになりました。次はAndroid Studioでも使用するために、Flutterのプラグインを入れます。

Android Studioを起動し、Pluginsの項目を選択しFlutterをインストールします。

インストール後はアプリを再起動しましょう。

最初の画面を撮り忘れましたが、New Flutter Projectが出てきましたね。もとからありました。。。?

Android10のインストール

次にFlutterのアプリを起動する際のエミュレーターとして、
Android10をダウンロードしておきます。

SDK ManagerからCommand-line toolとAndroid10.0を選択し、
Applyを押します。その後ダウンロードを進めてください。

アプリを起動する

プロジェクトの作成

new flutter projectからFlutterのPathを選択し、「test_app」というプロジェクトを作成します。FlutterのPathは先ほどFlutter SDKをインストールした階層になります。

デバイスとアプリの起動

Tools -> Device Manager
Create device -> Pixel 2 -> Next
[Target]Android 10.0 -> Next
finish
追加したPixel 2の再生ボタンをクリック->エミュレーター起動
projectの再生ボタンをクリックー>アプリ起動

以上でデバイス(エミュレーター)の登録から、起動、Flutterアプリの起動が完了しました。

アプリを触ってみる

Flutterで最初に作られるアプリは単純なカウントアップアプリです。+を押すとカウントアップされるみたいです。

最後に

以上でFlutterの環境構築は終了となります。自分はWindowsなのでiOSにインストールすることは難しいですが、ひとまずFlutterを触りたかったので無事環境構築をできよかったです。

この記事が気に入ったらサポートをしてみませんか?