The issue of

  • Build the Flutter Web site tutorial
  • Build the main page frame of Flutter Web
  • Jetpack for The Flutter Web site takes shape

Review of the previous period

Last time, we did simple subcontract processing, and then used SingleChildScrollView+GridView as the main framework to achieve the grid layout and sliding up and down effect. Chrome Web and native experience did not find any problems, but it can be found in the wechat Web browser can not slide at all. What’s the problem? We’ll find out.

The current content

This issue mainly solves the problem of not sliding smoothly in the App built-in browser

Search problem

To follow our question, search for the keywords including flutter Web Gridview inside SinglechildScrollView Scroll in Google as shown in the figure below

Look at the document

You are advised to use the official Chinese document as the main document. If you do not understand the official document, use the Chinese document to help you understand it. Because the official document is always updated, the Chinese document may be delayed due to maintenance. Without further ado, let me explain this to you. CustomScrollView is a container that handles slides. All of the child views implement Scrollable. If you use a GridView with slides, you can’t do that.

  • SliverList, linear list.
  • SliverFixedExtentList, and above are all part of the List, but the height is fixed.
  • SliverGrid, a list of grids
  • SliverPadding, add an inner margin to the child View
  • SliverAppBar, header view with AppBar
  • ScrollNotification and NotificationListener, which can be used to view the scroll position without using a ScrollController.
  • IndexedSemantics, which means to add an index to a child View that tells you where to scroll. Note: So far, the first child of CustomScrollView must be made up of the above components. There is also a SliverToBoxAdapter missing, which is also a special component for CustomScrollView. The constructor is a container that implements the CustomScrollView Scrollable, which is used as the first child View of the CustomScrollView. Now that we have a rough idea of what it is, let’s modify our original implementation.

The new implementation

Result of substitution

The result is still good, and it can slide smoothly in the App built-in Web. After learning this lesson, we should consider using CustomScrollView in the future when we encounter complex page layout and need unified sliding. Have you learned it? Forget SingleChildScrollView+ListView, GridView.

The source code

Please go to github code to see the full implementation

ToDo

This part of the content will be updated slowly, please don’t worry objectively, of course, you can participate in the private chat I oh.

  • The example section prepares the next implementation, jumps to the details page, and shows the use cases. Source code is complete click to jump to Github.
  • Tags will be implemented in the next phase, which also requires a new UI presentation. The function of Tags is similar to search, providing a faster way to find the desired function.
  • Message function design, there will be different suggestions in the process of your use, with this function can know your voice, so this is also a function we need to achieve.
  • Excellent project recommendations, there are many excellent projects waiting for us to discover, I alone have limited ability, if more people to recommend, will continue to enrich our Jetpack content.
  • Blogs, considering that there are a lot of great people who have written relevant technical blogs, help you find the best resources. The function design is as follows: add button.

The end of the

You are welcome to visit jetpack.net.cn and I hope you can help you on your way to learn Flutter.