【フレームワーク最適化11】 ▼まとめ ・ElementはWidgetより長寿命でRenderObjectを管理 ・RenderObjectはレイアウト・描画を担い不要更新をスキップ ・Element再利用で高コスト処理を回避 ・KeyはElement再利用条件に関わる #Flutter #個人開発

For sure, I meant when I have the need for a custom layout, I just reach for RenderObject directly

Am I being stupid #Flutter people? Can a RenderObject really not find out if it caused its child to overflow? I know that there is getMinIntrinsicX, but that throws as soon as there is a scrollable somewhere, even if the rest of the child could still overflow

Should already be possible! While there currently is no CustomPaninter in Nocterm, you can just use the RenderObject directly. Example from Nocterm3D: github.com/Norbert515/nocter…

Transform、FittedBox、Flow みたいな、レイアウト通りに描画しない系の widget はだいたい内部で context.pushTransform を使ってる感じか。（context は BuildContext ではなく RenderObject が使う PaintingContext）

Semantics の話、先ほどの自分の RenderObject の話の中で触れそびれてしまったけど、 @Kunodayo_oboete さんがとっても詳しく話してくれている。

なるほど、カスタムでRenderObjectを実装するには覚悟が必要なのか #FlutterKaigi

ちゅーやんさんのRenderObjectのお話30分セッションで聴くの初めてなので楽しみ #FlutterKaigi #RevenueCat_Hall

前夜祭、パネルディスカッションで好き勝手しゃべらせていただきましたー。明日の登壇も RenderObject とアニメーションについて話したいこと話させていただきます。 #FlutterKaigi

In my previous research, I worked on BuildOwner validation, and now @nank1ro is working on RenderObject. We haven't succeeded yet, but we see the possibility of implementation. Alternatively, we could submit some necessary feature requests to Flutter for this.

I think maybe yes, because the tree building phase (Both 3 tree: Widget, Element, RenderObject) is sequential so in exact point in time only one leaf is building at a time so signals can stash an effect on it when signals change that leaf will rerender

FlutterKaigi 2025セッション紹介🚀 RenderObject とは何か？animated_to に学ぶレイアウト計算と描画の仕組み ちゅーやん @chooyan_i18n fortee.jp/flutterkaigi-2025/… #FlutterKaigi #FlutterDev

You are not a Flutter engineer (yet). You're a widget operator. You learn just enough to make the screen look right. CI/CD? You don’t know how Gradle, Fastlane, or Xcode signing work—you just click “Start build” in Codemagic or paste a github_actions.yml. Rendering? You don’t understand Widget–Element–RenderObject–Skia/Impeller—you just throw Stack and Positioned until it lines up. State? You don’t model domains—you drop in a package (Bloc, Riverpod, GetX) and call it architecture. Networking? You don’t design contracts—you dio.get() some JSON and hope for the best. Concurrency? You don’t get the event loop or isolates—you dump heavy work into compute() and pray. Platform? You don’t know MethodChannel or FFI—you avoid anything beyond pure Dart. If you were tasked to build a complex widget with a custom RenderObject, implement performLayout/paint, handle intrinsics/baseline, and pass hit tests or semantics correctly—you wouldn’t be able to. If you were tasked to get p95 cold start under 900 ms on a mid-tier Android and prove it with a trace—you wouldn’t be able to. If you were tasked to write a custom fragment shader for a blur, bloom, or flow effect, bind uniforms and textures via FragmentProgram, and integrate it at 60 FPS—you wouldn’t be able to. If you were tasked to build an image/data pipeline with backpressure, isolate-based decoding, and tiered caches—you wouldn’t be able to. Because you don’t understand how the tools you use actually work—you just learned how to use them. That makes you dependent. On packages. On templates. On “architecture” threads. Read source—not to worship it, but to learn how things actually work and why. Understand the difference between event loop vs isolates, Skia vs Impeller, AOT vs JIT, declarative vs imperative navigation. Know what to pick, when, and why. When the job becomes “fix the engine/package”—a broken signing chain, shader-cache thrash, or DB bottleneck—without fundamentals, you’re stuck. And we’re back to: you’re just a widget operator. This is for devs who wear big labels but outsource understanding to frameworks. If your impact disappears without your favorite package or template, you’re just specialized labor. Be able to peel off abstractions, trace a bug to the root cause, make trade-offs under constraints, and carry the system where the docs run out. #flutter

Thanks @norbertkozsir — really love NOCTERM! 🌙 Also, huge thanks to @devangelslondon and the Flutter community channel for sharing insights on Flutter internals — that’s where I learned to build custom RenderObject components. 💙

Ever wondered what happens between runApp() and pixels glowing on your screen? 🤔 Join @Kymoraa who will guide you through Flutter’s rendering pipeline—Widget, Element & RenderObject trees—all the way to building smooth, performant UIs. Find out more about the session here: bit.ly/JMoraa Get your tickets today: bit.ly/dcKE2025Tickets

Oh, I'm already inside a custom RenderObject here! This is mostly about what wild emoji combinations support. You can combine emojis with a special character (if supported). If combined, it will render as a single emoji instead of two (which affects layout!)

How do Widgets become pixels in Flutter? First, Widgets are not UI. They are descriptions of what you want to see. These Widgets are translated into one of two types of Elements: 1. ComponentElement - manages the build cycle and hosts other elements 2. RenderObjectElement - ties the Widget to the RenderObject These RenderObjectElements are then translated into RenderObjects, which are the primary components responsible for painting the pixels. Most RenderObjects are based on the RenderBox, which creates a layout based on the Box-Constraint Model. (Slivers do it a little differently.) The entire display process is 3 steps: 1. Layout - where the RenderObject is located, and what size 2. Paint - "draw" the render object 3. Composition & Rasterization - using Skia or Impeller, take the instructions above and turn them into pixels. This entire process can sometimes be done up to 120 times per second (for 120Hz refresh rate displays). Modern technology is insane.

Today at 11:25 in Dart Den, I invite you all for my talk on using the RenderObject layer without writing render objects! There will be some theorerical background, all approaches available in Flutter and the abstraction we can use to skip boilerplate and make it easy #ftcon25eu

Friday, Sept. 26th: 🕙11:25 AM – 12:05 PM (40 min) at Dart Den 🎤 RenderObject layer advantages without writing any RenderObjects ⭐By @albert_wolszon 7/n

今月のベルリンに続き来月はソウルで開催の Flutter Alliance で登壇します！さらにその次の月には FlutterKaigi ということで、3ヶ月連続で animated_to と RenderObject の話をしていきます。興味ある方はどこかでぜひ。