MENU

【WindowsでFlutter】Android実機で動かす！初心者向け環境構築と失敗しない方法

目次

WindowsではじめるFlutterアプリ開発！Android実機で動かすまでの完全ガイド【初心者向けトラブルシューティング付き】

はじめに

「自分だけの便利なツールを作ってみたい！」そんな漠然とした思いから、スマートフォンのアプリ開発に興味を持った方もいるかもしれません。特に、iOSとAndroidの両方に対応したアプリを一つのコードで作れる「Flutter」は、近年非常に注目されています。しかし、いざFlutterでの開発を始めようとすると、最初の「環境構築」でつまずいてしまう方が少なくありません。筆者も、Windows PCを使ってFlutterの開発環境を整え、実際に自分のAndroidスマートフォンでサンプルアプリを動かすまでに、いくつかの壁にぶつかりました。

この記事では、まさにあなたが今直面しているかもしれない、その環境構築の難しさを乗り越えるための完全ガイドをお届けします。Windows PCを用意し、開発ツールのインストールから設定、そしてお手持ちのAndroid実機で初めてのFlutterアプリを動かすまでの全手順を、初心者の方にも分かりやすいように丁寧に解説します。

この記事を読むことで、あなたは以下のことができるようになります。

  • Windows環境にFlutter開発に必要なツールを正しくインストール・設定できる。
  • Androidスマートフォンを開発用に準備できる。
  • Flutterのサンプルアプリを自分のAndroid実機で実行できる。
  • 環境構築中によくある代表的なトラブルとその解決策を知り、スムーズに開発を始められる。

この記事が、あなたのFlutter開発の第一歩を力強く後押しできれば幸いです。さあ、一緒にアプリ開発の世界へ踏み出しましょう！

準備するもの

Flutter開発を始める前に、以下のものをご準備ください。特別なものは必要ありませんが、いくつか確認しておきたい点があります。

  • Windows PC: Windows 10以降を推奨します。十分なストレージ容量（数GB以上）とメモリ（8GB以上推奨）があると快適です。
  • Androidスマートフォン: USBデバッグが可能なモデルが必要です。これは、PCからアプリを直接インストールしたり、実行中のアプリのログを見たりするために必要な機能です。ほとんどの現代のAndroidスマートフォンで有効化できます。
  • USBケーブル: PCとAndroidスマートフォンを接続するために使用します。データ転送が可能なものを選んでください。充電専用のケーブルではデータ通信ができません。
  • インターネット接続環境: 開発ツールのダウンロードやパッケージの取得に必須です。

開発ツールのインストールと設定

まずは、Flutter開発の基盤となる各種ツールをインストールし、設定を進めていきます。

2-1. Visual Studio Code (VS Code) のインストールとFlutter拡張機能

VS Codeは、軽量で高機能な人気のコードエディタです。Flutter開発においても、コード編集、デバッグ、プロジェクト管理など、中心的な役割を果たします。

  1. VS Codeのダウンロードとインストール:
    Visual Studio Code公式サイトからWindows版インストーラーをダウンロードし、指示に従ってインストールしてください。特に難しい設定はありませんが、「Pathへの追加」のチェックボックスはオンにしておくことを推奨します。

  2. Flutter拡張機能のインストール:
    VS Codeを起動し、画面左側のアクティビティバーにある「拡張機能」アイコンをクリックします。検索バーに「Flutter」と入力し、Microsoftが提供している公式の「Flutter」拡張機能をインストールします。これにより、Dart言語のサポートやデバッグ機能、Flutter関連のコマンド実行などがVS Code上で行えるようになります。

2-2. Flutter SDK のインストール

