Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@masahanami002(【テキトー備忘録】 Masarina)

Flutterを扱ってDart言語でとりあえずAndroidアプリをシミュレーションするまでの備忘録

Last updated at Posted at 2025-10-29
vscodeはインストールされていると仮定します
gitのインストールから始めます。
Flutterのインストール手順は「https://docs.flutter.dev/get-started/quick」を参考にしています。

※最初の方、スクショ少なめです。後半、スクショ多めです（気分）。

2025年10月20日

gitのダウンロード

次のURLからインストーラをダウンロード。
https://github.com/git-for-windows/git/releases/download/v2.51.1.windows.1/Git-2.51.1-64-bit.exe
なおこのURLは「https://git-scm.com/downloads/win」から探したURLです。

gitのインストール

ダウンロードしたexeを実行してinstall。

FlutterをVScodeにinstall

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
このURLに飛んで、”Install”を選択し、"VScodeで開きますか？"の質問に回答してVScodeにFlutterをInstall。

Dartのインストール

→ Flutterをインストールした時点でDartも入っていた。

ここまでで環境構築完了。
（
・Flutterのインストール
・Dart言語のインストール
・gitのインストールが完了した（GitHubじゃないよっ、gitだよっ）
）

新しいFlutterプロジェクトを作成する

VScode上で

Ctrl＋Shift＋P

をする。
打ち込みバーがアクティブになるので、そこに

Flutter: New Project

と打ち込む

すると、「SDKをinstallしますか？」というポップアップウィンドウ（いつもの右下に出てくる奴）が出てくるので、SDKをinstallする（このやり方でごめんなさい。）
ここで、
『Select Folder for Flutter SDK』という窓が開く。
聞かれているのは――
“Flutter SDK 本体をどこに保存するか” なのだ。
好きな場所でよい。（後でpathの設定もポップアップウィンドウで聞いてくれるので。）
するとSDKのインストールが始まる。
完了すると、SDKの環境パスを設定しますか？と質問してくれるので、設定するを選択してパスを通してください。

そしたらもう一度、

Flutter: New Project

を実行する。
そこでApplicationを選択すると、
新しいFlutterプロジェクトを保存するディレクトリ先を聞かれるので、ディレクトリを指定して保存しよう。
ディレクトリを選択すると、「選択しました！」みたいなポップアップウィンドウは来ない。
代わりに、再度検索欄がアクティブになっており、「flutter_application_1」の様な文字が入っている。この文字は自分のプロジェクト名とうとう、何でも良い。文字を決めたら、エンターを押そう。

これで、新しいプロジェクトの作成に成功した。

ここまでで、なんかFlutter独自（？）のconsoleが開いているので確認しよう。

[flutter_application_1] flutter create --template app --overwrite .
Creating project ....
Resolving dependencies...
Downloading packages...
Got dependencies.
Wrote 130 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in .\lib\main.dart.

exit code 0

と私はなっている。
「All done!」
と
「exit code 0」
とあるので、これは問題なくFlutterのプロジェクトを作成できた、ということらしい（翻訳して確認した）

コーディング

新しいプロジェクトを立ち上げたので、
VScode内に”EXPLORER”ウィンドウが埋め込まれているとおう。
このなかの、プロジェクト名の（特に指定していなければ、FLUTTER_APPLICATION_1というディレクトリ名）
の中の、
libディレクトリを開きます。（Flutterでは、ここにスクリプトを書きます。）（🌟３）

libディレクトリ

この中にmain.dartファイルがあります。
ここにテンプレが張られていますが、以下の内容に置き換えよう。

import 'package:flutter/material.dart';

void main() {
  runApp(const OtogeseiApp());
}

class OtogeseiApp extends StatelessWidget {
  const OtogeseiApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'お告げ精さん',
      theme: ThemeData(
        colorSchemeSeed: Colors.pinkAccent,
        useMaterial3: true,
      ),
      home: const OtogeseiHome(),
    );
  }
}

class OtogeseiHome extends StatefulWidget {
  const OtogeseiHome({super.key});
  @override
  State<OtogeseiHome> createState() => _OtogeseiHomeState();
}

class _OtogeseiHomeState extends State<OtogeseiHome> {
  String message = "おはよう、りな！今日もキラキラしてるね。";

  void rollDice() {
    final result = (1 + (6 * (DateTime.now().microsecond % 1000) / 1000)).toInt();
    setState(() => message = "サイコロの結果は $result だよ！");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("お告げ精さん")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(message, style: const TextStyle(fontSize: 20)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: rollDice,
              child: const Text("サイコロを振る"),
            ),
          ],
        ),
      ),
    );
  }
}

テストをしてみよう。(🌟２)

image.png

左上の中のRUNを探して、
とりあえずChromeでテストしてみよう。

できた。

AndroidのAPPプラットフォームでシミュしてみよう。

