Why you should learn Flutter in 2020? The Latest Progress and Future of Mobile App Development.
Flutter lets you control every pixel on the screen, and its powerful compositing capabilities let you overlay and animate graphics, video, text and controls without limitation-Google
What is Flutter?
The Flutter Mobile App SDK is a new way to build fast, beautiful mobile apps that help developers get rid of the “cookie cutting” apps that used to be common. People who have tried and tried love it.
Flutter is an excellent cross-platform framework from Google that can be used to build applications for mobile, desktop, and web platforms. It was officially released in December 2018 and gained more visibility than React Native on GitHub and StackOverflow in less than a year. Behind all these heats are a good reason to learn this mobile app development framework, and this article explains why.
1. Flutter and its Rapid Growth.
I believe that developers who follow us are already familiar with Flutter: it is a multi-platform UI toolkit led by Google, and has entered version 1.12 at the recent I/O conference . Its advantages can be summarized in four aspects:
Beautiful
Flutter is beautiful. Flutter lets you control every pixel on the screen, and its powerful compositing capabilities let you overlay and animate graphics, video, text and controls without limitation
When Flutter builds applications, it allows developers to implement pixel-level control of the UI . This also means that the original design intent can be perfectly executed, thus faithfully conveying the brand personality to the user.
Fast
Flutter is superfast.
Flutter’s UI rendering performance is very Powerful. In a production environment, Flutter compiles code into machine code for execution, and takes full advantage of the GPU’s graphics acceleration capabilities, so mobile applications developed with Flutter can achieve UI rendering speeds of 60 frames per second even on low-profile phones.
The reason why Flutter is both “beautiful” and “fast” is in its architecture. The Flutter engine is written in C ++ and includes the efficient Skia 2D rendering engine, Dart runtime, and text rendering libraries. This engine enables the Flutter framework to draw UI components freely, flexibly, and efficiently. Application developers can use the Flutter framework to easily implement various design languages and animation effects.
Efficient
For developers, developing applications with Flutter is very efficient . Flutter’s critically acclaimed Hot Reload feature enables code-to-UI updates in less than a second, making development cycles significantly shorter. In addition, hot reloading can preserve the current state of the application (ie Stateful) during execution. For example, you may modify a subpage in a navigation structure. The hot reloading of reserved state can save you from having to restart all the way Click back to this subpage and see the results immediately after the code modification is complete.
Open-Source
Flutter is open-source.
Flutter is open and it is a completely open source project. Developers around the world can use and extend Flutter’s source code for free, and contribute to the ecology and documentation of Flutter. We have seen many developers active in the community and have made a solid contribution to Flutter.
Flutter Development
In StackOverflow’s 2019 Global Developer Questionnaire, Flutter was selected as one of the most popular frameworks for developers, surpassing TensorFlow and Node.js.
Many familiar brands around the world have adopted Flutter, including many well-known domestic companies. For example, Alibaba has a number of mobile applications that have launched Flutter versions .
Developers from multiple companies have submitted Pull Requests to the Flutter code base. In particular, a developer from Alibaba, in a week this February, he merged more PRs than any other member of the Flutter team. Flutter welcomes every developer to participate in Flutter’s development process in a variety of ways, including submitting issues and PRs on GitHub.
Flutter has proven its technology and development experience on mobile. Flutter is not just for for mobile apps. Flutter team has also opened the technology preview of Flutter for Web at the I/O conference last year. They have also begun experimental exploration on desktop and embedded systems. Their long-term goal is to make Flutter a great user experience on all screen-equipped devices-even large interactive installations full of ideas.
2. Multi-platform vision: Flutter for Web
One of the goals of Flutter for Web is to make it easy for developers to reuse mobile code. Many technical details about Flutter for Web , such as architecture design and choice of rendering mechanism, Flutter Team has introduced in detail in last year’s “ Hummingbird: Flutter in the Web” article, interested friends can read in-depth, the following is a brief introduction Some similarities and differences between Flutter on mobile and web:
Flutter’s technical implementation on the Web:
As shown in the figure above, on the mobile side, the C ++ engine is called by the upper-level framework in Flutter through the dart: ui library. Dart: ui This library is very low-level, it has no concept of UI components, and does not know the UI layout or animation. It only does one thing, which is to draw the picture object generated by the upper frame to the screen
Flutter for Web retains the code of the Flutter framework to maximize reuse of mobile and web code. But in order to be able to run Flutter programs in the browser, the Flutter SDK on the Web side replaced the C ++ Flutter engine on the mobile side with the Flutter Web engine. This Flutter Web engine provides an implementation of the dart: ui library on the Web platform. It does something similar to the mobile dart: ui-”draw” the picture objects generated by the Flutter upper-level framework onto the web page.
Specifically, the Flutter Web engine uses HTML and CSS to draw images first. This can take advantage of the browser’s own performance optimization mechanism, and you don’t have to worry about pixelation when zooming the page. Only in a few cases does the Flutter Web engine use Canvas to implement drawing. We are currently trying to use the CSS Paint API instead of Canvas drawing to improve performance. However, this API is relatively new and needs to be supported by major browsers.
But back to the upper-level logic, the advantages of code reuse began to emerge-the Flutter Web engine uses the Flutter framework consistent with mobile to build widgets and implement UI layout. In addition, we used the Dart2js compiler to convert the Dart language to JavaScript.
Positioning and usage scenarios of Flutter for Web
The first use case is to develop a web-side companion application for an existing mobile application using Flutter for Web. Many products are mobile-first, but in some scenarios, the mobile terminal has some limitations, such as the screen is too small and text input is troublesome. At this time, many manufacturers will develop a Web-side supporting application to use the input and output devices of the desktop computer to improve the interaction efficiency (such examples are many, for example, WeChat has a Web-side supporting application).
The second scenario is using Flutter for Web to leverage the interactive elements in an existing Flutter mobile project. The Flutter mobile app shown above is Google Ads. It has a lot of dynamic and interactive charts, which are more complicated to implement. With Flutter for Web, you can reuse these codes in Web applications. Similar interactive elements also include some small games and tool applications, such as calendars, car configuration wizards, and portfolio analysis tools.
Flutter for Web is highly consistent with the mobile terminal at the Widget level, so the code reuse is very good. The results of image rendering are also highly consistent. When developing and debugging, you can use Dart DevTools and support Hot Reload. Although there is still a lot of work to be done on the development experience, it is currently in a basically usable state.
Flutter for Web is almost ready to takeover web development industry
3. Ecological construction: a state management solution built with the community
Flutter uses a reactive programming model similar to React. The visual change of the UI at runtime is driven by the state of the application:
Where should this state be placed in the application, how to update and read, this is the problem of state management. Flutter Team has summarized the more mainstream state management methods and code packages on the official website . Developers can choose to use according to the specific needs of different applications:
https://flutter.dev/docs/development/data-and-backend/state-mgmt/options
However, for developers or beginners without complex requirements, Flutter Team also recommend one of the state management packages: provider. This state management solution was contributed by a member of the Flutter community.
Before the provider was released, the Google team actually made a state management package with a similar idea, called provide. But after comparing, I found that the package contributed by this community can solve the same problem and is easier to get started.
The working mechanism of package: provider
The following sample program contains three different pages: login, product list, and shopping cart. After the user adds some items to the product list, the amount in the shopping cart needs to be automatically updated. However, under the reactive programming model, the code in the product list page cannot directly modify the data in the shopping cart.
A basic idea to solve this problem is to put the data shared by the two pages at the top of the UI component tree. The Provider provides a mechanism to manage the application state shared by multiple nodes. This mechanism consists of three basic steps:
First, we define a CartModel that inherits from ChangeNotifier to read and write data from the shopping cart. ChangeNotifier is a simple class in the Flutter SDK. It can send notifications to listeners using the notifyListeners method. In this example, whenever an item is placed in the shopping cart, CartModel will notify its listener.
Then we need to use the ChangeNotifierProvider widget. It can return a specific type of ChangeNotifier and provide it to its widgets. In this example, we put ChangeNotifierProvider on the node above MyApp, so that both the list and shopping cart pages can read and write the data in the CartModel. We can use the Consumer class to get an instance of it when its state is needed.
Here we need to specify the type of data to be accessed. In this example, we use Consumer <CartModel> to specify access to the CartModel type. In the Consumer’s builder function, we can get an instance of CartModel and use it to update the total price to be displayed in the shopping cart.
4. Development Experience: “UI as Code”
Flutter Team always attached great importance to the development experience of Flutter, so they have made a series of attempts to improve the readability of Flutter UI code, including improvements to Dart syntax and improvements to IDE UI. These are collectively called UI as Code.
Flutter’s UI code uses the Dart language, which has the following advantages:
- Flutter’s declarative UI writing method can intuitively describe UI structure
- No need to learn extra syntax for UI layout
- No need to maintain UI definition files outside the code
But previous implementation method also has a few areas that are worth improving:
- Complex UI logic uses imperative syntax, breaking the consistency of code structure and UI visual structure
- It is not easy to understand the composition of the UI after multiple layers of nesting
Recently they have made some successful improvements, including new syntax elements optimized for UI programming in Dart 2, and Editor UI Guides in the IDE.
Improvements in Dart 2
In Dart 2, They added Control Flow Elements in Collections, which can use flow control elements such as if and for in the definition of collection data types. In addition, support for spread operator has been added.
Improvements in the IDE
For the IDEs that developers use every day, i hope that developers can see the structure of the UI at a glance without changing the code. The improvements flutter team has made in this regard are Editor UI Guides:
This feature is now enabled by default in the latest version of IntelliJ and Android Studio plugins, and needs to be enabled in the settings in VS Code.
So, “What’s new and exciting for Flutter?” “
If someone asks you about Flutter, now you know how to answer them:
- The benefits of reactive view without JavaScript Bridge
- Fast, smooth and predictable; Code compiles AOT into native (ARM) code
- Developers have complete control over widgets and layouts
- With beautiful, customizable widgets
- Excellent developer tool, amazing hot reload
- Higher performance, more compatibility, more fun
Have you noticed what I removed from this list? When people talk about Flutter, it’s usually the first thing people mention, but for me it’s one of the least interesting things about Flutter.
In fact, Flutter can build beautiful, fast applications from a single code base for multiple platforms. Of course, this should be a given! This is customizable and scalable, and it makes it easy to target Flutter to multiple platforms without giving up performance or power consumption.
