Stand at the front view of entry Flutter

The author

SugarTurboS team member — Tomey

preface

As a front-end development engineer working for many years, the author has experienced the technological changes of Flutter from the earliest Web App, Hybrid App, React Native and now to cross platform technology.

Just in the last three months, due to the business needs of the company, the author has completed the development of three APPS for Flutter. I personally feel that Flutter is an excellent cross-end technology. Therefore, I would like to share with you how to get into Flutter from the front end.

The birth of cross-platform technology

With the rise of smart phones, the demand for mobile App development is everywhere, and Internet companies are emerging in endlessly.

However, the mainstream smart phone system is divided into Android and iOS. Therefore, to develop an App, you need to develop two sets of code.

Some companies, driven by competition, want to develop faster and more cheaply, instead of just one code for Android and one code for iOS.

At the same time, other technology fields and companies are trying to get their hands on the pie, and cross-platform technologies are starting to take root.

History of cross-end technology

After years of development of cross-platform technology, there are many technical frameworks derived from it. Many have fallen by the wayside and become stepping stones to cross-platform technology before I even get to learn them. Representative frameworks with cross-platform technology milestones, such as:

Web App

Web App refers to a Web application developed using HTML+CSS+JS and running on a standard browser, which is equivalent to packaging the browser as App.

In 2014, with the completion of the standard specification of HTML5, there is a momentum of Web App replacing Native App on the Internet. However, the gap between Web App and Native App is that it can never compete with Native App. Main issues:

• The comparison of Native performance is low, especially in the early smartphones, the performance is mediocre, and the operation experience is not good.
• No offline function, high requirements on the network, poor optimization will load slowly and consume traffic.

The above two points are only problems affecting user experience. However, the biggest problem of WebApp compared with Native is that many functions cannot be realized because it runs in the browser sandbox and cannot call the Native API.

In order to solve the problem that Web apps cannot call native apis, Hybrid apps are launched in the industry.

Hybrid App

Hybrid App refers to the adoption of Web+Native for mixed technology development. UI interface is developed by Web technology, and Native only needs to provide the ability to call Native API through Web.

Although Hybrid App has high development efficiency and can be cross-platform, Hybrid rendering still has the same set as Web, and the experience is not as good as native. Hybrid App is a good choice for teams that need quick trial and error and rapid market penetration. After the team stabilizes in the later stage, it is better to make native apps with better experience or use other cross-platform technologies with better experience.

Hybrid Apps are typical technology frameworks such as PhoneGap, Cordova, Ionic, etc.

React Native was born in 2015 to solve the rendering performance problems of Hybrid apps.

React Native

React Native is a derivative of Facebook’s early open source Web UI framework React on the Native mobile application platform. The underlying layer encapsulates the Native code of Android and iOS platforms and can be written using JavaScript.

React Native communicates with the Native framework via Bridge. All JavaScript code runs in the Chrome V8 engine and communicates with Native code via WebSocket.

Because the React Native UI uses Native for rendering, the rendering performance is basically close to Native. However, in scenes that consume performance, such as animation, scrolling and long lists, there is still a certain gap between performance and Native.

React Native is different from Web HTML+CSS+JS development mode to some extent, and the learning threshold is high.

Flutter

Flutter is Google’s mobile UI framework that can quickly build high-quality Native user interfaces on Android and iOS, with performance comparable to Native. Flutter is another “true cross-end rendering technology” in addition to Web apps.

Cross-platform rendering technology

Why is Flutter “true cross-end rendering technology”? The author compares the current popular cross-end frame rendering technology architecture, as shown in the figure below:

As can be seen from the figure, React Native and Weex both use Native components for rendering, while Web App and Flutter have their own rendering engines.

The author makes a correlation matrix comparison of cross-platform technologies, as follows:

As you can see, taken together, Web Apps are an excellent cross-platform technology, but they are limited by their poor rendering performance. On top of that, Flutter scores well, and many of the cross-platform rendering problems that Flutter has been criticized for have been solved.

What does a Flutter look like in the front view?

Take a look at the picture below. The likes on the left and the negatives on the right.

