profile

The Flutterpreneur

The Flutterpreneur #001: The right way to add widgets to children


Hey Reader,

Welcome 👋

This is the first edition of The Flutterpreneur, where I write fast & actionable Flutter & Firebase tips every Saturday.

Let's go.


Today I'll show you the right way to add widgets to children.

Sounds simple, but many devs mess it up as their codebase grows.

If your simple code isn't clean, your complex code will be a nightmare to maintain.

We'll cover:

  1. 6 ways to add a single widget
  2. 6 ways to add multiple widgets
  3. What not to do
  4. What clean code looks like

Let's dive in.

1. Adding Single Widget

Here are 6 ways to add a single widget to children:

Most options work fine for small widgets.

But as the code grows, move the logic outside the widget tree.

2. Adding Multiple Widgets

Here are 6 ways to add multiple widgets to the children param:

For small widgets use spread with tear-off (if no params needed).

As the code grows, use for loop. It's clean, readable, and easy to maintain and extend.

3. The Wrong Way

Here's an example of a messy structure:

It works. But it's a total mess.

Random conditions, deep nesting, no structure.

Hard to scan and maintain. And gets worse over time, as you add more widgets.

4. The Right Way

Here's how I'd clean this up:

Now this is clean.

Here's the breakdown:

  • Prepare data before the widget tree.
  • Null-check once, not every time.
  • Extract reusable widgets into their own files.
  • Use a for loop for better readability.

And Flutter auto-casts "user" to non-nullable after the first null check, so no extra "?" is needed inside. Nice.

Happy widget-adding,

-Milos

P.S.

Wondering what's "context.watchCurrentUser"?

It's an extension method from my Scalable Flutter App template.

v2 drops in July. Grab it early for $100 off, or try the free version.

The Flutterpreneur

Flutter & Firebase tips from Toptal Tech Lead and founder of $100K app. Join 2,237+ engineers

Share this page