さぁ、一度Chromeを指定してしまったので
以降ずっとChromeでしかテストできない形になっている。
でも大丈夫！
image.png
右下にChromeって書いてあるので、これをクリックすると、
いろんなプラットフォームに変えられる。
でも、iOSのアプリ環境は、試せないらしい。いやもちろん、コンパイルしたらiOSで動かせるのが、dart。あくまでも "VScode上ではiOSのAPP環境を試せませんよー" というだけなので、大丈夫。

さて、ここでAndroidのAPP環境として実験したいので、Androidを選択。

ココ押して、
image.png

Create Android emulatorを押す。
image.png

さて、エラーが出ました。
image.png

avdmanager is missing from Android SDK エラー

さて、これはAndroidエミュレーターが入ってませんよー
なので、インストールしてくださいねー
ということ、らしいです。

Flutter用のAndroidエミュレーターは、
Android Studio に付属しているらしいです。
なので、、、、Android Studioをインストールします。（Visual Studio が既に入ってる私達からすると、不要だけど、エミュレータを入手する経路として、しょうがなくAndroid Studio をインストールするという意味です。）

Android Studio を利用して、Android Emulator を入手する。

Android Studio のインストーラーを入手します。
https://developer.android.com/studio?hl=ja
image.png
これですね。（1.4GB、、、おもっ）

インストーラーを起動して、
image.png

いつも通りNextをポチポチしますが、
image.png
…Android Virtual Deviceに✅入れときましょうか。なんかemulatorっぽい名前ですので。

Android Studioをinstallする場所を指定します。
image.png
（動くかわからないけれど、私は外付けSSDにinstall（良い実験台の身ですね））

image.png
次はこれなんだけど、これは、
「Android Studio をinstallするけれど、ショートカット保存する？どーする？」
って聞かれています。
ショートカットを作成しない場合は、
Do not create shortcutsに✅を入れてください。
（なお、ここで表示されているほかのAPPの名前の一覧は、あなたのPCのスタートに保存されているショートカット一覧です。）
image.png
installボタンを押すと、installが始まりました。

「emulatorをinstallしますか？」という質問が無かったので、一番最初の
Android Virtual Deviceに✅を入れるのは
重要だったのかもしれませんね。
image.png

Android Studio を立ち上げて、これは
Don't send でいっか。

VScodeにインストールしたFlutterに、Android Studio内のSDKのパスを教えてあげよう

まずAndroid Studio で SDK のパスを確認 をしよう。

わぁAndroid Studioひらいいたら設定いろいろあるね。
image.png
これは無難にStandardを選択して進もう。

image.png
これらがinstallされるらしい。
最後のSources for Android36 だけAndroid Emulatorを扱うには必要のないものらしいが…ここまで来たなら入れてしまおう。50MBなんて10分動画くらいの容量だし。

image.png
installするすべてのライブラリを認証してくださいだってさ。AcceptにしてNext。

image.png

installが始まったね。

さて、installが終わりました。
image.png

分かりにくいけど、More Acrionsって場所を押して、
SDK Manager をおします。すると、、、
上の方に、SDKのパスが在るーっ！
image.png

これをメモしよう

そして、このSDKのパスをflutterに教えてあげましょう。

flutter config --android-sdk "C:\Users\Masarina\AppData\Local\Android\Sdk"

image.png

んえ。。。SDKパス登録できたけど、
今開いてるFlutterプロジェクトを再起動しろって言われた、、、、

一かいVScode閉じましょうか。
あ、ここでもう一度

flutter config --list

で確認してみましょうか。

…なるほどそうなったか
image.png
最後に追加される形でしたね。行けるのかしら。

そしたら、さらなる確認を使用。
Flutteには、なんとトラブルシューティング的なものがあるのだ！

flutter doctor

とPower Shellで実行すると、次の様になった。
image.png

おおお、取りあえず
ファイヤーウォールに引っかかった
“adb.exe”ってやつは
Android Debug Bridgeっていう開発用の通信ツール
らしい。
Flutter公式のため、許可してOKだそうだ。
フルアクセスを許可し、もう一度

flutter docior

をすると、、
image.png
うーん私の場合ちょとまずそう、、
二つビックリマークで必要なものがないみたい。

しかしこの二つは致命的ではない、そうchatGPTは言ってくれた。
image.png

cmdline-toolsをinstall

image.png
だそうだ。
image.png
こうだな？
これでAcceptすると
image.png
おお、時間またかかりそうじゃの。

5分とかからなかったや。
そしたら

flutter doctor --android-licenses

でなんかいろいろ承認しなきゃらしい。沢山y押したわ。

これでもう一度

flutter doctor

でテストしよう。
すると（🌟1）
image.png

OKあと一個！

[!] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.17) の解決

これは
image.png
ってめぐみんが言ってるのでやってきてください。

って、installerなんてあるのね。これか。
image.png
開くと、
image.png
って出てくるよ私の環境は。

