Flutter que

This article mainly introduces the whole frame of Flutter, which is simple and rough to use.

Dart, wrote a calculator demo and a list pull-down refresh request demo, basically getting started with flutter,

The source code is available at the end of the article.

directory

  • I. About Flutter
  • Ii. General interpretation of code
  • Mixed development
  • conclusion

I. About Flutter

###1 introduction to Flutter

Flutter is a cross-platform mobile UI framework developed using the Dart language. With its own rendering engine, Flutter provides high performance, high fidelity for Android and IOS development, and a mobile SDK that provides responsive views without the need for JavaScript Bridges. This is where React Native differs from React Native in that it uses Dart’s programming language to avoid performance issues caused by JavaScript Bridges,

Development language: Dart

  1. Dart has the JIT&AOT dual compilation execution. In this way, JIt can be used for hot reload development in the development stage to improve the efficiency of research and development. Aot is also used in the final release to convert the DART code directly into instruction set code for the target platform. Simple and efficient, maximizes performance and minimizes package size. Currently, flutter preview2.0 has been updated to further reduce package size.
  2. Dart has specific GC optimizations for frequent creation of destruction widgets in FLUTTER. The performance impact of gc is minimized by generational, lockless garbage collectors.
  3. Dart language is java-like in syntax, easy to learn and easy to use, for our native development to learn JS, DART language is more acceptable. (Personal feeling)

The advantages of the DART language are detailed

Dart Language Chinese community – basic syntax introduction

2. Environment configuration

Chinese Configuration Tutorial

3. Flutter features — several reasons why you might choose flutter

  1. Hot loading: One of the coolest features of Flutter allows you to update your project in real time, just like updating a web page.
  2. UI style is elegant: THE UI is written entirely in code, not XML. (components) and has the rich (Material Design | Cupertino) components, implementation to keep Android and IOS shows the effect of a uniform style, Android can also be displayed in the style of the IOS; (Thematically) Different themes on Android/iOS provide apis that directly identify different types and then display different UIs
  3. Components are small enough: ONE of the core principles in Flutter is that the combination takes precedence over every basic component that inherits it, so that a variety of components can be created by self-assembly
  4. ** support is very strong: ** third-party libraries are being added, the Flutter development community is really large and very active, the domestic idle fish has launched a version, and as the leader of Flutter, keeps stepping in the front of the hole;

4. Fly in the ointment

  1. Compared to RN in terms of performance and limitations, it can be more than a match, but for hot updates online, there is no indication that it will work unless the AOT compilation of dart is put in the client, which is obviously not realistic. Although, Apple father has been banned app hot update code attitude firmly and clearly; It’s hard to judge
  2. On the code: too many parentheses, various nesting, code looks very unfriendly; But after understanding its usage, the whole page is divided into a small module independent, readable I feel ok;
  3. After all, Flutter was born shortly after RN. Currently, the community and open source aspects of Flutter are not as perfect as RN.

5, flutter, widget

As can be seen from the above figure:

Dart is used to implement the Framework, including Material Design style Widgets,Cupertino style Widgets (for iOS), basic text/image/button Widgets, rendering, animation, gestures, and more. The core code of this part is: Flutter package under the flutter repository, IO, Async, UI and other packages under the Sky_engine repository (DART: UI library provides the interface between the Flutter framework and the engine).

Engine is implemented in C++, including Skia,Dart, and Text. Skia is an open source two-dimensional graphics library; Provides a common API for a variety of hardware and software platforms. Dart includes :Dart Runtime, Garbage Collection(GC); Minikin libtxt library (for font selection, line separation)

Although we don’t know much about it yet, it’s not hard to see that widgets are the layer of development that we can relate to. The core design idea of Flutter is that Everything’s a Widget is Everything. In the world of Flutter, the concepts of views,view controllers,layouts, and more are all based on widgets. Widgets are abstract descriptions of flutter functionality. So the foundation for mastering Flutter is to learn to use widgets first.

Basic components, layouts, interactions, etc. that are expanded by widgets;

Ii. General interpretation of code

1, as usual — Hello World

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),),),); }}Copy the code

A layout is built out of nested Widgets, the core Widget is the MaterialApp, which is the whole application, and then we have that Scaffold, which is the layout structure of our main interface. Then there’s the AppBar (like the Android Toolbar) and some Containers as the body, and inside the body we can place our Layout components — Texts, Buttons, etc.

