Source code

JD Design Center: Flutter's first experience

I first met Flutter at the GMTC conference last month. Engineers from Google demonstrated how to use Flutter to build beautiful and high-performance mobile applications. I am very interested in some of these features, such as good developer experience and excellent cross platform capability. So I decided to experience it in person after the meeting.

In recent days, I have tried to use Flutter to realize the layout of the first screen of the ranking channels in JD APP, which is the simplest understanding of the development based on Flutter. I specially record it for other partners who want to know and try the Flutter framework.

First, let's see what kind of interface I have implemented:

 5b3c69d6N945ef921.gif

Next, let's talk about the development of Flutter from different aspects.

Establishment of Flutter development environment

Install Flutter

The installation process of different platforms is basically the same. Here we take macOS as an example. First, download the Flutter MacOS version and unzip it.

Add Flutter's bin directory to the system PATH:

 export PATH=~/Software/flutter/bin:$PATH

Tip: Remember to put this line of code in your shell startup script to avoid manual execution every time.

After adding the path, you can execute the flutter command. Flutter provides a flutter doctor command to help us install Flutter dependencies. It will check whether there is a local iOS and Android development environment. If a dependency loss is detected, it will also provide the corresponding dependency installation method. You just need to continue to execute this method, and then install the missing dependencies until all dependencies are installed.

Configure Code Editor

It mainly installs related plug-ins for IDE.

The VS Code only needs to install the flutter extension.

Flutter and dart plug-ins need to be installed on Android Studio.

Let's briefly talk about the differences between the two IDEs. In terms of development process, VS Code beats Android Studio completely. VS Code provides a very good code prompt function. The following figure is an example. Move the mouse over an object or method, and VS Code will give very detailed information.

 5b3c78e1N7c628c09.png

In Android Studio, perhaps the reason why the dart plug-in on Android Studio is not perfect is that the IDE can only provide me with a line of dry function signatures.

 5b3c7a50N4fd6ee0a.png

In the debugging phase, both IDEs provide perfect breakpoint debugging mechanisms. The difference is that Android Studio also provides a tool called Flutter Inspector. You can understand it as a review element of Flutter version.

 5b3c7cc8N62199182-1000x559.png

To sum up the above points, I currently use VS Code when writing code and debugging simple logic problems, and start Android Studio when encountering layout problems. The specific choice can be determined according to your personal preferences.

Configure dependent source image

The Flutter project has two dependent sources.

The first is the source of the Flutter framework itself. Whenever the Flutter framework is updated, we can update the latest Flutter framework code from the source.

In addition, because Flutter uses Dart As its development language. The packages of Dart language are unified in https://pub.dartlang.org/ Maintenance. This is the second dependency source.

These two sources are currently maintained by Google, and for well-known reasons, access to Google services from home is very unstable. Therefore, you need to configure the domestic images of these two sources:

 export PUB_HOSTED_URL= https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn

Tip: Remember to put these codes in your shell startup script to avoid manual execution every time.

Configure debugging equipment

Debugging equipment is divided into two categories: real machine or simulator. We will introduce them separately.

IOS Simulator

This item is the only one that does not require any configuration. Just follow the previous steps to install the dependency correctly. Starting debugging directly in the IDE will automatically start an iPhone X simulator.

Android Simulator

Android Studio does not have a device emulator by default and needs to be added manually.

  1. Start Android Studio

  2. Tools -> AVD Manager

  3. Click "Create Virtual Devices..."

  4. Select a mobile phone model (in fact, it is a combination of screen resolution and pixel density), and click "Next"

  5. Select and download an Android image. Click "Next"

  6. Click Finish to complete the creation of the virtual device.

IOS real machine

It needs to be configured on the computer side and mobile phone side respectively.

Computer side

Enter the project directory and execute the command:

 open ios/Runner.xcworkspace

In the pop-up Xcode interface, perform the following operations in sequence:

Note: The developer account mentioned here can be your personal Apple ID, not the official developer account purchased for $99.

 5b3cb9acN762614c1.png

 5b3cbaefNb8008602.png

Mobile terminal

After completing the configuration of the computer, use the data cable to connect the iOS device to the computer. If the pop-up box "Do you want to trust this PC?" pops up, select "Trust".

Then enter the setting interface of iOS, and enter "General" ->"Description File and Device Management". In this interface, you will see a developer application certificate named after your Apple ID. Select Trust.

So far, the real machine debugging of iOS has been completed.

Android real machine

Computer side

If it is a Windows system, please install Google USB Driver No special configuration is required for other operating systems.

Mobile terminal

  1. Turn on "Developer Mode" and "USB Debugging" options.

  2. Connect the phone to the computer through the data cable, and select "Yes" if prompted "Allow USB debugging".

So far, the Flutter development environment has been basically built.

Dart

