1. 必要なソフトウェアのインストール
1.1 Flutterのインストール
- Flutter公式サイトからFlutter SDKをダウンロードします。以下のURLにアクセスしてください: Flutterダウンロードページ
- **「Windows版Flutter SDK」**の「ダウンロード」ボタンをクリックしてZIPファイルをダウンロードします。
- ダウンロードしたZIPファイルを適当な場所に解凍します。例えば、
C:\src\flutter
フォルダに解凍します。 - 解凍したFlutter SDKのパスを環境変数に追加します。
- 「スタートメニュー」を右クリックして「システム」を選択します。
- 「システム情報」ウィンドウの左側メニューから「システムの詳細設定」をクリックします。
- 「システムのプロパティ」ウィンドウで「環境変数」ボタンをクリックします。
- 「システム環境変数」セクションの「Path」を選択し、「編集」ボタンをクリックします。
- 「新規」ボタンをクリックし、
C:\src\flutter\bin
を追加します。
- コマンドプロンプトを開き、以下のコマンドを実行してFlutterが正しくインストールされているか確認します:
Dart
flutter --version
1.2 Android Studioのインストール
- Android Studio公式サイトからAndroid Studioをダウンロードします。以下のURLにアクセスしてください: Android Studioダウンロードページ
- ダウンロードしたインストーラーを実行し、インストールします。インストール中の設定はデフォルトのままで構いません。
- インストールが完了したら、Android Studioを起動します。
- 初回起動時に「Android Studio Setup Wizard」が表示されます。必要なSDKツールをインストールします。
- 「Install Type」で「Standard」を選択し、「Next」をクリックします。
- 「Finish」をクリックしてインストールを完了させます。
1.3 Android SDKとエミュレーターの設定
- Android Studioを起動し、「Configure」 -> 「SDK Manager」をクリックします。
- 「SDK Platforms」タブで「Android 10.0 (Q)」などの最新バージョンのSDKを選択し、「Apply」ボタンをクリックします。
- 「SDK Tools」タブで以下の項目を選択し、「Apply」ボタンをクリックします。
- Android SDK Build-Tools
- Android Emulator
- Android SDK Platform-Tools
- Android SDK Tools
- エミュレーターを設定するには、「Configure」 -> 「AVD Manager」をクリックし、「Create Virtual Device」ボタンをクリックします。
- デバイスを選択し、最新のシステムイメージを選択してインストールします。
- 仮想デバイスを作成し、「Play」ボタンをクリックしてエミュレーターを起動します。
2. Visual Studio Codeの設定
2.1 FlutterとDartのプラグインをインストール
- Visual Studio Codeを起動します。
- 左側のサイドバーから「Extensions」アイコンをクリックします。
- 検索バーに「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でプロジェクトを開く
- Visual Studio Codeで「ファイル」 -> 「フォルダーを開く」を選択し、作成したプロジェクトのディレクトリを選択します。
- 「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アプリケーションを開発できるようになります。