【Flutter】AsyncValueを楽に扱う方法
RiverpodのAsyncValueを使うことで、開発者は非同期処理を簡単に管理できます。しかし、現状として開発者がAsyncValueの扱い方に悩んでしまったり、手を焼いてしまっているケースも少なくありません。 この記事では、AsyncValueの取り扱いをシンプルにする方法を紹介し、開発者がAsyncValueを使用する際に抱えてしまいがちな冗長性や複雑性を解消することを目指します。 AsyncValueを管理する共通Widgetを作る loadingとerrorの時に返すWidgetが大体同じ場合、それらをデフォルトで返すWidgetを用意して、AsyncValue.dataの時のWidgetのみを必要とする構造を持つWidgetを用意した方が楽に済みます。 他にもloadingからdataに移った時のフェードなど、状態管理と連動する細かい表示の設定も、この共通Widgetの内部に
【Flutter】Sliverの仕組みを理解する
Sliverを扱うのは、基本的にCustomScrollViewを使う時に限定されます。ゆえに「SliverはCustomScrollViewとセットで使われる」程度で説明されることも多いですが、実際のところListViewやGridView、PageViewも内部を見ればSliverで作られています。 Sliverの仕組みを深く理解することで、直接的なSliverの扱い方だけではなく、これらの汎用的なWidgetの扱い方も正確に把握できるようになると考えています。 今回の記事では、Sliverがどのように使われ、どのようにレイアウトを行なっているかを具体的に掘り下げ、その仕組みについて説明します。 Sliverとは この記事ではsliver protocolに基づいてレイアウトを行う、RenderObject、Element、Widgetの総称をSliverと呼びます。(公式にはハッキリ
Flutter Web + Firebase + Cloudinaryで動的OGPをササッと作る
個人で作っているアプリでユーザーのプロフィールをOGPで表示する際に、実践的なユースケースを含めた記事があれば楽に作れたなと思ったので共有させて頂きます。 最終的な成果物はこんな感じです デプロイ環境のセットアップ Flutter WebをFirebase Hostingでデプロイする際はこちらの記事で詳しく書かれているので参考にしてみてください。 Cloud Functionsについては公式ドキュメントの参照をお勧めします。(今回はCloud Functions第1世代、言語はTypescriptを使っています) Cloudinaryとは Cloudinaryは、画像やビデオを管理、変換、最適化、配信するためのサービスです。ストレージにアップロードした画像のurlに文字のパラメータなどを渡すとそれを元に動的に画像を生成してくれるので、OGPの画像を作る際にとても便利です。 全体の構成 図
【Flutter】Widget extensions vs Class constructorについてまとめてみた
英語圏のFlutter開発者の間で、Widget extensionsを使ってSwiftUIのmodifierのような書き方を再現する方が今のネストしていく方法より扱いやすいのではという話が挙がりました。 日本のエンジニアの方々がどう思うのかも気になったので、若干の私情を挟みつつ内容をサッとまとめてみました。 サンプルコードで説明 前提の説明はサンプルコードを見れば大体伝わると思います。 // いつもの書き方 class ClassConstructorPattern extends StatelessWidget { const ClassConstructorPattern({ super.key, }); @override Widget build(BuildContext context) { return Scaffold( body: Column( children: [
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
