1. Welcome to the Flutter gesture exploration

After the book “The Guide to Flutter Drawing – A Wonderful Book”, after less than half a year of spare time: from overall conception to code case implementation, from source code debugging to code word analysis, my second book “Flutter Gesture Exploration – Governing the World” is finally published.

2. You want to say what you said earlier

Gesture, drawing, animation and layout are the core of interface composition and interactive experience, and all visual display and interactive trigger are inseparable from these four. Flutter is an excellent cross-platform framework, but many people do not have a full understanding of it and only use it superficially. If the UI representation required is not supported by the built-in components, you can’t proceed, you have to find a third party library, and if you can’t find one, you stop there. It’s easy to get stuck: no drawing, no gestures, no animation, no layout.

Whether it’s Flutter, iOS, Android, Dart, Swift, Koltin, frameworks and languages are tools. As a tool, it must be subject to human beings, so that the value of its performance will vary according to the ability of the user. For example, knife, knife because of different types and different functions, can cut wood, can cut vegetables, can untie cattle, can carve flowers. However, no matter what kind of knife, it can not be separated from the category of tools, and the ultimate purpose of tools is to expand people’s ability, is to solve problems. At this time, people must play a subjective initiative, the difference in experience and skills will make the same knife in solving the problem of the pros and cons of the difference.

You can never delve too deeply into a tool if it’s going to stay with you, or if it’s going to be your job, because that’s what we do. One actor, three minutes on stage, ten years off stage. It is an actor’s duty to speak fluent lines, overcome the difficulties of acting, and study various forms of expression. If it’s superficial, it’s no different than a streaming star. Since this is what we do, our natural role is not just a user, the knowledge and understanding of the tool is the most basic ability of the tool user.

Thinking is a very important process, which is our unique ability as human beings. The more we think, the deeper we get. Human experience is condensed through thinking in the process of continuous exploration and attempts. After solving a problem completely, when encountering similar problems, they will have their own prediction, analyze the feasibility of the problem, and preliminarily formulate a solution. One’s own experience is valuable, and the experience of others must belong to others. That’s why I don’t like it when people ask questions under the pretext of “just getting started”. Independent thinking always comes first in learning or solving problems. Asking for advice must be based on your own sufficient thinking and cognition of the problem, and negotiating with others in a manner of discussion, which is also the least respect for others. It is not the crass practice of asking questions and seeking answers.

3. The value of gestures

For applications in devices, gestures are important for maneuverability. Think about it, if the interface doesn’t respond to gestures, it’s hard to interact with the user. Just as a door without a keyhole or a computer without a keyboard cannot be used, gesture response is a prerequisite for an interactive application. Of course, there are many other scenarios that can trigger events besides gesture events, such as mouse events, keyboard events, voice events, etc., but the focus of this book is on finger events.

In an interface, gestures exist more or less in the clicking of a button and the selection of check boxes, as well as the control of whiteboard drawing and the scrolling of viewport. The interface provides the user with the possibility of action through event response. The vast majority of these actions are triggered by gesture contact, whether it’s clicking, double-clicking, long-pressing, dragging, or two-finger zooming, two-finger rotating, or sliding. Its root is to respond to the user touch point, triggering the relevant logic processing. Gestures in general are very important. They are to applications what electricity is to television. Without electricity, television would be useless.

Half of the value a tool can generate comes from the tool itself, which opens up the possibility of functionality; And half of it comes from the people who use it. The gesture response of Flutter is mainly the callback provided by GestureDetector, which gives the user the possibility to process the event. Tools are very fair, they are the same for everyone, but what they can do depends entirely on the person using the tool. In fact, beyond the limitations of Flutter, as long as we find the appropriate tools, no matter Android or Web platform, our abilities can be put into full play. Knives may be different, but as long as the master carver finds a knife, his experience and skills can be put to use. To the vast majority of programmers, languages and frameworks are just tools, and they are equal to everyone. Our experience and techniques are the cognition and thoughts accumulated in solving problems, and the elegant demeanour and realm witnessed in reading codes.

4. Overview of volume content – Usage layer