As you can see, the only downside of Flutter is that it does not share the Web technology ecosystem at all. For Web front-end developers, there is a bit of resistance to throwing away Web technology and learning a whole new technology. Just like when the micro channel small program launched, did not use HTML5 standards, by the majority of developers ridicule. As a developer, I wanted to ask the author: “Why doesn’t Flutter use TypeScript as the development language and JSX as the template language?”

First Flutter

Here is a screenshot from the Website of Flutter:

From the figure above, the author can find key information about the description of Flutter:

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

Has the following features:

• Rapid development of
• Expressive and flexible UI
• The original performance

Flutter frame construction

The structure of the Flutter frame is shown below. On the left is the official structure of the Flutter frame and on the right is the author’s basic explanation of the structure.

As can be seen from the figure above, Flutter provides a complete set of UI development kit at the Framework layer. At the bottom of the Framework, Flutter implements a unified cross-platform rendering UI based on Skia standard image processing library.

Flutter with the Web

Having said a lot of nonsense, it is time to get back to the main topic — “Entry to Flutter from the front view”. Speaking of the front-end perspective, what are the similarities and differences between Flutter development and Web development?

The following is a comparison of the author’s personal use

Next, I will introduce the similarities and differences between Flutter development and Web development.

Hello World began

Next, the author uses both Web technology and Flutter technology to print “Hello World” on the page.

Web native implementation

The implementation is very simple, an HTML div tag to fix, the code is as follows:

<div>Hello World</div>
Copy the code

The React to realize

Relative to Web native, will write some more code, the code is as follows:

import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.PureComponent {
  render() {
    return <div>Hello World</div>;
  }
}

ReactDOM.render(<HelloWorld />.document.getElementById('app'));
Copy the code

Flutter implementation

Compared with the Web, it will write more code, the code is as follows:

import 'package:flutter/cupertino.dart';

class HelloWordWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello World'); }}void main() => runApp(HelloWordWidget());
Copy the code

Code implementation steps:

1. Create the HelloWordWidget class first (Flutter everything is a Widget).
2. The HelloWordWidget class render function build renders “Hello World” using the Flutter native Widget Text.
3. The Flutter start entry function main mounts the HelloWordWidget.

conclusion

The implementation of Flutter, for those of you who have used React development, will feel very similar to the structure of Flutter and React code. Both use components as core units and develop their UIs as building blocks.

The React Component concept is Component, and the corresponding Component concept of Flutter is Widget. Both are designed for Component reuse. The former maintains state internally, while the latter is a stateless component for pure rendering, which will be described later. This is not expanded here.

Hello World sets the font color red

For Web developers, the first thing that comes to mind when setting font colors is CSS. How does Flutter set font colors? Let’s find out.

Web native implementation

Method 1:

<div style="color: red;">Hello World</div>
Copy the code

Method 2:

<style>
.c-red { color: red; }
</style>
<div class="c-red">Hello World</div>
Copy the code

The React to realize

// index.css
.c-red { color: red; }
// -------------------------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class HelloWorld extends React.PureComponent {
  render() {
    return <div className="c-red">Hello World</div>;
  }
}
ReactDOM.render(<HelloWorld />.document.getElementById('app'));
Copy the code

Flutter implementation

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HelloWordWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello World', style: TextStyle( color: Colors.red, ), ); }}void main() => runApp(HelloWordWidget());
Copy the code

conclusion

Everything in Flutter is a Widget, including the description of component styles, such as positioning, layout, dimensions, margins, borders, backgrounds, colors, shadows, text, transformations, animations, and so on.

The number of widgets officially provided by Flutter is very large. The author did not find the number of widgets officially provided by Flutter by looking up relevant information. The initial estimate is between 300 and 400. Reading the documentation and learning to use all the widgets that Flutter officially provides is the biggest cost of learning Flutter.

The author first developed Flutter application for various UI implementation effects. The authors refer to their Web development experience, the relevant implementation of Google Flutter, and the widget documentation to achieve the final effect.

Hello World Click to switch font colors red and black

React and Flutter have two types of components, stateless and stateful. In the above cases, I used stateless components. I will use stateful components to fulfill the requirements in this section.

The React to realize

React implements Hello World text by clicking to switch font colors.

1. The component needs a variable isRed that has the current font color state
2. Change the current font color state variable isRed through setState by clicking on the event
3. Retrigger component render.

