有没有办法避免 Flutter 小部件的嵌套？

Question

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?

Answer 1

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.

Answer 2

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 eg

 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

Answer 3

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