The overall structure of this book is very simple, mainly around two topics: the use of gesture callbacks and gesture related source code exploration. Chapters 1 through 6 cover several interesting examples of how various gesture callbacks can be used.

  • Vertical drag gestureIn:Chapter 3Will be realized along with the vertical gestureDrag and dropwhilescalingSpring, let go to restore the original long display effect. Is a great example of a gesture-based experience.

  • Click on the relevant gestureIn:Chapter 4An interesting case will be presented about the click event. For example, add a gray stamp when pressing below; Turns blue when lifted; After pressing, if the movement occurs, the contact cancel event will be triggered to remove the pressed stamp. How to maintain the interface data and render it according to the callbacks of contact points is a relatively comprehensive ability.

After the gesture adds the stamp, we will step by step implement the following tic-tac-toe case, including the logic of winning and losing pieces. This case is more comprehensive and can exercise your grasp of data and logic. It gives you a better sense of how gestures change the data, and how the data determines the presentation.

  • Drag and drop gestureIn:Chapter 5, will complete the whiteboard drawing effect. By pressing and lifting the list of maintenance lines, you can draw the whiteboard as the gesture moves. Below, color and line width options are supported for a better experience.

  • Long press gesture: this whiteboard is improved step by step, from point collection optimization, to curve fitting, to color, line width selection, and finally to long drag, every step is very clear, you can follow this book, step by step, little by little.

  • Transform gestures: In Chapter 6, we begin with the following scaling, rotation, and translation operations based on scale-related callbacks.

    The zoom rotating translation

Finally, based on the previous palette and the zoom gesture, we will create the following infinite palette that can be transformed. The reason it’s infinite is that you can drag, zoom, rotate and move the canvas anywhere you want to draw it.

5. Overview of volume content – source layer

If you are familiar with these cases, you are already familiar with the use of the Flutter gesture. Of course, this book does not stop there. I will try to analyze the source code of the whole Flutter gesture system, including exploring the source code of gesture related components, gesture detector family and gesture racing.

Looking at the source code for yourself is a pain, and most people don’t have the patience or ability to dig deep. For the Flutter gesture system, I have experienced the pain and now it makes more sense to share my knowledge. If read the source itself is sailing in the night, then the experience of those who have come is a beacon. The scientific system of the formation of human cognition of the world is just like this, which is inherited, evolved, overthrown and sublimated from generation to generation.

Source code analysis is divided into three stages:

  • 【 1 】Chapter 7 ~ 8introduceGestureDetectorThe component andRawGestureDetectorComponent source code implementation, and from the source code derived gesture recognizerGestureRecognizerTo advance the plot.
  • 【 2 】Chapter 9 ~ 10Is investigatedGestureRecognizer 及Gestures of competitiveAspect of the source code overview, as a reserve of knowledge, convenient after debugging analysis. These two are suitable for rereading after you have finished the book.
  • [3]Chapters 11 to 15Is combined with source code debugging analysis of the core content of gesture competition, mainly analyzes the click and double click two gesture detector workflow, inChapter 13, the competition between double click and click gesture detector debugging is analyzed through a simple cartoon scenario. Such a scenario, like the one below, makes it easier for us to visualize the entire competitive process.Chapter 15To explore theListenerComponent triggers the source of events that can give us insight into FlutterRenderObjectThe click test has a perception of how the contact events in Flutter are distributed,ListenerAnd how the component responds.

The end of the 6.

Why write this little volume

  • Most people just stay on the rightGestureDetectorBasic event response. Through this book, I will be combined with interesting cases, source code debugging, drawing analysis and other ways, so that we onFlutter gesture systemHave a deeper understanding.
  • There is no systematic introduction at presentFlutter gesturesI hope to share my exploration and harvest with you through this volume.
  • A little deeper into the source code of the article, send ordinary article total feelingAlmost alone, attention is relatively low, written in a small volume is more convenient for overall dissemination.
  • Pricing as usual,3.5Yuan, earn some money to buy drinks, eat and add a chicken leg ~

An apology

Perhaps some friends do not like to be lectured from a higher position, here I apologize. Here I just share my thinking and cognition, which is not absolutely right or wrong. It is very important for you to reserve your own views and express your own independent thinking. The last sentence: due to the limitations of pure manual code words and cognition, if there are any mistakes, questions, wrong words or suggestions for modification in the content of this book, you can correct them in the comment area, or directly contact me to discuss ~

Finally, a close-up of the booklet:

END ~ @ Zhang Fengjietele May 13, 2021