Flutter SDKには、アプリをビルドするために必要な各種ツールやライブラリが含まれています。

  1. 公式サイトからのダウンロードと展開:
    Flutter公式サイトのインストールガイドにアクセスし、最新版のFlutter SDK (Zipファイル) をダウンロードします。
    ダウンロードしたZipファイルを展開しますが、ここで重要な注意点があります。展開先のフォルダパスに、日本語や空白文字などの非ASCII文字が含まれないようにしてください。例えば、C:\flutter や D:\develop\flutter のようなシンプルなパスを強く推奨します。これは、後述するAndroid SDKのパスに関するトラブルを避けるためでもありますし、多くの開発ツールで非ASCII文字パスは予期せぬ問題を引き起こす原因となり得るためです。

  2. 環境変数 Path の設定:
    Windowsがどこからflutterコマンドを探し出すかを教えてあげるために、Flutter SDK内のbinフォルダのパスを環境変数Pathに追加する必要があります。

    • Windowsの検索バーに「環境変数」と入力し、「システム環境変数の編集」を選択します。
    • システムのプロパティウィンドウが開いたら、「環境変数」ボタンをクリックします。
    • 「ユーザー環境変数」または「システム環境変数」のリストからPathを選択し、「編集」をクリックします。
    • 「新規」をクリックし、Flutter SDKを展開したフォルダ内のbinフォルダのパス（例: C:\flutter\bin）を追加します。
    • 全てのウィンドウで「OK」をクリックして設定を保存します。

    重要なトラブルシューティング: 環境変数Pathを設定した後、必ずコマンドプロンプトやPowerShellなどのターミナルを一度閉じてから再度起動してください。 環境変数の変更は、起動中のターミナルには反映されません。新しいターミナルを開き、flutter --versionと入力してEnterキーを押し、Flutterのバージョン情報が表示されればPath設定は成功です。

    VS Codeで「Could not find a Flutter SDK」と表示された場合の対処法: VS CodeがFlutter SDKの場所を見つけられない場合、ウィンドウ下部に「Locate SDK」というボタンが表示されることがあります。これをクリックし、手動でFlutter SDKを展開したフォルダ（例: C:\flutter）を指定してください。または、VS Codeの設定 (Ctrl+,) で「flutter sdk path」を検索し、SDKフォルダのパスを直接入力することも可能です。

2-3. Android Studio のインストール

Android Studioは、Androidアプリ開発のための公式統合開発環境（IDE）です。Flutter開発自体はVS Codeで行いますが、Android Studioに含まれるAndroid SDKや各種ツール（SDK Manager, AVD Managerなど）を利用するためにインストールが必要です。

  1. 公式サイトからのダウンロードとインストール:
    Android Studio公式サイトから最新版のAndroid Studioインストーラーをダウンロードし、実行します。インストールウィザードに従って進めてください。特にカスタマイズの必要がなければ、デフォルト設定で問題ありません。

  2. 初回起動時のセットアップウィザード:
    Android Studioを初めて起動すると、セットアップウィザードが始まります。ここで、SDK Componentsのダウンロードや初期設定が行われます。

  3. SDK Components Setup (インストール先パスの注意点):
    ウィザードの途中で、Android SDKのインストール先を指定する画面が表示されます。ここで、ここでもFlutter SDKと同様に、パスに日本語や空白文字などの非ASCII文字が含まれないように注意してください。デフォルトパスがユーザーフォルダ以下になっていて日本語を含む場合、C:\Android_SDK や D:\Android\sdk のように、半角英数字のみの分かりやすいパスに変更することを強く推奨します。

    トラブルシューティング: セットアップ中に「Your Android SDK location contains non-ASCII characters.」といったエラーが表示された場合、これはSDKインストール先のパスに問題があることを示しています。前述のように、SDKインストール先をC:\Android_SDKのような半角英数字のみのパスに変更し、再度セットアップを試みてください。

  4. ライセンス同意:
    必要なコンポーネントのダウンロードが終わると、各種ライセンス（Android SDK Licenseなど）への同意を求められます。内容を確認し、同意して次に進んでください。

これでAndroid Studioの基本的なセットアップは完了です。ただし、Flutter開発のために必要なAndroid SDKのツール類が全てインストールされているか、次のステップで確認が必要です。

