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