イケてるアプリにありがちなParallax(パララックス) EffectがついているWalkthroughをFlutterで作ります。 Read more

Contextual(Context, Deferred) Deep Linkとは この挙動の名前をGoogle, Appleははっきり定義はしていません。(多分) 広告系のSDKとかではDeferred Deep Linkとも呼ばれています。[1][2] (日本ではContext Deep Linkと呼んでる人も多いような🤔) Read more

WEBサービスを作るとクライアントとサーバの通信は必須となります。 通信方式に依りますが、API Clientの選択肢はいろいろあって、プロダクト環境で使う場合はほぼこの4つに絞られるかなと思います。 Read more

Dartには標準ライブラリのasyncパッケージにStream クラスが含まれています。 これはこれでとても便利なのですが、Androidで長く使っていたせいで非同期処理の操作がRx脳になっているので、時々こういうのはRxではできるのになーって思うことが多々あります。 Rxで個人的に一番好きなクラスはBehaviorSubjectでStreamの最後の値をキャッシュしておいて、Subscribe(Listen)と同時に最後の値をemitしてくれるものです。 オペレータだとdistinctUntilChangedかscanかwithLatestFron(combine)です。 Read more

FlutterはUIを構成するものはすべてWidgetでできています。そのため、AndroidにあるActivityやiOSにあるViewControllerのような画面の概念は厳密にはありません。 FlutterではNavigatorがページのような概念を持ったRoute(参考) のスタックを管理することで画面遷移を実現しています。 今回は NatigatorObserver と WidgetsBindingObserver を使ってアプリのライフサイクルイベントを検知します。 Read more

今回は、こんな感じでクレジットカードの登録画面等でよく見るカメラプレビュー画面にカードの枠をOverlayする画面をFlutterで実装します。 Read more

ListView(AndroidだとRecyclerView)に状態を持ったレイアウトを作ったことがあるとわかるかもしれませんが、 基本的に繰り返しパターンを持ったUIはどのフレームワークでもレンダリングの負荷を下げるためリストのアイテムを再利用して描画します。 Flutterでも同様にListViewではアイテムが再利用されます。 Read more

WebやAndorid, iOSでおなじみのApollo Client はFlutterに対応していません。 Flutterでは代わりに、graphql_flutterというApollo Clientをインスパイアしたライブラリがあるのでこれを使います。 Read more

Hierarchical Transitionとは Material Designの特徴でもある階層構造(Elevation)を意識した遷移方法で、 選択したオブジェクトが遷移元である低い階層から遷移先の高い階層へ移動することで、 現実の物質と同じ動きをすると同時に、画面の要素(タイトルの文字等)が次の画面に引き継がれることで より自然な操作体験を得ることが出来ます。 Read more