Flutterをやってみる
「スマホアプリが動かなくなった」という友人の投稿を見て、居住自治体が配布しているアプリをインストールし、複数の不具合等を見つけたのがきっかけでした。アプリに関する知識が全く無い状態で自治体に報告するのも・・・と思ったので、Flutter を触ってみることにしました。
ちなみに、このアプリは Apache Cordova 製でした。
感想・まとめ
- RAM 16GB では足りない
- やる前に何度か見かけていた『Flutter はクロスプラットフォーム開発 FW であるが、Android と iOS アプリ開発に要する労力が半分になる訳ではない』という言説の理由が何となく分かりました
- Material Components を使用するならある程度は楽できるが、独自デザインになると難易度が急に上がる
- Dart と Flutter だけなら学習コストは大したことが無いが、必要に応じて Kotolin そして Android 自体をも把握して作成するのは大変・・・iOS だと Swift も
not yet / do it later
- Riverpod
- yumemi-inc/flutter-training-template: 株式会社ゆめみ Flutter 研修
- Weather Frecast App
- yumemi-inc/flutter-engineer-codecheck: This is a code check task for Flutter engineers employment in YUMEMI.
- like GitHub App clone
did it
Flutter Learn を手を動かしながら読み終えましたが、Widget に何があるか、Flutter/Dart 特有の書き方といったものを更に理解するため、Zenn や Google Codelab 等のチュートリアルをやりました。
- いちから始めるFlutterモバイルアプリ開発
- http, webview_flutter
- 初めての Flutter アプリ
- Flutter アプリのテスト方法
- routing with go_router, tests; unit test, widget test, perf test
- Flutter アプリに Google マップを追加する | Google Codelabs
- google_maps_flutter, http, json_serializable
- MDC-101 Flutter: マテリアル コンポーネントの基本
- backdrops, custom fonts, gridview
- マテリアル 3 でアニメーション化されたレスポンシブ アプリ レイアウトを作成する
- Flutter アプリを「退屈なアプリ」から「見栄えの良いアプリ」に変える
- Flutter 用のマテリアル モーションで美しい移行を作成する
- 電池残量と充電状態を監視するアプリ
- Firebase for Flutter を理解する
- codelabs/firebase-get-to-know-flutter at main · flutter/codelabs
notes
commands
flutter create の後に-e を付ける事で最小構成のプロジェクトを作成できる。
run app
codelabs/google-maps-in-flutter
- 【Flutter】クレデンシャル情報を.envファイルで取得し、ネイティブファイルで利用する方法【GoogleMap】
- 【Flutter】環境ごとのAPIキーをiOS/Androidネイティブ側に設定する【Google Maps API】
codelabs/flutter-boring-to-beautiful
- Flutter アプリを「退屈なアプリ」から「見栄えの良いアプリ」に変える
- codelabs/boring_to_beautiful at main · flutter/codelabs
- flutter_bloc | Flutter package
- Flutter Widgets that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with the bloc state management package
- flutter_bloc | Flutter package
- Material Theme Builder
- Design tokens – Material Design 3
- adaptive breakpoints for mobile, tablet, pc
flutter_bloc
Flutter アプリケーションにおけるビジネスロジックの管理を簡素化し、UI とビジネスロジックの分離を促進するためのデザインパターン。状態管理が容易になり、コードのテストがしやすくなる。らしい。
part of
ライブラリや大規模なコードベースを分割するために使用されるキーワード。複数の Dart ファイルを1つのライブラリとして扱い、モジュール化やコードの整理が容易になる。らしい。
class A with B
part of
@Freezed()
class A with B
class A extends B
とは違う様子
class A extends B
- 単一継承
- クラスAはクラスBのすべての機能を継承し、オーバーライドできる
- 強い継承関係を示す
class A with B
- 複数のミックスインを使用可能
- クラスAはミックスインBの機能を利用でき、他の継承関係に影響を与えない
- 再利用可能な機能を追加するために使用する
extension A on B
learn_flutter/boring_to_beautiful/lib/src/shared/extensions.dart at main · oriverk/learn_flutter
Dart 言語の機能で、既存のクラスに新しいメソッドやプロパティを追加する方法です。この機能を使用することで、既存のクラスの定義を変更することなく、そのクラスに新しい機能を追加できます。Flutter でもこの機能を利用して、標準ウィジェットや他のクラスにカスタムメソッドを追加できます。(ChatGPT)
codelabs/material-motion-flutter
InkWell VS GestureDetector
SharedAxisTransition; アニメーション パッケージ内の共有軸移行
- アニメーション パッケージ内の共有軸移行は、SharedAxisTransition と呼ばれます。このウィジェットには次のプロパティがあります
- fillColor: 移行中の背景に使用される色
- animation: 子の出入りを操作するアニメーション
- secondaryAnimation: 新しいコンテンツが前面にプッシュされたときに子を移行させるアニメーション
- transitionType: 共有軸移行のタイプを、スケーリング、水平、垂直から選択します
- child: 移行しながら出入りするウィジェット
慣れの問題だと思うが、css
と比較して非常に複雑だと感じた。個人的には boring_to_beautifulのtheme.dart のページ遷移時アニメーションぐらいで十分。
battery level app
- references
Which AndroidManifest.xml to edit in Flutter project?
Main AndroidManifest.xml file is located at ‘Project’ > app > src > main > AndroidManifest.xml. Other AndroidManifest.xml which are in debug folder and profile folder are systems generated when you are running a flutter app directly to mobile it will generate or while creating a flutter project. E.g: It is used for hot reload when the device is connected.
電池残量と充電状態を監視する
充電状態の変化を監視する
現在の電池残量を特定する
- 条件式
VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP
- デバイスが Android Lollipop(API レベル21)以上のバージョンで動作しているかどうかをチェック
VERSION.SDK_INT
- デバイスで実行されている Android のバージョンを取得するための定数
VERSION_CODES.LOLLIPOP
- Android のバージョン Lollipop(API レベル21)を示す定数
codelabs/firebase-get-to-know-flutter
firebase setup on Windows
install through coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.