2-4. Windowsの開発者モードの有効化

Windowsでは、Microsoft Store以外からダウンロードしたアプリをインストールしたり、アプリのデバッグ機能を有効にしたりするために、「開発者モード」を有効にする必要があります。

  1. Windowsの「設定」を開きます。
  2. 「更新とセキュリティ」（または「プライバシーとセキュリティ」）を選択します。
  3. 左側のメニューから「開発者向け」を選択します。
  4. 「開発者モード」のスイッチをオンにします。警告が表示されることがありますが、内容を理解した上で「はい」を選択してください。

Flutter環境の確認と設定

必要なツールがインストールできたら、Flutterが正しくセットアップされているかを確認し、不足している設定があれば補います。

3-1. flutter doctor による環境チェック

Flutterには、開発環境が整っているかを確認するための便利なコマンドflutter doctorがあります。コマンドプロンプトまたはPowerShellを開き、以下のコマンドを実行します。

flutter doctor

このコマンドを実行すると、Flutter SDK、Android Toolchain、VS Code、Android Studioなどが正しく認識されているかがチェックされ、結果が表示されます。

  • [✓] : その項目は正常に設定されています。
  • [X] : その項目に問題があります。具体的なエラーメッセージが表示されます。
  • [! ] : 軽微な問題や警告です。通常は無視しても開発できますが、可能な限り解消することが推奨されます。

[X]が表示された項目について、次のステップで対処していきます。

3-2. Android SDKの場所をFlutterに設定 (flutter config --android-sdk)

flutter doctorの実行結果で「[X] Android toolchain - develop for Android devices (Android SDK is missing or incomplete).」や「[X] CmdlineToolsManifeso file not found:」といったエラーが表示される場合、FlutterがAndroid SDKの場所を正しく認識できていない可能性があります。

この場合、以下のコマンドを実行して、Android SDKのインストール場所をFlutterに教えてあげる必要があります。

flutter config --android-sdk "C:\Android_SDK"

"C:\Android_SDK"の部分は、あなたがAndroid Studioセットアップ時に指定した、実際にAndroid SDKがインストールされているフォルダのパスに置き換えてください。パスに空白が含まれる場合は、ダブルクォーテーションで囲みます。

設定後、再度flutter doctorを実行して、Android toolchainの項目が[✓]になったか確認してください。

3-3. Android SDK Command-line Tools のインストール

flutter doctor --android-licensesコマンドを実行しようとした際に「Android sdkmanager not found.」というエラーが出たり、flutter doctorでCommand-line Toolsに関する警告やエラーが表示されたりすることがあります。これは、Android SDKの一部であるCommand-line Toolsがインストールされていないために発生します。

Command-line Toolsは、SDK ManagerやAVD Managerといった各種ツールをコマンドラインから利用するために必要です。Android StudioのSDK Managerからインストールできます。

  1. Android Studioを起動します。
  2. Welcome画面が表示されている場合は、「More Actions」>「SDK Manager」を選択します。プロジェクトを開いている場合は、メニューバーの「File」>「Settings…」（macOSでは「Android Studio」>「Preferences…」）を選択し、表示されたウィンドウの左側メニューから「Appearance & Behavior」>「System Settings」>「Android SDK」を選択します。
  3. 「SDK Platforms」タブの右にある「SDK Tools」タブを選択します。
  4. 「Android SDK Command-line Tools (latest)」にチェックを入れます。
  5. 「Apply」をクリックし、表示される確認ダイアログで「OK」をクリックすると、ダウンロードとインストールが始まります。

インストール完了後、再度flutter doctorを実行して、Command-line Toolsに関するエラーが解消されたか確認してください。

3-4. Android SDKライセンスへの同意 (flutter doctor --android-licenses)

Android SDKを使用するには、いくつかのライセンス契約に同意する必要があります。flutter doctorの実行結果で「[X] Android licenses not accepted.」と表示された場合、以下のコマンドを実行してライセンスに同意してください。

