“This is the 12th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

preface

This basically completes the modifications needed to implement the reader; Now we need to provide the current ListView index, gesture position and other information for the use of the item page (simulation page turning);

Train of thought

To make it less intrusive, I plan to store ChangeNotify by putting a PrimaryScrollController on top of ListView’s Scrollable; Since the widgets where the Item resides are in the Widget tree of the ListView, the of method can be used to obtain the required ChangeNotify data.

In this way, a SliverList that knows what it’s showing can also pass in some parentData currently owned by the child ata given moment. ParentData contains information such as index and scrollOffset, which is useful.

For Item, gestures can be easily triggered by means such as addListener(markNeedsLayout).

implementation

The simplest implementation is as follows:

Then rewrite the ListView build method:

How to use this is another part of it;

First of all, the gesture information provided here will be used only for simulation page-turning, so take simulation page-turning as an example:

(Please consciously ignore the blind test page, and only partial simulation page-turning effect, as well as the inexplicable Item displacement)

As can be seen, Item itself needs to be clipped, which involves the operation of canvas. CustomPaint is the natural control that comes to mind.

However, after studying, I found that CustomPaint only provides pre – and post-canvas operations;

DrawColor (color.red, blendmode.clear); drawColor(color.red, blendmode.clear); I don’t know if there are any other erasing methods), the original idea is to make the page transparent, but the final effect is not transparent, but black…

Finally, I found a solution on github Issue area:

Github.com/flutter/flu…

To do this, however, you need to customize CustomPaint; But it is also possible to automatically add markNeedPaint to the gesture as CustomPaint does;

The final rough version of the custom implementation:

There’s still a lot to be done. If you can fix the black problem, you might be able to avoid using saveLayer, which is not recommended.

conclusion

Since then, the required part of the novel reader has been implemented;

The next step might be to implement a novel reader through a custom ListView; Not only can you get rid of the restrictions of the Canvas part, but you can also have a free layout and use widgets that are already provided. In addition, the Item part can be separated to pay more attention to its own implementation, rather than canvas implementation, where one Canvas draws all the parts.