諸注意・学習動機
書類整理＆家計簿機能を持つアプリをFlutterの勉強がてら作ることにしました。とりあえず、たたき台ができたら APK を知り合いのつよそうなエフレ（X上の知り合い）とか、レビューしてくれそうな方にばらまきます。
下記のような例を自分も以前経験したこともあるため、何かしらのインストールは必ず会社のPCでやる場合は上長や同僚の方にそもそもＯＫかご確認をお願いします。
※いけても専用のツールを通す必要がある場合があります
使っているスマホとか諸々の執筆者の生活環境・労働環境に合わせて、以後
・Androidアプリを目標に
・開発にはVSCodeを利用、OSはWindows
を利用するものとします。
①環境構築（≒何をインストールする必要があるか）に関する情報の整理
とりあえずFlutterによるWindowsでのAndroidアプリ開発には以下の表のものが必要と分かりました。
※リンク先にはインストール時に参考になりそうなサイトを紐付けましたが、必ずしもそれが最適かは？？のため、備考につけた公式サイトや参考資料も必要に応じて参照してください。
| 入れるもの等 | 何をするものか （≒それは何か） |
備考 |
|---|---|---|
| 64-bitバージョンのWindows10かWindows11 | OS | |
|
Git for Windows ※ほぼ必須 |
Flutterそのものやソースコードのバージョン管理を行うのにコマンドを打ち込む | 公式サイト |
|
VSCode ※必須ではないが極力入れた方がよい |
プログラムコードを書いたり、書いたコードを試しに動かしてみるためのもの、いわゆるIDE（統合開発環境）の１つ | 公式サイト |
|
Flutter extension for VSCode ※VSCodeを使う場合は必須 |
FlutterをVSCodeで使いやすくするための拡張機能 | 公式サイト |
| Flutter SDK（Software Development Kit） ※③のFlutter SDKに関する設定参照 ※必須 |
Googleが提供している アプリ開発のツール群 | ・Dart言語のコンパイラ（プログラムを実行できる形に変換する道具 ・ライブラリ（ボタンや文字表示などの便利な部品集） 開発ツール（アプリを動かしたりテストしたりするためのツール） が全部入っているらしい。 |
| Google Chrome ※必須ではないが入れといた方が楽 |
ブラウザ | 公式インストーラ |
|
Android Studio ※使わなくてもAndroidアプリ開発を進める場合、これを経由して諸々インストールされるらしいので、ほぼ必須 |
Androidネイティブ層という部分をJavaかKotlinで直接いじるときに必要になるIDE（統合開発環境、VSCodeのようなもの） 付属のAVD（Android Emulator） を使いたい場合は、機能の１つであるAVD Managerが必要 プラグイン（≒拡張機能）をカスタマイズしたいときに使うらしい。 |
Android Studioの公式サイト ※Android SDK コマンドラインツールというのだけ入れて済ます方法もあるらしいが、エミュレータを使いたい場合、結局入れると楽 |
| Flutter plugin for IntelliJ ※Android Studioを入れた場合に入れる |
FlutterをAndroid Studioで使いやすくするための拡張機能 | 公式サイト |
本や参考資料によっては、Visual Studio（アイコンは紫）を紹介している場合もあるが、これは作ったFlutterのプロジェクトをデスクトップアプリ（WordやExcelのようにネットが使えなくても、PCには入っていれば画面上で使えるアプリ）にするために必要なものらしいので、これも必須ではない
Visual Studio CodeとVisual Studioは全くの別物です
②Flutter extension for VSCode
これをインストール
拡張機能マーク（積み木みたいなボタン）⇒Flutterと検索 ⇒画像のものを「インストール」
※インストール時、発行元の「Dart Codeを信頼する」かどうか聞かれるが「信頼する」で進める
③Flutter SDKに関する設定
（１）Flutter SDK（Software Development Kit）を下記の場所からダウンロードして得られるzipファイルをローカルのCドライブの直下とかに
Flutter SDKの在処
（２）ダウンロード後の諸々の設定
以下のサイトが分かりやすかったです
④Visual Studio Codeの+＠の設定（任意）
※必要に応じて、以下のsetting json（自動保存とか）をコピペなどして使ってください
※setting jsonについては以下の記事とかが分かりやすかったです
筆者のsetting.json
{
"files.autoSave": "afterDelay",
"security.workspace.trust.untrustedFiles": "open",
"editor.copyWithSyntaxHighlighting": false,
"hediet.vscode-drawio.resizeImages": null,
"workbench.colorTheme": "Brackets Light Pro",
"editor.tokenColorCustomizations": {
//コメント
"comments": {
"foreground": "#ff0000",
"fontStyle": "bold"
},
//関数・メソッド
"functions": {
"foreground": "#0000ff",
"fontStyle": "bold"
},
//キーワード
"keywords": {
"foreground": "#008080",
"fontStyle": "bold"
},
//数値
"numbers": {
"foreground": "#800000",
"fontStyle": "bold"
},
//文字列
"strings": {
"foreground": "#000",
"fontStyle": "bold"
},
//型
"types": {
"foreground": "#008000",
"fontStyle": "bold"
},
//変数
"variables": {
"foreground": "#ff00ff",
"fontStyle": "bold"
}
},
"cSpell.ignoreWords": ["Laravel", "resetsheet", "techis", "twitterblue"],
"cSpell.userWords": [
"addslashes",
"aichi",
"alreadyregistered",
"appbody",
"askdkc",
"authuser",
"autoincrement",
"autopep",
"barryvdh",
"beautifulsoup",
"borderwidth",
"breezejp",
"bringe",
"btns",
"Contactcontroller",
"contactforms",
"DATABASENAME",
"dazu",
"debugbar",
"deletepost",
"deleteposts",
"designdocuments",
"doesnt",
"dont",
"eachitem",
"editeddata",
"editmenu",
"editorview",
"editview",
"encrypter",
"esbenp",
"filemenu",
"fileopen",
"fontawesome",
"forgetpassword",
"gakumonnosusume",
"genspider",
"getinfo",
"githubcontactforms",
"herokuapp",
"hitsujitani",
"homenavbar",
"homenavcontents",
"homepagelinks",
"Homepagespider",
"illumiinate",
"indexview",
"informations",
"initialfile",
"innerwrap",
"inputvalue",
"itemdestroy",
"iteminfo",
"Itempagelinks",
"iudex",
"Kitefin",
"learncontents",
"lieben",
"loginpage",
"meinen",
"Miem",
"mimetypes",
"möchte",
"Modalerase",
"Modalshow",
"Myname",
"myskills",
"navcontents",
"NERV",
"neta",
"nongithub",
"nowhour",
"nowtime",
"openai",
"opinioncheckedindex",
"opinionindex",
"Oraga",
"Ornotlogin",
"Orqustion",
"outerwrap",
"outwrap",
"padx",
"pady",
"pagelink",
"pagelinks",
"Paiza",
"passwordbox",
"Photoshop",
"phpadmin",
"postdestroy",
"Pyhton",
"pyocr",
"qiita",
"qrcode",
"Renderable",
"seiten",
"Sekigahara",
"Sekitama",
"sekitamaposts",
"selectbox",
"sentense",
"showeach",
"showeachlink",
"showscd",
"smallinteger",
"tailwindcss",
"takekurabe",
"techdefaultwelcome",
"Tenki",
"tesseract",
"textvariable",
"tokenable",
"tsuke",
"uncompromised",
"updatedata",
"updateddeleteflag",
"updateddetail",
"updatedid",
"updatedinfo",
"updatedname",
"updatedtype",
"updatedupdatedat",
"updatedupdatedby",
"updateitem",
"validateduserinfo",
"visitorname",
"wissen",
"witchwatch",
"xampp",
"yobi"
],
"cSpell.diagnosticLevel": "Hint",
"editor.guides.bracketPairs": true,
"php.validate.executablePath": "C:\\xampp\\php\\php.exe",
"editor.mouseWheelZoom": true,
"workbench.iconTheme": "material-icon-theme",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.linkedEditing": true,
"editor.unicodeHighlight.includeComments": true,
"javascript.suggest.paths": true,
"typescript.suggest.paths": true,
"python.formatting.autopep8Args": ["--max-line-length", "150"],
"editor.codeActionsOnSave": { "source.organizeImports": "explicit" },
"git.openRepositoryInParentFolders": "never",
"git.confirmSync": true,
"workbench.startupEditor": "none",
"window.zoomLevel": 1,
"emmet.variables": { "lang": "ja" },
"workbench.colorCustomizations": {
"[Default Dark Modern]": {
"tab.activeBorderTop": "#00FF00", // アクティブなタブ上部のボーダー色（明るい緑）
"tab.unfocusedActiveBorderTop": "#00FF0088", // 非フォーカスのアクティブタブのボーダー色（半透明）
"textCodeBlock.background": "#00000055" // Markdownなどのコードブロックの背景色（半透明黒）
},
"editor.wordHighlightStrongBorder": "#FF6347", // 強調表示された単語の枠線色（例: 変数の再代入箇所など）
"editor.wordHighlightBorder": "#FFD700", // 通常の単語ハイライトの枠線色（カーソル下の変数など）
"editor.selectionHighlightBorder": "#A9A9A9" // 選択範囲の強調表示部分の枠線色（グレー）
},
"files.eol": "\n",
"[bat]": { "files.eol": "\r\n" },
"terminal.integrated.enablePersistentSessions": false,
"terminal.integrated.tabs.hideCondition": "never",
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"icon": "terminal-powershell"
},
"Command Prompt": {
"path": [
"${env:windir}\\Sysnative\\cmd.exe",
"${env:windir}\\System32\\cmd.exe"
],
"args": [],
"icon": "terminal-cmd"
},
"Git Bash": {
"source": "Git Bash"
},
"powershell": {
"path": "C:\\WINDOWS\\system32\\cmd.exe",
"args": ["/k", "chcp", "65001"],
"env": {
"PATH": "C:\\Program Files\\Java\\jdk-21\\bin;${env:PATH}",
"JAVA_TOOL_OPTIONS": "-Dstdout.encoding=UTF-8 -Dstderr.encoding=UTF-8",
"JAVA_HOME": "C:\\Program Files\\Java\\jdk-21"
}
}
},
"editor.fontSize": 12,
}
※個人情報はないためsetting.jsonの意味はGPTに突っ込んでもらって大丈夫です
※色の数値はIllustrator等と同様16進数
⑤VSCodeでとりあえず枠だけ作ってChromeで動かしてみる（HelloWorldしてみる）
※以下の方法以外に主な参考資料⑧のように辿って起動しても良い
（１）VScodeでコマンドパレットを開いてflutterと入力
※「Ctrl + Shift + P」でコマンドパレットを開く
コマンドパレットの様子（折りたたみ画像赤枠部分）
（２）下の折りたたみの画像の通り、ひな形を作り、HelloWorldを表示
実際の様子
※アプリ起動時コマンド
flutter run
学習を進める過程で出てきた用語①
APK（Android Package Kit）
詳細
Androidデバイスにアプリを配布・インストールするためのパッケージファイル形式のこと。アプリのコード、リソース、データなど、動作に必要なすべてのファイルが一つにまとめられており、拡張子は「.apk」。
Google Playストアからアプリをインストールする際にも裏側で利用されており、このファイルがあればストアを介さずに直接アプリをインストールしたり、バックアップとして保存したりすることもできる。
エミュレータ（emulator）
あるコンピュータやシステム、ハードウェアの動作を模倣・再現するソフトウェアやハードウェア（≒スマホの代わりに動かしてみるもの）
主な参考資料⑤参照
マテリアルデザイン
2014年にGoogleが提唱したデザインの大枠
Firebase
Googleが提供するモバイルおよびウェブアプリケーション開発のためのプラットフォーム。リアルタイムデータベース、認証、クラウドストレージ、ホスティング、クラウド機能、アナリティクスなど、多くのバックエンドサービスを提供している。無料プランがある
iOSアプリ
Apple社のスマートフォン「iPhone」やタブレット「iPad」などのiOSデバイスで動作するアプリケーション
Androidネイティブ層
とりあえず、FlutterはDartのフレームワーク（アプリの雛形が楽に作れるようになっているセット）ぐらいは聞いてたのですが(-_-)...
どうやら、スマホアプリにはOS に直接作用する部分（Android なら Java/Kotlin、iOS なら Swift/Objective-C で書かれたコード）が必ず存在するらしく、
そこがbuild（人間が書いたコードをPCが理解できるように変形すること）された時点で、DartからJavaやKotlinに無理矢理変えられる
ようです。（そもそもFlutterなどを使わない場合、Android アプリは基本的に Java か Kotlin で書かれているらしい。）
Flutterプロジェクトを作ると、android/ フォルダがあるらしいが、その android/ フォルダ以下がAndroidネイティブ層
主な参考資料
①動かして学ぶ！Flutter開発入門 掛内一章 著 翔泳社
②Flutterの公式が発信しているぽいyoutube
https://www.youtube.com/@flutterdev
③Flutter研修【MIXI 25新卒技術研修】
https://www.youtube.com/watch?v=vT95Ek6W8lQ
③テスト用Androidアプリの配布（備忘録）
https://zenn.dev/endeavor_robot/articles/9e06a63a95fb17
④Androidの公式のドキュメント（アプリの基礎）
https://developer.android.com/guide/components/fundamentals
⑤Androidの公式のドキュメント（Android Emulator上でアプリを実行する）
https://developer.android.com/studio/run/emulator?hl=ja
⑥Googleが推奨する「マテリアルデザイン」とは？5つの特徴と、メリット・デメリット・作り方について解説 Tayori Blog
https://tayori.com/blog/material-design/
⑦Androidの公式のドキュメント（Androidのマテリアルデザイン）
https://developer.android.com/develop/ui/views/theming/look-and-feel?hl=ja
⑧Flutter を VSCode で環境構築してみた！＜Windows編＞
https://qiita.com/shimizu-m1127/items/d8dfc2179bc01baaef6b