In recent years, mobile terminal cross-platform development solutions emerge one after another, from Facebook’s open source ReactNative to Alibaba’s follow-up WEEX, front-end technology has played a big role in mobile terminal cross-platform development. As an Android developer, the author has experienced continuous learning from Reactjs to Vuejs. In 2018, our star is Flutter, an open-source mobile cross-platform solution from Google that allows you to quickly develop beautiful mobile apps. I was fortunate to get acquainted with Flutter in March 2018. After a short period of study, I developed an open source Chinese client App based on Flutter (source code: Code Cloud, GitHub). Since the Google IO conference held in May 2018, Flutter has become more and more popular among developers, and more and more people have participated in the development of Flutter. Therefore, I came up with the idea to blog about the process of developing an open source Chinese client based on The Flutter. I hope to learn from you and make progress together!

The index The article
👉 1 Write an open Source Chinese Client based on Flutter from 0 (1)

Flutter build | nuggets technical essay introduction and development environment
2 Write an open Source Chinese Client based on Flutter from 0 (2)

Dart Grammar Basics
3 Write an open Source Chinese Client based on Flutter from 0 (3)

Introduction to Flutter & Common Widgets
4 Write an open Source Chinese Client based on Flutter from 0 (4)

Foundation of Flutter layout
5 Write an open Source Chinese Client based on Flutter from 0 (5)

Set up the overall layout framework of the App
6 Write an open Source Chinese Client based on Flutter from 0 (6)

Implementation of various static pages
7 Write an open Source Chinese Client based on Flutter from 0 (7)

App network requests and data stores
8 Write an open Source Chinese Client based on Flutter from 0 (8)

Use of plug-ins

Introduction of Flutter

What is the Flutter

Here’s a description of Flutter on the Website:

The Flutter is Google’s mobile UI framework for quickly building high quality native user interfaces on iOS and Android. Flutter works with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.

The characteristics of Flutter

Rapid development of

Millisecond hot reload, your application interface will be updated immediately after modification. Build native interfaces in minutes with rich, fully customizable widgets.

The hot overload of Flutter helps you test quickly, build uIs, add functionality, and fix bugs faster. It can be reloaded in sub-seconds on iOS and Android emulators or real machines without losing state.

If you’re an Android developer, debugging your Android App is a very tedious process when you’re first developing your Android App. It’s often time consuming to repackage and run your App after you change a little bit of styling somewhere. The Instant Run feature was later introduced in AndroidStudio, allowing you to quickly preview modified code on the real machine or emulator. Today we’re doing Flutter development, so you don’t have to worry about that. The HotReload feature makes debugging your app much easier. Save (which needs to be set in AS) or click the Flutter Hot Reload button for a quick preview of the new interface.

Expressive and flexible UI

Quickly release features that focus on native experiences. The layered architecture allows you to fully customize, enabling incredibly fast rendering and expressive, flexible design.

Give your users a whole new experience with the beautiful Material Design and Cupertino (iOS style) widgets built into the Flutter, rich Motion API, smooth and natural sliding effects and platform awareness.

If you’re a ReactNative or WEEX developer, you know that when you’re building an App UI, you have to write a lot of styles to get a nice user interface. But Flutter has a lot of nice components that let you go through a few short pieces of code, You can create a nice UI.

The original performance

Flutter contains a number of core widgets such as scrolling, navigation, ICONS, and fonts that can achieve the same performance as native apps on iOS and Android.

Make your application powerful and easy to use with platform-specific apis, third-party SDKS, and native code. Flutter allows you to reuse existing Java, Swift, or ObjC code to access native system functionality and system SDKS on iOS and Android.

Unlike Web apps or Hybrid apps, the mobile App developed with Flutter is a completely native App with a smooth experience comparable to that of a native App.

Construction of the Flutter development environment

The tutorials on building a development environment have been written in detail on the Website, but I hope that by adding some pictures, you will be able to build a development environment more easily. If you want to do your job well, you must use your tools first. Let’s start building a development environment.

Build the Flutter development environment on MacOS

1. Clone the Flutter code

Clone the code for Flutter using the following command:

git clone -b beta https://github.com/flutter/flutter.git
Copy the code

If your network environment is not very good, please use the tools on the Internet, science, or use the code provided by the cloud image, will the https://github.com/flutter/flutter.git code instead of cloud above address: https://gitee.com/mirrors/Flutter

2. Add the bin directory of the Flutter code to the system environment variables

Enter the user directory in the terminal:

cd ~
Copy the code

Open the.bash_profile file with the following command:

open .bash_profile
Copy the code

If the file doesn’t exist, use touch to create the file and open it:

touch .bash_profile
open .bash_profile
Copy the code

After opening the.bash_profile file, add the following lines:

export PATH=${PATH}:/Users/xxx/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

The first line above:

export PATH=${PATH}:/Users/xxx/flutter/bin:$PATH
Copy the code

It is important to change /Users/ XXX /flutter to your own local flutter directory

The second and third lines were added for the normal use of the flutter related commands in the country, as detailed here

After changing the. Bash_profile, save and close the file, and then run the following command for the configuration to take effect:

source .bash_profile
Copy the code

To test whether the CONFIGURATION of the FLUTTER environment variable has been successful, enter the FLUTTER command in the terminal and press Enter. If there is a message indicating the usage of the FLUTTER command, the configuration of the FLUTTER environment variable has been successful, as shown in the figure below:

3. Use the Flutter Doctor command to install additional dependencies

The Flutter Doctor command is used to check whether the flutter dependencies are properly installed, such as Android SDK, Xcode, etc. The output of my machine after running the Flutter Doctor is as follows:

4. Configure your AndroidStudio and install the add-ons

Once you’ve done the above 3 steps, you’ll also need to configure your AndroidStudio. Since the main language Flutter is developed is Dart (see my second blog post for the basic syntax of Dart), you’ll also need to add plugins to AndroidStudio that support Dart.

Open your AndroidStudio by using Command +, the shortcut key, or clicking AndroidStudio -> Preferences in the upper left corner… Menu, open the Settings screen of AndroidStudio, find the Plugins option on the left, and type dart and flutter to find and install the Plugins, as shown below:

Uninstall
Install
Install

After installing the plugin, you need to configure the DartSDK path. In the Settings dialog box above, find Languages & Frameworks -> Dart, and fill in the DartSDK path. This path is the /bin/cache/ dart-SDK directory in the directory where we originally cloned our Flutter code, as shown below:

Configure the development environment on Windows and Linux

Configuring the development environment on Windows and Linux is similar to configuring the Mac with clone code, configuring environment variables, running the Flutter Doctor, and configuring the IDE.

  • Build the Flutter development environment on Windows
  • Set up a development environment on Linux

reference

  • Flutter website
  • Because Chinese website

My open source project

  1. Google Flutter based on the open source Chinese client, hope you give a Star support, source code:
  • GitHub
  • Yards cloud

  1. Tetris based on the Flutter small game, I hope you give a Star support, source:
  • GitHub
  • Yards cloud

In the previous The next article
Open source Chinese client based on Google Flutter

Support for Android and iOS essay | the nuggets technology		 Write an open Source Chinese Client based on Flutter from 0 (2)

— Dart Syntax Basics

From 0 to 1: my Flutter technology practice | the nuggets essay, the campaign is underway