flutter doctor --android-licenses

コマンドを実行すると、複数のライセンスが表示され、それぞれについて同意するかどうか (y/n) を尋ねられます。通常は全てyを入力してEnterキーを押し、同意します。

全てのライセンスに同意したら、再度flutter doctorを実行します。全ての項目が[✓]になっているか、または許容できる[! ]のみになっていることを確認してください。これでFlutter開発環境の基本的な設定は完了です。

Android実機の準備

PC側の環境構築が整ったら、いよいよお手持ちのAndroidスマートフォンを開発用に準備します。

4-1. 開発者向けオプションの有効化

AndroidスマートフォンをPCに接続してデバッグするには、「開発者向けオプション」を有効にする必要があります。このオプションは通常隠されています。

  1. スマートフォンの「設定」アプリを開きます。
  2. 「システム」または「端末情報」などの項目を探します。（機種によって異なります）
  3. 「端末情報」を開き、「ビルド番号」の項目を連続して7回タップします。「これでデベロッパーになりました！」のようなメッセージが表示されれば成功です。

4-2. USBデバッグの有効化

開発者向けオプションが有効になると、「設定」アプリ内に「開発者向けオプション」または「開発者向け設定」という新しい項目が出現します。

  1. 「設定」アプリに戻り、「システム」などの項目から「開発者向けオプション」を開きます。
  2. 項目の中に「USBデバッグ」というスイッチがあるので、これをオンにします。警告が表示されることがありますが、内容を確認した上で「OK」をタップします。USBデバッグは、PCから端末を操作したり、アプリの内部状態にアクセスしたりするための強力な機能ですが、セキュリティリスクも伴うため、信頼できるPC以外には接続しないように注意が必要です。

4-3. PCとのUSB接続とデバッグ許可

スマートフォンの準備ができたら、PCとUSBケーブルで接続します。

  1. PCとスマートフォンをUSBケーブルで接続します。

  2. スマートフォン側に「このコンピュータによるUSBデバッグを許可しますか？」というダイアログが表示されるはずです。必ずこのダイアログで「常に許可する」にチェックを入れ、「許可」をタップしてください。 これにより、次回以降同じPCに接続した際に再度許可を求められなくなります。

    トラブルシューティング: このダイアログが表示されない場合、以下の点を確認してください。
    * USB接続の用途が「ファイル転送」や「MTP」など、データ転送可能なモードになっているか。（充電専用モードになっていないか）
    * USBケーブルはデータ転送可能なものか。
    * PC側のUSBポートは正常に機能しているか。
    * スマートフォンの開発者向けオプションとUSBデバッグが有効になっているか。
    * 必要であれば、USBケーブルを抜き差ししたり、スマートフォンを再起動したりしてみてください。

  3. PCのコマンドプロンプトやPowerShellでflutter devicesコマンドを実行し、接続した実機がリストアップされるか確認します。

    bash
    flutter devices

    以下のように表示されれば、PCが実機を認識しています。

    “`
    1 connected device

    Pixel 6 Pro (mobile) • 1234567890ABCDEF • android-arm64 • Android 13 (API 33)
    “`

    トラブルシューティング: flutter devicesで実機が表示されない、または表示されるが「not authorized」と表示される場合、USBデバッグの許可ダイアログで「常に許可する」にチェックを入れて「許可」をタップする手順が正しく行われていない可能性が高いです。スマートフォンの「開発者向けオプション」の設定内で「USBデバッグの承認を取り消す」を実行してから、再度PCと接続し、ダイアログが表示されるか確認してみてください。

4-4. USBドライバの確認とインストール (Windowsの場合)

Windows環境では、Android実機をPCが正しく認識するために、適切なUSBドライバが必要になる場合があります。特に、初めてPCに接続するメーカーやモデルのスマートフォンの場合、ドライバのインストールが必要になることがあります。