2, layout,

1. Layout unpacking:

This is a simple calculator page. It is clear that the whole layout is arranged vertically by Colunm, and the Row in Item is arranged horizontally. The concept of horizontal and vertical constraints is reflected in the Flutter layout, which is also based on this.

CrossAxisAlignment An auxiliary axis constraint (vertical Y-axis). To be clear, Flutter does not have the same relative layout as Android, but can use its existing controls to achieve all the required layout constraints.

** joke: ** just learned this layout, not familiar with the constraint method, layout is very headache, just like according to the grid line to discharge different items, bit by bit to move, but hot overload, change a line of code can see the effect

Bookmark a wave of controls for various constraint layouts: SizedOverflowBox, OverflowBox, LimitedBox, FractionallySizedBox, SizedBox & ConstrainedBox, FittedBox, RotatedBox, etc.; Some controls are more unpopular need to slowly collect their own, have not used the basic do not know that there are such have helped you write good, can improve a lot of efficiency;

Extend] [button control (zhuanlan.zhihu.com/p/38500192 � “>,

2. State life cycle

Flutter, like RN, adopts a responsive view and maintains a state machine that updates only the changed minimal region interface. It has two classes of widght:

StatelessWidget (stateless) :UI display function, no interaction or UI changes, such as prompt;

StatefulWidget (stateful) : UI changes and user interactions during application execution;

The life cycle of State has four states:

  • Created: The state. initState method is called when a State object is created;
  • The initialized: when the State object is created, but not yet ready to build, the State. The didChangeDependencies at this time is called;
  • Ready: When the State object is ready to build and state.dispose is not called;
  • Defunct: state. dispose cannot be constructed after it is called.

So when you call setState, you update the view, you change the data or the UI needs to change, you update the data source in setState, and then the layout is rebuilt with the new data source,

3. Asynchronous — Network requests

Common async await Future collocations

GetData () async {// Async keyword states that there is code inside the function that needs to be deferredreturnawait http.get(URL); The //await keyword declares the operation to be delayed, and thenreturnOperation result}Copy the code

In this case, if you execute:

  String data = getData();
Copy the code

I’ll just report an error

Because data is a String, the function getData() is an asynchronous operation that returns the result of an await delayed execution. In Dart, an operation with an await token results in a Future object. The Future is not a String, so an error is reported

It can be implemented like this:

getData().then(data){
   String _data = data;
}
Copy the code

The then method is called after the asynchronous execution of getData(), and is executed in sequence with the statements following the Future

Mixed development

For our current public or branch projects, it is not possible to port the entire project into Flutter, which is obviously not practical. If it is a new small project, I think it can be a new attempt and a new technical atmosphere. It can also be derived from or contact with other fields, which is conducive to enhancing the team atmosphere.

Of course, there is another attempt: just like RN before, some independent module functions are developed by FLUTTER. These independent modules are introduced into our project in a form similar to SDK, and the outbound interface is opened to Native call.

Problem: the Flutter directory contains Native project directories (ios and Android directories). By default, a Native project that introduces a Flutter cannot be built and run independently of its parent directory, because it relies on the libraries and resources associated with Flutter in reverse

Xianyu project mixed development and transformation practice

conclusion

Dart is similar to Kotlin in function thinking. Kotlin has all the features in Dart, but the only feature is that Dart compiles faster. Facing the idea of objects, and Java is the same, I learn it is not very difficult. For writing code, the slot is his code style, too many parentheses, after each component, ending with “, “, which is slightly better formatting;

Flutter officials boast that it is revolutionary, and with some truth. But I think RN is a better choice for people familiar with Web development. However, for mobile developers who are purely native developers, it is better to learn About Flutter directly. Flutter is also more suitable for those who are native developers. Flutter is still in beta, however, and now idle fish are leading the way. As Google’s own son, I believe that Flutter will not have the same bumpy road as RN

Official resources

1. Website of Flutter

2. Quick start to Flutter

3. Flutter — API documentation

4, making

5. Google+ Forums

6, Twitter,

7, Gitter

8. Flutter Technology Weekly Review

Demo of the project: flutter_demo: drop-down request refresh | calculator