727 Followers
·
Follow

わさぎゅーになりました。

さて、今回は初めて pub.dev に Flutter 向けの Package を lcdsmao さんと一緒に作ったのでその紹介です。

Image for post
Image for post
FlutterGen’s Logo

Android (AAPT) には R.java というものがあります。
主に画像や文字列などのリソースをプロジェクトの所定の場所 ( res/) に置くと、そのリソースへ安全にアクセス出来るようにするための R.java が自動生成されます。
なので Android においてリソースを文字列 ( "res/drawable/logo.png") で指定するようなことはありません。

Xcode には自動生成される機能がないので、このアイデアを元に Swift では R.swiftSwiftGen といったサードパーティのツールがあります。

Flutter でも Xcode と同様で自動生成される機能はなく、 pubspec.yaml の assets に指定したリソースを文字列で指定しないといけません。これらの手間とリスクをなるべくなくせるように FlutterGen を作りました。

pubspec.yaml で画像などのリソース設定に関する詳細は公式ドキュメントを参照してください。

FlutterGen を使っていない場合には下記のようなエラーが起こるかもしれません。

pubspec.yaml にこのように設定したとします。

使う側では Image class に PATH 文字列を指定することになります。

もしタイポしていた場合は気づきにくいと思います。実際に上記の例だと、拡張子が間違っているので実行時にエラーになります。

The following assertion was thrown resolving an image codec:
Unable to load asset: assets/images/profile.jpeg

それを以下のようにタイプセーフに指定できるのであればエラーを防ぐことができると思います。…


わさびーふがになるまで後 4 日

はじめに

この記事は Flutter Architecture Blueprints の解説記事です。
今回は Flutter アプリを MVVM で実装する上でどういう形にしていったかを解説していきたいと思います。Android エンジニアにとって脳内変換出来そうなキーワードも使っていきます。

実はアーキテクチャを解説するのはあまり好きではなく、この形が合理的だと言っても、そのエンジニアの経験と趣味思考の違いで話が合わなくなることがあると思っていて、それが押しつけになっていることがあります。なのでこれが完璧だと捉えないでください。私も勉強中の身です。

Image for post
Image for post

MVVM

まずは MVVM の説明をしていきます。
※知ってる人は読み飛ばしてください

Flutter Architecture BlueprintsREADME にも貼ってあるこの図を見てください。

Image for post
Image for post
Flutter Architecture Blueprints

MVVM は Model–View–ViewModel のことです。

UI の実装において、例えばテキストを入力し、バリーデーション、データを保持し、ボタンをタップして、サーバに送信するようなコードを View に全て追加していくと UI が複雑になっていった時には更にコードが肥大化してしまい、それは UI とプレゼンテーションロジックとビジネスロジックの密結合になっているのでメンテナンスが大変ですし、テストを書くが困難に思えます。

そこで必要になってくる概念が関心の分離 (SoC) です。
簡単に説明すると全てのアーキテクチャ共通して言えることですが、何をさせたいのか?その役割によって分離した構成要素とすることです。

Image for post
Image for post
MVVM

MVVM の構成要素の基本的な考えは
View は UI (Widget) を描画(出力)し、ユーザからの入力データを受け取ります。
ViewModel は View から入力された状態(データ)を適切に変換して Model として持ちます。また、Model の状態(データ)を View 渡して画面の更新を促します。
Model は状態(データ)を保持し、それがどう変換されて画面に描画されるかは知りません。
であり View、ViewModel、Model の 3 つです。

なので厳密にいうとこの README にあるアーキテクチャの図は MVVM だけではなく Repository pattern も含まれています。
Repository pattern はデータソースへのアクセスを抽象化するためのデザインパターンです。ViewModel が持つことになりますが、ViewModel 側からすると Repository とデータの形式だけを取り決めるだけで、入手先がサーバからなのか、ローカルの DB…


わさびーふです。

Image for post
Image for post
Cover image by Harley-Davidson on Unsplash

json_serializable などを使った時に以下のコマンド叩くと思います。

$ flutter packages pub run build_runner build

Flutter アプリ (project_type: app) のデバッグをする時は、例えば Intellij などが Fluter Run Configuration を自動生成してくれるので、そんなに困ることはありませんが、build_runner コマンドで source_gen などを package/plugin を開発時にコード自動生成する過程でデバッグしたい時があります。いわゆる Flutter というよりかは Dart 側のデバッグ方法です。

Stack Overflow で該当の記事を見つけたのですが、少し情報が不足していたので説明していきます。

よく見かけるこのようなディレクトリ構成で package を作ってるとします。パッケージとそのサンプルプロジェクトです。

my_generator
├── build.yaml ※ build_runner を使う設定ファイル
├── example ※ サンプルプロジェクト(build_runner を実行する側)
├── lib ※ サンプルプロジェクト(build_runner を実行する側)
│ └── builder.dart ※ build_runner で実行されるビルダー
├── pubspec.lock
└── pubspec.yaml

Intellij の設定で説明していきます。VSCode の人は置き換えてください。

flutter packages pub run build_runner build のコマンドは example 内で実行しようとしているので 自動生成されている example/.dart_tool/build/build.dart のパスを確認します。

Image for post
Image for post
build.dart screen

② 上部にある ADD CONFIGURATIONS から設定していきます。

Image for post
Image for post
Add Configuration screen

Dart Command Line App を選択します。

Image for post
Image for post
Add New Configuration

④ Run Configurations の設定を以下の通りにしていきます。
Name:buid.dart
Dart file: example/.dart_tool/build/build.dart のパス
Program arguments: build
Working directory:example のパス

※ チーム開発で共有するために Git 上で管理したい場合には Store as project file にチェックが必要です。

Image for post
Image for post
Run/Debug Configurations screen

これで Intellij からでも以下のコマンドが叩かれることになります。

$ flutter packages pub run build_runner build

※ 前回のデバッグビルドから何かしらファイルが変更されていないと再度ブレイクポイントに止まらないので注意してください。

.idea/runConfigurations/build_dart.xml の設定内容も載せておきます。

あとがき

連載は次回(。-人-。)

About

wasabeef

Google Developers Expert for Android. #shibuya_apk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store