Before talking about Flutter, let's talk about the development language of Flutter project—— Dart Dart is an object-oriented language developed by Google. It can also be compiled into JavaScript and has a type system. Many people may compare it with TypeScript, and the two are very similar. Here is a brief introduction.

TypeScript is a superset of JavaScript. This means that all JavaScript codes are legal TypeScript codes. TypeScript provides a static type checking system based on the original JavaScript syntax, which can help us effectively reduce code problems caused by type inconsistency. In addition, TypeScript must be compiled into JavaScript before it can be executed.

Dart itself has nothing to do with JavaScript except that it can be compiled into JavaScript. It is actually a completely independent language. In addition to compiling JavaScript to execute on the JavaScript engine, Dart can also compile ARM and x86 code to run directly on iOS and Android devices. Dart also supports JIT and AOT

Since it is a completely independent language and has nothing to do with JavaScript, please keep a clear idea during the learning process. Do not confuse similar concepts in the two languages, or they will easily cause problems.

The official article is recommended for learning resources A Tour of the Dart Language The most basic and commonly used syntax of Dart language is introduced. It is recommended to read it through at the beginning.

If you are not clear about a method of a class in the specific use process, you can go to Dart SDK The document station searches specific classes to view complete documents.

Finally, if you are wondering why Google chose a very unpopular Dart instead of the more popular JavaScript/TypeScript as the development language of the Flutter framework, it is strongly recommended that you read this article written by members of the Flutter team Why Flutter Uses Dart

Flutter

Finally, it's time to talk about the Flutter framework itself. In fact, only a few functions of the Flutter framework have been used in the development process of these two days. So here we just talk about the two points I think we need to understand most about Flutter.

Widget

All elements displayed on the page in Flutter are actually a widget. The entire APP/page corresponds to a top-level widget.

According to whether there is variable state inside the widget, it can be divided into StatelessWidget and StatefulWidget in Flutter.

As the name implies, StatelessWidget refers to a widget that has no mutable state. In other words, the status of this kind of widget is only determined by the parameters passed in when creating the widget. Once created, its status and display effect on the page will not change.

The Stateful Widget has variable states. When these states change, Flutter will re render the widget.

In the actual project development process, what we need to do is to develop different widgets according to the actual needs, and combine and nest these widgets to form a complete page. Before development, the first thing we need to do is to divide different functional modules according to the functions of the page, and subdivide these modules into many independent widgets. Then implement the logic one by one.

Layout, style

First of all, from a macro perspective, most of the layout and style concepts in Flutter actually follow the concepts in CSS. For example, in terms of layout, there are Row and Column widgets corresponding to the flex layout in CSS, which provide horizontal and vertical layout methods respectively. For another example, Stack Widgets provide a mechanism for stacking widgets, which is similar to the position: absolute; It's very similar.

Click here View all layout related widgets in Flutter.

Does the conceptual similarity make it easy for us to get started? Actually, it is not, because at the specific code level, there is still a big difference between adding styles to widgets in Flutter and adding styles to an HTML element. These differences are mainly reflected in the following two aspects:

  • Not all widgets can add arbitrary style attributes. For example, if you want to add a border to a paragraph of text. You must create a container and set this problem as the child of the container. Then set a BoxDecoration property for the Container, and set the specific border style in this property. As follows:

 Container( decoration: BoxDecoration( border: Border.all(color: Colors.red) ), child: new Text("My Awesome Border"), )
  • Because of Dart's object-oriented characteristics, basically all style attributes do not support writing in the form of strings, but must create instances of specific classes or use predefined constants in Flutter. Let's take another example:

 ListView.builder( scrollDirection: Axis.horizontal, padding: EdgeInsets.all(10.0), itemCount: subCategories.length, itemBuilder: (BuildContext context, int index) {   } )

In order to specify the rolling direction of the ListView, we use the Axis. horizontal constant predefined in Flutter. To represent the padding values in the four directions, we create an instance of the EdgeInsets class.

The above two aspects will cause some problems when we first use Flutter for development. Don't panic. It only takes a period of time to adapt, and then with the intelligent prompt function of the IDE, the development efficiency can be greatly improved.

These are some experiences and thoughts I have accumulated in the past few days when I tried to develop a complete page using Flutter framework. Welcome to learn and discuss with the kids who are interested in Flutter.

fabulous ( zero )

This article is written by Contributors Author, article address: https://blog.isoyu.com/archives/jingdongshejizhongxinflutter-chutiyan.html
use Knowledge Sharing Attribution 4.0 International License Agreement. Unless the reprint/source is indicated, they are all original or translated by this website. Please sign your name before reprinting. Last editing time: July 20, 2018 at 08:36 p.m

Popular articles

Post reply

[Required]

I am a human?

Please wait three seconds after submission to avoid unsubmission and repetition