ここでさ、
image.png
めぐみんは2022のやつの変更をクリックしてねって言ってるけれど、さっきの（🌟1）で、ワタクシMasarinaの場合は2022だからめぐみんが行ってくれたのかもしれない。他の人は（🌟1）で2022以外のモノを言われている場合があると思うので、あなたが（🌟1）で言われたものを、ここで"変更"しましょうね。

って、変更押したら次の画面になったけど
image.png
めぐみんが進めてきた
Desktop development with C++ がない。
とりあえず必要そうな三つにcheck入れた。
image.png
”Unity によるゲーム開発” は、最初から✅入ってた自分。

さぁこれで変更を押して、認証後にinstallが始まった
image.png
遅杉山英司。
長っが。（30分くらいかかってる）

完了！テストしよう！

flatter doctor

image.png
きたーっ！

FlutterにAndroid Emulatorのパスも教えたし、Flutter doctorで引っかかったエラーも解決したし、次のステップに行こう

VScodeアプリを一度落として、
もう一度アプリを立ち上げよう。

そしたら、前に作ったflutterプロジェクトを
もう一度開かなくっちゃね。
つまり、(🌟２)で作成したFlutterプロジェクトを、VScodeでまた開くやり方をこれから一緒にやっていこう。

image.png
VScode立ち上げて、

Fileの、、Opne Folderだね！
（日本語だと多分、、"フォルダーを開く" とかかな？）
image.png
（🌟３）で指定したフォルダーを指定して開けば、OK.

自分は任意に保存したので
image.png
これを指定するね。

開いた開いた！OKー！
image.png
でもここで赤バツ印が。
image.png
これは、
「
Java開発キット(JDK)がないよ〜というお知らせ。
Android向けのFlutter開発で必要だけど、Android Studioに同梱済みなので無視してOK。
」
だそうだ。

Android Emulatorで実行してみる

image.png
右下の、、No Deviceをクリック（または、まだChromeになってる人もいるかも。）。

すると、
image.png
指定してねー的な感じで出てくる。

さて、注目するのはここ！コロンビア！！そーれっ！
image.png
二つ追加されている。
この二つは次の通りだそうだ。
image.png
今回は両方やってみようか。
まずはcold bootじゃない方をクリックしよう。

わーん、真っ黒スマホ出てきたけど、なんか
Detected ADBってのでとまったーっ！
image.png

これは、、
image.png

だそうだ。
実質エミュレータは動いている。
こんかい、エミュレータはVScode側ではなく、Android Studio内のエミュレータを使用している。
この警告は、
「
VScodeにエミュレータ無いよー
」
といっているようだ。
だって、今回はAndroid Studioのエミュレータのpathを使っているから、このエラーは無視してOKだそうだ。

ほか下赤バツがもう一つ増えていた。
image.png
これも、、、とりあえず無視してOKだそうだ。

しかし、main.dartのプログラムはエミュレータ上で動いていない。
これは、VScode内のTERMINALで

flutter run

を実行しよう。
こんな感じ↓
image.png
Flutterプロジェクトのディレクトリを指定して、開いたよね。
なので。
VScodeは自動的に
プロジェクトと同じディレクトリ層まで
ターミナルは移動した状態になってくれいている。
だから、ここでrunすればOKってこと！

image.png
ながい、、
現在おそらく、
image.png

だそうだ。

しかし、エラーが出てしまった。
image.png

🚀 Error: Gradle task assembleDebug failed with exit code 1 をやっつける

あー、、このエラーは、プロジェクトのパスに全角文字が入ってることが原因らしい。

D:\作業机\APP\flutter_project\flutter_application_1

でも何とかしてみる。

とりあえず後にビルドエラーなどが起きるかもしれないが、
VScodeのターミナル上で

notepad .\android\gradle.properties

と打ち込み、
image.png
と出てくると思うが、
ここに

android.overridePathCheck=true

image.png
を追加して保存しよう。

そしたらもう一度ターミナル上で

flutter run

を打ちこみ、
、、、だめだ、やっぱりビルドエラー起きちゃった
image.png
やだね、windows。

そしたら、普通に自分はdocumentにprojectを移動させることにしました↓
image.png

VScodeに戻り、
File → フォルダを開く
で、
image.png
ドキュメント内に移動させたプロジェクトを指定します。
image.png

あ、ちなみにこんな感じでターミナルがないときは
image.png
右上の
image.png
この子を押せば、出てきます。

エミュレータが
image.png
になっていることを確認して、
ターミナルでflutter runしましょう。
image.png

,,,だめだ！
image.png
「ドキュメント」が日本語だっ！

まったく、、windowsめ、、。

しょうがないので
ユーザーディレクトリ直下に
専用フォルダを作成して
その中にプロジェクトを移動させた。
image.png

実行。いけっ！
image.png

きたーっ！！✨✨✨
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?