// index.css
.c-red { color: red; }
.c-black { color: black; }
// -------------------------------------------------
import React from "react";
import ReactDOM from "react-dom";
class HelloWorld extends React.PureComponent {
  state = { isRed: false };

  onClickHandle() {
    this.setState({ isRed:!this.state.isRed });
  }

  render() {
    return (
      <div
        style={{ color: this.state.isRed ? "red" : "black"}}onClick={()= > this.onClickHandle()}>
        Hello World
      </div>
    );
  }
}
ReactDOM.render(<HelloWorld />.document.getElementById('app'));
Copy the code

Flutter implementation

Flutter is implemented similarly to React, but HelloWordWidget inherits from StatefulWidget instead of StatelessWidget.

1. The component needs a variable isRed that has the current font color state
2. Change the current font color state variable isRed through setState by clicking on the event
3. Retrigger the component render build.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HelloWordWidget extends StatefulWidget {
  @override
  _HelloWordStateWidget createState() => _HelloWordStateWidget();
}

class _HelloWordStateWidget extends State<HelloWordWidget> {
  bool _isRed = false;

  void_onClickHandle(TapDownDetails tapDownDetails) { setState(() { _isRed = ! _isRed; }); }@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _onClickHandle,
      child: Text(
        'Hello World', style: TextStyle( color: _isRed ? Colors.red : Colors.black, ), ), ); }}void main() => runApp(HelloWordWidget());
Copy the code

conclusion

Flutter and React use stateful components in the same way. For an introduction to StatelessWidgets and StatefulWidgets, see the article by my friend in the front end group

The React PureComponent calls setState itself or its parent, and the render function does not fire if the state has not changed.

A build function will also trigger a Flutter if setState is not changed by itself or its parent component. Therefore, it is not recommended to write non-widget execution logic into the build function.

React and Flutter stateful component life cycles

Infringement statement: the following materials from the network pictures, if there is infringement, please contact the author to delete.

React lifecycle

Flutter life cycle

conclusion

In the figure above, the React and Flutter life cycles are compared. The overall process is basically the same, with three components.

1. Component initialization
2. Internal state changes setState, parent component state changes setState trigger the component rerendering process.
3. Component uninstall

However, the React lifecycle update process is much more detailed and the Flutter lifecycle is much simpler.

Component state management library

When it comes to React development, we have to mention the global component state management library. For those of you who have developed React, you should be aware that the lack of a global component state management library makes cross-component state transfer a pain in the ass.

Flutter development also has component state management libraries to choose from, as shown below:

The author uses Flutter_bloc in development. The author will not explain the usage here. If readers develop Flutter application, they can choose the appropriate component state management library according to the situation of the team.

The last

This is basically the end of the article. The above is the author’s summary of the first three months of sinking Flutter, hoping to be of help and inspiration to students preparing to develop sinking Flutter.

Finally, in view of the questions raised by the community about “whether Flutter is worth learning by students of front-end development”, the author also talks about his personal views and feelings.

The author has also thought about this question, I think technology is for business services, to answer the above questions, first think about the following three questions.

1. What is the value of Flutter to the business?
2. Does Flutter have enough advantages over other existing cross-platform technologies?
3. Does it accord with the direction of its current technological growth?

The value of cross-platform technology: At the beginning of the article, it was mentioned that the biggest problem solved by cross-platform technology is efficiency. In today’s fierce competition on the Internet, efficiency can not only reduce costs, but also control the market initiative and rapid trial and error. So there will always be a need for cross-platform technologies.

Advantages of Flutter mobile cross-platform technology: In the development history of cross-platform technology, the author can see that the earliest mobile cross-platform technology Web App develops to Hybrid App, which basically solves the problem of moving to cross-platform technology. However, the follow-up development has been to solve the gap between cross-platform technology and Native performance, performance response to user experience, which users can not tolerate, but also product managers can not tolerate. The fact that the Flutter is comparable to Native performance should be of concern to me.

Whether Flutter is in line with its current technological development direction: This is also a question that the author has been thinking about for a long time. Flutter is indeed completely unrelated to the Web front-end ecology at present, and it is completely different from the development direction. But for me, the growth of technology can’t be limited to specific development languages and tools. More attention should be paid to the growth of soft skills, such as business plan design ability, engineering ability, etc., which are common in the big front-end field, whether the development of Web or Flutter, can grow.