ほとんどの場合、Android Studioをインストールする際に標準のGoogle USB Driverがインストールされます。しかし、特定のメーカー製端末（Samsungなど）では、メーカー独自のドライバが必要な場合があります。

  • Google USB Driverの場所は、通常Android SDKのインストールフォルダ内 (C:\Android_SDK\extras\google\usb_driver など) にあります。
  • 特定のメーカー製端末の場合は、そのメーカーのサポートウェブサイトで「USBドライバ」を検索し、ダウンロードしてインストールしてください。

ドライバのインストールは、Windowsのデバイスマネージャーから行うことができます。PCに実機を接続した状態で、デバイスマネージャーを開き、「ほかのデバイス」や「Android Device」などの項目に不明なデバイスとして表示されていないか確認し、もし表示されていれば右クリックして「ドライバーの更新」を選択し、手動でダウンロードしたドライバフォルダを指定してインストールを試みてください。

Flutterプロジェクトの作成と実行

環境構築と実機の準備が全て完了したら、いよいよ最初のFlutterプロジェクトを作成し、実機で実行してみましょう。

5-1. Flutterプロジェクトの作成場所

新しいFlutterプロジェクトを作成する際、Flutter SDKをインストールしたフォルダ内ではなく、別の作業フォルダを作成することを推奨します。例えば、SDKがC:\flutterにあるなら、プロジェクトはC:\Users\YourName\StudioProjects\my_first_appのような場所に作成するのが一般的です。これは、SDK自体のアップデートや管理と、個別のプロジェクトの管理を分離するためです。

5-2. VS CodeでのFlutterプロジェクト作成

VS Codeを使って簡単に新しいFlutterプロジェクトを作成できます。

  1. VS Codeを起動します。
  2. コマンドパレットを開きます（Ctrl+Shift+P または メニューの「表示」>「コマンドパレット」）。
  3. 「flutter new project」と入力し、「Flutter: New Project」を選択します。
  4. プロジェクトの種類を選択します。ここでは「Application」を選択します。
  5. プロジェクトを作成するフォルダを指定します（先ほど推奨したSDKフォルダとは別の場所）。
  6. プロジェクト名を入力します。プロジェクト名は小文字のアルファベットとアンダースコア (_) のみを使用し、数字や記号、大文字、スペースは含められません（例: my_first_app）。
  7. Enterキーを押すと、プロジェクトフォルダが作成され、サンプルコードを含むプロジェクトが開かれます。

5-3. 依存パッケージの取得 (flutter pub get)

Flutterプロジェクトは、外部のライブラリ（パッケージ）に依存している場合があります。これらのパッケージをダウンロードし、プロジェクトが使用できるようにする作業が必要です。これは「依存パッケージの取得」と呼ばれ、flutter pub getコマンドによって行われます。

VS Codeで新しいFlutterプロジェクトを開くと、通常はVS Codeが自動的にこれを検知し、必要なパッケージのダウンロードをバックグラウンドで行います。ウィンドウ下部に「Some packages are missing or out of date…」というメッセージが表示された場合は、「Get Packages」ボタンをクリックすることで手動で実行できます。

また、プロジェクトフォルダ内でコマンドプロンプトやPowerShellを開き、以下のコマンドを実行することでも手動でパッケージを取得できます。

flutter pub get

パッケージの情報はプロジェクトフォルダ直下にあるpubspec.yamlというファイルに記述されています。このファイルについては、今後の開発で詳しく学ぶことになります。

5-4. VS Codeでの実行デバイスの選択

プロジェクトを開いたVS Codeのウィンドウ右下、ステータスバーに現在選択されている実行デバイスが表示されています（例: Windows (desktop) や Web (Chrome)）。ここをクリックすると、接続されているデバイスや利用可能なエミュレーター/シミュレーターのリストが表示されます。

リストの中から、先ほどPCに接続し、flutter devicesコマンドで認識されていることを確認したAndroid実機を選択してください。

5-5. サンプルアプリの実行と実機での確認

