Away from the language, talking to the rapid development of students, I put the Flutter at the core of the business elements into three parts, respectively is the layout, interaction, and bridge, when we compare the pay attention to the combination of more details, your application will be more nuanced, before they are all throughout your study period;

layout


If there is such a classical layout, there are four layout models in Flutter. When we get such a page, how should we distribute it? Blue represents a Row, which is arranged horizontally. Each image has equal proportions of difficulty, so the red area represents a Container to draw the margins, and the overall blue area also has a vertical Column.


So let’s break down the nav layout again, a Row of four characters (yellow), a green Container containing the spacing between them, an orange text and an _ vertical arrangement, and a Column. We can think of it as a model of an elastic layout, and we can do it through these permutations, and we can do it in more detail; There is a rich set of widgets in Flutter that can be used in different combinations to achieve your desired layout. This is a way of layout design. In addition to elastic layout, there are absolute positioning layouts, such as:


A Stack is an absolute layout widget that can be superimposed on top of other widgets to do what you want. In fact, these widgets have many layout constraints, such as Center and so on. You can imagine that any function has an entry RUN, including Flutter. When we think of these elements as a tree, we can see that we have to think a lot more about how to code the tree when we draw the UI. Imagine that when we complete a transform, React describing the UI and eventually generating the UI hierarchy of a Flutter is not a problem either;

interaction

Almost all current designs for drawing UI interactions have data-driven logic. When the framework receives a change in data, it initiates a diff comparison and redraws the changed UI. A very simple example is as follows:


When you enter text in an Input field, its logic might look like this:

InputValue = "";
onChange(e){
  setState({
    InputValue: e.target.value
  });
}
Copy the code

This means, of course, that you need to consider the properties of your state when designing your app interactions. Changes to these properties trigger the updater of a Flutter to draw the UI. This process is very similar to the Diff and setState methods in React. Of course, most of the interaction is man-machine interaction, including events and gestures. The interesting design of this part is that most of the design needs to be integrated with stateful. When you listened to an onTap event for a layer, the UI was painted by state driver. GestureDetector is also a widget that we can use to complete gestures;

bridge

Any hybrid solution is basically cross-platform at the UI level, running multiple places at once, but when you need to accomplish specific features, such as: You still need to use Native methods to do this. The only difference is that communication design brings convenience to such interaction. Collectively, we call it Bridge.

{
  id: "xxx",
  module: "query"
  method: "findP",
  callbackId: "xxxxxxxx"
}
Copy the code

In general, you will design a communication protocol where module is the name of the module you define, method is the method you want to execute, callbackId is the ID of the interactive function that you have registered at the native level, and this ID is used to find the function in the final interaction. And submit the data to the UI level of mixed development. Flutter also designs a communication bridge that opens up the interface so that certain functions of Native can be implemented specifically. Most of the time, we only need to drop them.