FlutterNinjas 2024 の登壇報告と改善点
先日 2024/6/12 ~ 14 の日程で FlutterNinjas というイベントが開催されまして、自分はスピーカーとして参加してきました。 FlutterNinjas ははじめての日本発海外向けの Flutter イベントで、Flutter大学の kboy さんを中心としたメンバーで運営されました。運営メンバーのみなさま、ありがとうございます！ 自分も今年の目標が「もっと海外向けのアウトプットを増やしたい、そして海外のプロジェクトでも働いてみたい」だったので、渡りに船ということでいつも通り（持ちネタがこれしかないので）Flutter の内部実装的な内容でプロポーザルを出したところ採択していただけました。 イベントには Remi さんもゲストで参加され、GDE(Google Developer Expert) の方々も何名か参加され、ドイツの Fluttercon をはじめ韓国や台湾
【Flutter】内側から理解する crop_your_image パッケージ
2021/5/11 に最初のバージョン 0.0.1 を公開してからかれこれ 3 年近くが経過し、ようやく 2024/2/11 に stable 版として 1.0.0 が公開できましたので、改めて crop_your_image の紹介をできればと思います。 紹介記事は以前にも書いているので重複する部分もあるかもしれませんが、この記事では パッケージの使い方とその特徴 パッケージを開発して得られたこと パッケージのこれから について書いていきたいと思います。 crop_your_image を使おうと検討している、使っていてもっと使いこなしたい、という方だけでなく、パッケージ作り自体に興味のある方にとっても有用な記事になることを目指して書こうと思いますので、ぜひ読んでみてください。 パッケージの使い方 まずは crop_your_image がどのようなパッケージなのかを見ていきたいと思いま
【Flutter】380+ LIKES のパッケージを開発するために実践したこと
Flutter の画像切り抜きパッケージ crop_your_image を開発・公開しています。 2021年3月に最初のバージョンを公開してからかれこれ約3年、気がついたら LIKES の数も 380 を達成し（2024.02.09現在）、画像切り抜きパッケージとしてもかなり上の方まで上がってこれたようです。使ってくださっている方、ありがとうございます！ この記事では、そんな crop_your_image パッケージを開発する上で気をつけたこと、気をつけていることをまとめてみようと思います。 Flutter の Widget らしい、使いやすい設計にする さっそく1つ目ですが、これが開発をスタートする上で一番気をつけたことです。 Flutter の特徴のひとつに Everything is a Widget というものがありますが、これは単に全ての要素を Widget として扱うとうこ
【Flutter】 setState() とは何か
この記事は Flutter #3 アドベントカレンダー 2020 - Qiita 8 日目の記事です。 Flutter でアプリ開発をする上で StatefulWidget の setState() を使ったことが無い、という方はおそらくいないでしょう。StatefulWidget の「状態」を管理する State に対して、その状態が変化したことを教えて画面の再描画を依頼するアレです。 Flutter のチュートリアルでも真っ先に出てくる、誰もが知っているこの State.setState ですが、この記事では Flutter のソースコードを読みながら具体的に Element ツリー上で何が起きて画面が更新されているのかを見ていきたいと思います。 これが何の役に立つのかと言われると微妙なところですが、例えば「setState() って細かく何度も呼んじゃって良いの？」のような疑問がもし
【Flutter】Navigator.of(context) から理解する 3つのツリー
この記事は Flutter #2 アドベントカレンダー 2020 - Qiita 3 日目の記事です。 この記事は、 Flutter アプリ開発で頻繁に利用する Navigator.of(context) の実装を読みながら、Flutter を理解する上でとても重要な「3つのツリー」についての理解を深める記事です。 ターゲット この記事は、以下のような方が読むことを想定しています。 Widget を使って簡単なアプリを作ることができるようになった方。 Widget は知っているけど、 Element とか RenderObject とか言われてもよくわからない方。 Navigator.of(context) ってよく書くけど実際アレ何なんだろう？という方。 逆に、Flutter の公式ドキュメントやソースコードをすでに読んでいて、Flutter のレイアウトの仕組みについてある程度の知識が
「内側」から理解する Flutter 入門
モバイルアプリ開発の選択肢の1つとして大きな人気を得ている Flutter フレームワーク、みなさんはその「内側」を理解して使いこなしているでしょうか？ この本では、Flutter が UI を作り上げるための中心的な役割を担っている「Element ツリー」に着目しながら、多くの入門書では触れられない Flutter の内側を研究します。 "Everything is a Widget" の考え方にもある通り、たしかに Flutter は Widget の使い方さえ知っていればある程度のアプリ開発が可能な、素晴らしい API デザインの上に構築されたフレームワークです。 しかし、そのフレームワークの内側を理解することは、Flutter の公式ドキュメントから得られる情報の理解をさらに素早く正確なものにし、アプリの規模が大きくなってもバグなく重くならないアプリを実現するためにとても重要です
Riverpod の AsyncValue をその構造から理解する
Flutter の Riverpod パッケージには AsyncValue というクラスが用意されています。 これは、state の生成に非同期な処理を伴う場合に Widget 側（もしくは別の Provider）に渡されるオブジェクトで、 その処理が現在どのような状態なのか を細かく保持している作りになっています。 例えば @riverpod Future<List<Articles>> fetchArticles() async { // 記事一覧をデータベースから取得する処理 return await request(); } という、List<Article> 型の記事一覧データをデータベースから取得するための Provider があった場合、Widget 側でこの Provider を ref.watch(fetchArticlesProvider) すると class Arti
【Flutter】ref.watch してる state がなぜか破棄されたので調べてみる
Riverpod を使っていて、 ref.watch していたはずの state が気づいたら破棄されていた という事象を ashdik さんから伺いまして、その事象と理由が Riverpod を理解する上で重要そうと思ったためこの記事にまとめていきたいと思います。 実際の仕事の中で問題を発見してこう解決した、という話までを ashdik さんに教えていただきつつ、そこから深掘りして内部的にどうなっているから破棄されてしまうのか、一般化して Riverpod 利用時に気をつけるべきところはあるか、という点を書いています。 Riverpod の autoDispose を安全に活用するのに役立てばということで、以下本文です。 発生した事象 まずは発生した事象を最小限で再現させたコードがこちらです。 /// カウンターの数値を管理する provider @riverpod class Coun
状態管理を構成する 3 つの要素とそれらが解決したい状態管理の課題
Flutter の UI は、状態 を定義し、それを build() メソッドで参照しながら「宣言的」に構築される設計になっています。 そしてその 状態をどのように参照し、どのように状態の変更を検知してリビルドするか という課題をひとことで 状態管理 と言い、その状態管理の手法にはさまざまな（覚えきれないくらいの）選択肢があることはご存じの通りかと思います。 ひとつひとつを独立した手法ととらえて理解しようとするととても難しく感じてしまいますが、それぞれの状態管理手法を眺めていると、だいたい大きく分けて以下の 3 つの要素で成り立っているように思えます。[1] ステート: 状態を保持するオブジェクト メンテナ: ステートを生成、変更するオブジェクト プロバイダ: ステートへアクセスする手段や変更を通知するオブジェクト この記事では、具体例として Riverpod パッケージを見ながらこの 3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