実行デバイスとしてAndroid実機を選択したら、いよいよアプリを実行してみましょう！

  1. VS Codeのメニューバーから「実行」>「デバッグなしで実行」を選択するか、キーボードのCtrl+F5を押します。（デバッグ情報を確認しながら実行したい場合は「デバッグの開始」またはF5を押します）
  2. VS Codeの下部にある「デバッグコンソール」や「出力」パネルに、アプリのビルド状況が表示されます。初回ビルドには時間がかかることがあります。
  3. ビルドが成功すると、自動的にアプリがあなたのAndroid実機にインストールされ、起動します。

画面には、Flutterのサンプルアプリが表示されるはずです。画面中央のボタンをタップすると、画面下のカウンターの数字が増えるだけのシンプルなアプリです。

アプリが起動したら、VS Codeからコードを少し変更してみてください（例えば、画面中央のテキストを変更するなど）。そして、VS Codeのデバッグツールバーにある雷マークのアイコン（Hot Reload）をクリックするか、保存 (Ctrl+S) してみてください。コードの変更が即座に実機上のアプリに反映される「Hot Reload」機能を体験できます。

これで、Windows PCを使ってFlutterの開発環境を整え、Android実機でアプリを動かすという最初の大きな一歩を達成しました！

（おまけ）Dart DevToolsの紹介

Flutter開発を進める上で非常に強力なツールとして、「Dart DevTools」があります。これは、Flutter/Dartアプリのデバッグ、パフォーマンスプロファイリング、UIレイアウトの確認などを行うためのWebベースのツールスイートです。

VS Codeでアプリをデバッグ実行中（F5で起動）の場合、デバッグコンソールにDevToolsを起動するためのURLが表示されます。このURLをブラウザで開くことで利用できます。

ウィジェットツリーの確認、パフォーマンスのボトルネック特定、メモリ使用量の監視など、開発効率とアプリの品質向上に役立つ機能が満載です。ぜひ今後の学習で活用してみてください。

おわりに

この記事では、Windows PCでFlutter開発環境をゼロから構築し、お手持ちのAndroid実機で最初のサンプルアプリを動かすまでの具体的な手順と、初心者の方が特につまずきやすいポイント、そしてその解決策を詳しく解説しました。環境構築は、新しい技術を学ぶ上で最初の、そして最も重要な関門の一つです。このガイドを通じて、その壁を無事に乗り越えられたなら、これほど嬉しいことはありません。

Flutterは、魅力的なUIを迅速に開発でき、一つのコードベースでiOSとAndroidの両プラットフォームに対応できる強力なフレームワークです。環境構築はあくまでスタート地点です。ここから、Dart言語の基礎、Flutterのウィジェットの概念、状態管理、画面遷移など、学ぶべきことはたくさんあります。

しかし、心配する必要はありません。一歩ずつ着実に進んでいけば、必ずあなたの思い描くアプリを形にできるようになります。この記事で得た知識と経験を活かし、ぜひFlutterでのアプリ開発を楽しんでください。

もし開発中に新たな疑問や問題に遭遇したら、Flutter公式ドキュメントを参照したり、オンラインのコミュニティやフォーラムで質問したりすることも有効です。

あなたのFlutter開発の旅が、実り多い素晴らしいものとなることを心から応援しています！

撮影に使用している機材【PR】

Camera:α7 IV ILCE-7M4

Lens:FE 24-70mm F2.8 GM II

Lens:FE 35mm F1.4 GM

Edit:Lightroom・premirePro

あわせて読みたい
【お花博士みずごろう】撮影に使用している機材を全紹介！オススメ機材総まとめ！ 撮影に使用している機材総まとめ! 一眼カメラを購入して8年がたちました。時代の主流が一眼レフカメラからミラーレス一眼へと変化し、重量の軽量化とピント性能が上がっ...

【無料】撮った写真でWEBページを作りませんか？

未分類

この記事が気に入ったら
フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！
目次