Suppose we want to draw the following page similar to wechat chat list pageYour code might look something like thisThe list above doesListView Container Padding Expanded Column Divider RowComponents such as Components build the entire widget tree by passing in parameters to the constructor. The code above is probably the worst case scenario. As a qualified programmer at least to the above code method extraction, so that the overall structure looks more clear. So your code might look something like thisThe code now looks relatively clean, and it’s something we often use in development. But it doesn’t seem to solve the problem of hierarchy nesting because there’s not as much nesting as there should be, it’s just distributed in other places, it looks clearer.

To address this issue we built on dart after 2.5.0extensionFunction, for the aboveContainer Padding Expandedforextension 以 PaddingFor example, the code is as followsSo our original code could look something like thisOn top of that, we’re going to optimize and extract some code to make the hierarchy clearerIt can solve the problem of hierarchy nesting to a certain extent. The layout you would face in a real project would be more complex with a lot ofContainer Padding ExpandedAnd so on, so useextensionThis approach effectively eliminates a lot of unnecessary nesting.

Finally, I want to say, the heart is always more grinding more hard, grinding to the end of no feelings.