9-1.Windows 10とVS Codeを使用したFlutter開発環境の構築手順

1. 必要なソフトウェアのインストール

1.1 Flutterのインストール

  1. Flutter公式サイトからFlutter SDKをダウンロードします。以下のURLにアクセスしてください: Flutterダウンロードページ
  2. **「Windows版Flutter SDK」**の「ダウンロード」ボタンをクリックしてZIPファイルをダウンロードします。
  3. ダウンロードしたZIPファイルを適当な場所に解凍します。例えば、C:\src\flutterフォルダに解凍します。
  4. 解凍したFlutter SDKのパスを環境変数に追加します。
    1. 「スタートメニュー」を右クリックして「システム」を選択します。
    2. 「システム情報」ウィンドウの左側メニューから「システムの詳細設定」をクリックします。
    3. 「システムのプロパティ」ウィンドウで「環境変数」ボタンをクリックします。
    4. 「システム環境変数」セクションの「Path」を選択し、「編集」ボタンをクリックします。
    5. 「新規」ボタンをクリックし、C:\src\flutter\binを追加します。
  5. コマンドプロンプトを開き、以下のコマンドを実行してFlutterが正しくインストールされているか確認します:
Dart
flutter --version

1.2 Android Studioのインストール

  1. Android Studio公式サイトからAndroid Studioをダウンロードします。以下のURLにアクセスしてください: Android Studioダウンロードページ
  2. ダウンロードしたインストーラーを実行し、インストールします。インストール中の設定はデフォルトのままで構いません。
  3. インストールが完了したら、Android Studioを起動します。
  4. 初回起動時に「Android Studio Setup Wizard」が表示されます。必要なSDKツールをインストールします。
    • 「Install Type」で「Standard」を選択し、「Next」をクリックします。
    • 「Finish」をクリックしてインストールを完了させます。

1.3 Android SDKとエミュレーターの設定

  1. Android Studioを起動し、「Configure」 -> 「SDK Manager」をクリックします。
  2. 「SDK Platforms」タブで「Android 10.0 (Q)」などの最新バージョンのSDKを選択し、「Apply」ボタンをクリックします。
  3. 「SDK Tools」タブで以下の項目を選択し、「Apply」ボタンをクリックします。
    • Android SDK Build-Tools
    • Android Emulator
    • Android SDK Platform-Tools
    • Android SDK Tools
  4. エミュレーターを設定するには、「Configure」 -> 「AVD Manager」をクリックし、「Create Virtual Device」ボタンをクリックします。
    • デバイスを選択し、最新のシステムイメージを選択してインストールします。
    • 仮想デバイスを作成し、「Play」ボタンをクリックしてエミュレーターを起動します。

2. Visual Studio Codeの設定

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

  1. Visual Studio Codeを起動します。
  2. 左側のサイドバーから「Extensions」アイコンをクリックします。
  3. 検索バーに「Flutter」と入力し、「Flutter」プラグインを見つけて「Install」ボタンをクリックします。Dartプラグインも自動的にインストールされます。

3. Flutterプロジェクトの作成

3.1 コマンドラインでプロジェクトを作成

  • コマンドプロンプトを開き、プロジェクトを作成したいディレクトリに移動します。
  • 以下のコマンドを実行してFlutterプロジェクトを作成します:
Dart
flutter create my_flutter_app
  • プロジェクトのディレクトリに移動します:
Dart
cd my_flutter_app

3.2 Visual Studio Codeでプロジェクトを開く

  1. Visual Studio Codeで「ファイル」 -> 「フォルダーを開く」を選択し、作成したプロジェクトのディレクトリを選択します。
  2. 「lib」フォルダー内のmain.dartファイルを開きます。これはFlutterアプリケーションのエントリーポイントです。

3.3 プロジェクトの実行

  • コマンドプロンプトで以下のコマンドを実行して、Flutterが正しくセットアップされているか確認します:
Dart
flutter doctor

これにより、必要な設定が全て完了しているか確認できます。不足している部分があれば、表示される指示に従ってインストールや設定を行います。

  • Androidエミュレーターを起動します(「AVD Manager」から起動するか、コマンドプロンプトでflutter emulators --launch <emulator_id>を実行します)。
  • Visual Studio Codeの右上にある「デバイス選択」ドロップダウンから、起動したエミュレーターを選択します。
  • Visual Studio Codeの「Run」メニューから「Start Debugging」を選択するか、F5キーを押してアプリケーションを実行します。

これで、Flutter開発環境がWindows 10とVisual Studio Codeで構築され、Flutterアプリケーションを開発できるようになります。

コメントを残す