This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.


Before the basic structure of ListView, the operation of the analysis, probably “disassemble” ListView;

So the next thing to do as a kid, is to put it back together;

Of course, if you don’t adapt the components to your own ideas, how can you be called a bear child?

Bear child’s thoughts:

  • The first idea came from one of my previous practice projects — Flutter_novel (to be ashamed, it has not been updated for two years, and there are still people in Star; The refactoring that was promised is forgotten over and over again) :

    • In the original project, each page-turning effect was a separate custom View; Now want to rely on a View, by switching the configuration of the way to achieve unity;
    • According to the above design ideas, it is also required to provide gesture data, so as to realize the modification of individual page information according to gesture information;
  • Some people may have seen my previous Mid-Autumn Festival theme contribution, can say that its implementation is magic change ListView, now also want to transform the Item, custom path effect, can provide to ListView;

According to the requirements, analyze the implementation method:

  • If you want to support configuration to change different View sliding effects, after the analysis above, you can start in the following directions:

    • Modify ScrollController; Through the processing of gesture events, intercept and modify events for their own needs;
    • Modify the ViewPort; Modify the data in ViewPort to make the display window meet their requirements;
    • Modify SliverList; Make the final display content meet the requirements;
  • Provide gesture data. This can be done by inserting a ChangeNotifier into the ListView and storing this data in the setCanDrag method of Scrollable. Item retrieves the ChangeNotifier through the of method and listens for processing data.

  • Support for the ListView’s own custom paths and Item transformations was implemented in my previous article by modifying the SliverList. This does work, but be careful to rewrite the hitTest method to convert the hit result to the position of the transformed Item. This involves processing a bunch of renderObjects that were wrapped around the item before; Consider this time whether there is a better way;

General design ideas:

Referring to the design idea of Android RecyclerView, the concept of LayoutManager is introduced.

The LayoutManager, like the ListView’s childDelegate, is passed to the Element layer. The Element layer takes over the Paint, Layout, and hitTest methods of the RenderObject layer and passes them to the LayoutManager.

LayoutManager implements methods like Paint, Layout, and hitTest.

Which Element and RenderObject to pass this LayoutManger to is a case study for later;


This is the end of the kid assembly series, and now the kid assembly series