Nesting Flutter Widgets

Russian nesting dolls. Source

Widgets are the basic elementary units for Flutter. The UIs in Flutter are built out of widgets and the views rendered on the screen depend on the widgets used and how they are ordered. In fact there is a saying that, “Everything in Flutter is a Widget” and you learn this very fast once you start interacting with Flutter. Widgets include: text, buttons, containers etc. Read more about widgets here: https://docs.flutter.dev/development/ui/widgets-intro

// Basic hello world code in Flutter
import 'package:flutter/material.dart';
void main() {
  runApp(const HelloWorld());
}
class HelloWorld extends StatelessWidget {
  const HelloWorld({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Hello, World!"),
        ),
      ),
    );
  }
}

With that being said, widgets tend to get nested quite fast. Nesting — describes code that is organised in levels/layers where code that performs a given function is contained within another code that performs a broader function. Sort of like this:

Widget(
  child: AnotherWidget(
    child: AnotherOne(
      child: AndAgain(
        child: Leaf(),
          ... //insert more kids and siblings here lol
        )
      )
    )
)

One thing about nesting… nesting will have you looking for matched braces, brackets and parentheses from here to Timbuktu — something I have been struggling with. Reading deeply nested flutter code has been a bit of a nightmare for me. It’s hard to know where a child starts and where they end. It’s taking me a while to get the hang of it.

Reading on this, I actually found out that deeply nesting widgets in Flutter is highly recommended — which is the opposite of how Native Android did things. And here is why:

Flutter favours composition over inheritance. Most widgets exist for a single purpose only and are very lightweight. That means you need to nest widgets more deeply to achieve the same effects, but because their layout and rendering logic is easier, the rendering is typically faster.

Basically, nesting widgets deeply is recommended in Flutter. It’s quite the opposite to Android’s model: If there’s not much nesting, you probably did something wrong, because you have a huge widget that can often be split into simpler, faster, smaller widgets.

https://newbedev.com/is-it-bad-to-have-a-lot-of-nested-widgets-with-flutter

Nesting widgets is not a problem and is actually recommended. In fact, the default counter application contains no less than 150 widgets.
Widgets are lightweight objects optimised specifically to create and destroy tons of them every frame.

Rather than having each widget provide a large number of parameters, Flutter embraces composition. Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets. https://docs.flutter.dev/resources/faq#can-i-extend-and-customize-the-bundled-widgets

Necessary evil?

Thus, as it appears, nesting in Flutter is sort of a ‘necessary evil’. So how do we go about making this a bit bearable?

One thing I am learning, while reading deeply nested code, separate the widgets into smaller chunks. When you look at each widget as one chunk, you can be able to see the functionality it adds to the greater nested block. This way, the whole section becomes more readable since each chunk ‘makes sense’ on its own.

It’s still hit or miss while writing the code though. From a couple of articles, what I have seen being recommended on how to write Flutter code to reduce the nesting levels is to remove the widgets from the build method. Then, have the build method simply call these widgets which have been defined outside it. Thus, the nesting hierarchy on the build method improves. Not eliminated — just improved.

This awesome article dives deeper into this subject and it has an amazing working example which I have tried out for practice. I hope it helps you as it has helped me. Do check it out: https://romain-rastel.medium.com/everything-is-a-widget-but-dont-put-everything-in-a-widget-32f89b5c8bdb

If you know of any other resources that can help us Flutter newbies further understand this, please share!

Thank you for reading. ❤