The flutter pulls down and up the component wheels

What is a flutter?

Let’s start with Flutter, which most people probably haven’t heard of yet. Flutter is a cross-platform UI framework for mobile apps from Google, and React Native is for the same purpose. It supports three platforms :Android,Ios, and a new system from Google,I don’t know what it’s called… I have also used React Native a little, but I haven’t studied it thoroughly. Overall, the Flutter framework can perform as badly as React Native because it has no middle layer. Especially when loading giFs, the flutter was handled very well. Rn said that several giFs loaded in the interface froze and crashed… One of the great things about Flutter is that it is truly cross-platform. You use Material Design on IOS,and you use IOS style on Android. The interfaces on both platforms are almost identical. Finally, a few downsides: no JSX or XML, too many parentheses, bad code readability. The cost of learning is higher than RN, and its layout can be divided into N components, so it is not easy for you to understand the function of each layout.

Introduction to the

This is an open source pull-refresh + pull-up loading component. What? Now, if you look at this, you might be wondering, is this another pull-down refresh? No! If you search for the pull-down refresh component in the Flutter, it’s hard to have a reasonably good wheel. This component is in the external packaging, suitable for almost all containers, such as listView, gridView, Container, Text, ScrollView… And so on.

Why do I write this?

Because Flutter currently has too few components, I find it difficult to find a pull-down refresh component, many of which do not meet my needs, either lack of UI, or have low scalability and high limitations. So in order to write the project first step, you really can’t write the project without a good drop-down refresh component.

Boss asks for a GIF?

IOS:

How to do that?

In the beginning, I was actually going to use the Size of the animation provided by it to achieve the head and tail by changing the height, but in the middle OF the animation I found that this idea did not work, because the animation can only be scaled along the top coordinate, not the origin of the bottom coordinate. So the Revert went back. Later also thought a lot of animation, offset animation also tried, or fruitless. Finally, decided to use the method is to use the flash Size, but a little different here in fact, there are two parts in the head, one is the real head component, the head is a placeholder controls press to take the View, the placeholder View to match the Size of the animation can change the Size to make the head component inside the refresh status suspended a certain distance. This can achieve pull up and down, and the use of IOS elasticity is also quite hanging, in the external component package scalability is also very high. Block diagram:

feeling

In the process of implementation, there are many, many problems. First, Flutter does not allow you to get the height of subcomponents in the build method, just like React Native also, because your interface has not been rendered, there is no way to know the height inside, and there is no callback method for rendering completion. Like onCreate in Android, many people have raised this problem in its issue for at least 5 or 6 posts. Second, the scrolling listening method is somewhat imperfect in many ways. Third, layout controls are a little complicated. As you all know, there are five most common layouts on Android, right? Relative,Linear,Table… Wait, but do you know how many strains Flutter provides us? Row,Column,Center,Align,Flow,Container,Stack…. This is why the readability of flutter code is ridiculed, making it very expensive to learn.

The attached address

Github is from my blog