CODEWITHSUNDEEP
flutterdartreadability
pepeevich
pepeevich

Reputation: 333

Is there a way to avoid a nesting of Flutter widgets?

I am going to try Flutter, but all examples on GitHub I've found includes code with a high nesting level of widgets that is bad for readability. For example, this one: https://github.com/smartherd/Flutter-Demos/blob/master/lib/screens/note_list.dart

Can I somehow avoid it? Is there a better practice to improve my developer experience?

Upvotes: 0

Views: 1743

Answers (4)

Gábor
Gábor

Reputation: 10224

Sure. You simply lift out any deeper part of a tree like this and put it into a separate function. My code usually looks like this:

@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.only(top: 8),
    child: buildContent(),
  );
}

and then:

Widget buildContent() {
  return Column(
    children: [
      buildFirst(),
      buildSecond(),
      buildThird(),
    ],
  );
}

and so on. I'm quite willing to put a single widget or maybe two in a separate function and give it a meaningful name if it makes sense. Even though I'm working on a large monitor and I couldn't care less about harmful old habits like 80-character lines, I don't go deeper than three, maybe four levels at most without very strong reasons, and I don't recall having met any such reasons recently.

You don't always need indentation, either. For simple things like:

Expanded(child: buildList(context)),

I always keep them on one line. Also with short, simple widgets like:

return EmptyText(t.emptyData, icon: Icons.no_data);

Of course, with any more complicated and reused fragment, you probably want to put it into a custom widget on its own, anyway — just like this EmptyText above that's nothing really more than a Column with an icon and a centered text below. A simple stateless widget with a single build() function, that's all. But because I use it in several places and because it's much more convenient to refer to it with the single line above than to include the same Column again and again, it went into a widget of its own.

What I'm sure to avoid at all costs are nested ternary operators, especially when the branches are complex trees — I consider them the worst offenders against readability. I always lift the branches out into functions of their own and only refer to them:

return ifSomething ? buildOne() : buildAnother();

By the way, you can always resort to tricks like the nested package if you really need nesting but you don't want to go to the right.

Upvotes: 0

Sunil Choudhary
Sunil Choudhary

Reputation: 329

It is important to note that most of the places, we do some kind of nesting whether it is HTML, Android XML or so on. So manageable nesting is allowed in most of the places.

Though I have seen there are some unnecessary nesting done on your provided example.

For e.g.

 void updateListView() {

        final Future<Database> dbFuture = databaseHelper.initializeDatabase();
        dbFuture.then((database) {

            Future<List<Note>> noteListFuture = databaseHelper.getNoteList();
            noteListFuture.then((noteList) {
                setState(() {
                  this.noteList = noteList;
                  this.count = noteList.length;
                });
            });
        });
  }

Here we could have avoided the above nesting using await keyword something like below

void updateListView() {
    // I don't know why is it even there but if it is required then it should be done in
    // below way which is commented out
    // final Database database = await databaseHelper.initializeDatabase(); 
    List<Note> noteList = await databaseHelper.getNoteList();
    setState(() {
      this.noteList = noteList;
      this.count = noteList.length;
    });
}

And the above code should be properly linted to be readable lol

Upvotes: 1

Marcel Dz
Marcel Dz

Reputation: 2714

I think the most important thing working with flutter and having a nice development experience is to have a cristal clear structure. There are plenty structures you can follow, but the way flutter works is a lot of nesting. Me for example in bigger projects I'm following this concept:

- [folder] lib
    - [folder] models
    - [folder] apis
    - [folder] bloc (or any other state management / business logic pattern)
    - [folder] pages
        - [folder] page 1
        - [folder] page 2
        - [folder] page 3
            - pageview.dart
            - widget 1.dart
            - widget 2.dart
            - widget 3.dart
    - [folder] widgets (every widget which is used appwide)
    - main.dart

Im feeling comfortable with this. I have clea places for api, models, business logic, pages and since you can refactor your code and create widgets out of it, my pages are smaller than what you are seeing on your github example. I can also find widgets fast which are used on more than one place in my app.

Finding a good structure and create a lot widgets makes it easy to understand your code later on. I can ofcourse only talk for myself, for me its very comfortable.

Upvotes: 1

ehhc
ehhc

Reputation: 647

It is an important part of the declarative way flutter works. So no, IMHO, you cannot avoid nesting. And if you could, it would be a workaround, circumventing the basic concepts of flutter.. Just use flutter the way it's intended.. As i said: just my humble opinion

Upvotes: 0

Related Questions