Introduction of Flutter

Flutter is a mobile cross-platform (Android and iOS) development framework developed by Google using the Dart language. Unlike React Native, the Flutter framework is not strictly a Native application development framework. Flutter aims to create high performance, high stability, high frame rate, and low latency applications for Android and iOS. And the resulting apps have the same experience as native apps on different platforms.

Flutter includes a functional-reactive framework, a 2D rendering engine, a ready-to-use Widget library, and various development tools. These components work together to help developers design, develop, test, and debug applications.

Widget

Widgets are a fundamental part of every Flutter application. Each Widget is a fundamental element of the user interface. Unlike other frameworks that define views, controllers, layouts and other resources separately, Flutter has a consistent and unique object model: widgets.

A Widget does the following:

  • A structural element (such as a button or menu)
  • The style of an element (such as font or color)
  • Specify layout properties (such as padding)
  • It can also contain some business logic
  • And so on and so forth

Widgets are composed to form a unique page hierarchy, with each Widget embedded in the parent Widget and inheriting properties from the parent Widget. Also, the Widget does not have a separate “application” object; the root Widget is equivalent to the Application.

Layout/Style

First, on a macro level, most of the concepts of Flutter layout and style still follow those of CSS. For example, in terms of layout, Row and Column widgets correspond to flex layout in CSS, providing horizontal and vertical layout modes respectively. Stack widgets, for example, provide a mechanism for stacking widgets on top of each other, which is similar to position: Absolute in CSS. Very like.

View all the layout related widgets in Flutter: Flutter. IO /widgets/lay…

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

1. 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 the question to the child of the Container. Then give the Container a BoxDecoration property and set the specific border style in that property. Such as:

Container(
  decoration:BoxDecoration(
    border:Border.all(color:Colors.red)
),
  child:newText("My Awesome Border"),Copy the code

####2, Flutter style properties no longer support writing as strings. Due to Dart’s object-oriented nature, almost all style attributes are no longer supported to be written as strings. Instead, you must create instances of specific classes or use predefined constants in Flutter. Such as:

ListView. Builder (scrollDirection: Axis horizontal, padding: EdgeInsets. All (10.0), itemCount: subCategories. The length, itemBuilder:(BuildContext context,int index){ } )Copy the code

To specify the scrolling direction of the ListView, we use the Axis. Horizontal constant defined in the Flutter. To represent the padding values in the four directions, we create an instance of the EdgeInsets class.

Composition over Inheritance

Widgets are often composed to build complex UIs. For example, the commonly used Container Widget consists of several widgets that are responsible for layout, drawing, layout, and sizing.

Specifically, a Container consists of LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox, and Transform. If you want to customize a Container to implement a custom effect, you can use a combination of simple widgets instead of using inheritance.

Layered architecture

The Flutter framework has several layers, each of which depends on the layer beneath it. Its architecture is shown as follows:

These layers provide many options for building applications. Building an application in a custom way can use all the functionality of the framework, or controls in the Widget layer can be used to achieve UI effects. You can use the widgets provided by Flutter directly or customize them. If the upper implementation doesn’t meet your requirements, you can customize the widgets directly using the lower-level functionality.

How the Flutter framework differs from other mobile development frameworks

The difference between native apps

The Flutter application runs in an engine written in C++. The Flutter application can be seen as a game App. The code runs in the engine. For Android applications, the Flutter framework implements a FlutterView inherited from the SurfaceView in the engine. The USER sees the UI in this SurfaceView. If you want to interact with native platform features, you can use FlutterView in your Activity and send and receive messages with the native platform via the message API provided by Flutter.

How it differs from React Native apps

React Native has the following major differences:

  • The programming language used is different. Flutter uses Google’s own new Dart language, which can incorporate many of the features of other successful programming languages, making it more expressive and more efficient to code, while React Native uses JavaScript.
  • React Native compiles applications to run as Native controls, which will suffer performance losses during conversion, and some platform features may not be cross-platform.

The first Release Preview 1 of Flutter is now available. This marks Google’s entry into the final phase of Flutter before its 1.0 Release. It is believed that Flutter will become more and more widely used in the near future.

Build up Flutter development environment

“To do a good job, one must sharpen his tools first.” Learning any language and technology needs to start from the environment construction. Learning Flutter starts from the environment construction. The best way to build an environment is to refer to the documentation on the official website: FlutterChina.club /get-started…

System requirements

To install and run Flutter, your development environment must meet the following minimum requirements:

  • Operating system: macOS (64-bit)
  • Disk space: 700 MB (not including Xcode or Android Studio disk space)
  • Tools: Flutter relies on command line tools such as bash, mkdir, rm, git, curl, unzip, which, etc

Access to Flutter the SDK

To get a Flutter, clone a Flutter using git, and then add the Flutter tool to your user path. Run Flutter Doctor to display any remaining dependencies you may need to install.

Clone Flutter

If you are installing A Flutter on this machine for the first time, clone the source of the Flutter branch and add the Flutter tool to your system’s environment variables. Such as:

git clone -b beta https://github.com/flutter/flutter.git
exportPUB_HOSTED_URL=https://pub.flutter-io.cn // This parameter is required for domestic usersexportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // Set this parameter for domestic usersexport PATH=`pwd`/flutter/bin:$PATH 
Copy the code

Here PWD /flutter/bin:$PATH can be used to clone the flutter source PATH just now, as in

/Users/xiangzhihong/Flutter/flutter/bin:$PATH
Copy the code

Note: For details on how to configure environment variables on a MAC, please consult relevant information.

Run the flutter doctor

Run the following command to see if additional dependencies need to be installed and will be prompted if they are missing.

flutter doctor
Copy the code

After running this command, the system will check device dependencies, as shown in the following figure:

Android toolchain - develop forAndroid devices, the Android SDK at/Users/obiwan/Library/Android SDK ✗ Android SDK is missingcommandline tools; Download from https://goo.gl/XxQghQ, the Try re - installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions.
Copy the code

If the xcode or Android Studio version is too low, or there is no ANDROID_HOME environment variable, please follow the prompt. Here is a copy of the MAC environment variable configuration:

exportPATH = / Users/username/Documents/flutter, flutter/bin:$PATH
export ANDROID_HOME="/Users/ usernames /Documents/android_sdk"// Android SDK directory, replace with your ownexport PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

The first time a flutter command (such as a flutter Doctor) is run, it downloads its own dependencies and compiles them. Once you have installed any missing dependencies, run the “flutter doctor” command again to verify that you have the flutter doctor set up correctly and finally have all defects resolved, as shown below:

Updating environment variables

You can only update the PATH variable of the current session on the command line, as shown in Clone Flutter repo. However, you may need to update this variable permanently so that you can run the FLUTTER command in any terminal session.

The steps to permanently modify this variable for all terminal sessions are computer system-specific. Typically, you add commands to set environment variables to the file you execute when you open a new window. Such as:

  1. Determine the directory of your Flutter SDK that you will use in Step 3.
  2. Open (or create) the $HOME/.bash_profile. file path and file name may be different on your machine.
  3. Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to the path of the Git repo that cloned Flutter.
exportPUB_HOSTED_URL=https://pub.flutter-io.cn // This parameter is required for domestic usersexportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // Set this parameter for domestic usersexport PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
Copy the code

Note: PATH_TO_FLUTTER_GIT_DIRECTORY is the path of your flutter, such as “~/document/code”.

  1. Run source $HOME/.bash_profile to refresh the current terminal window.

Note: if you are using ZSH, ~/.bash_profile will not be loaded when the terminal starts. The solution is to modify ~/.zshrc and add: source ~/.bash_profile 2. Verify that the folder is already in the PATH by running the flutter/bin command. Command as follows:

flutter/bin
Copy the code

MacOS supports Flutter application development for iOS and Android. Now complete at least one of the two platform setup steps to be able to build and run your first Flutter application.

IOS Settings

Install Xcode

To develop Flutter applications for iOS, you need Xcode 7.2 or higher:

  • Install Xcode 7.2 or later, which can be installed via APP Stroe.
  • Configuring Xcode command line tools to use the newly installed Xcode version sudo Xcode – select – switch/Applications/Xcode. The app/Contents/Developer for most situations, This is the correct path when you want to use the latest version of Xcode. If you need to use a different version, specify the corresponding path.
  • Ensure that the Xcode license agreement is agreed by opening Xcode once or by command sudo xcodebuild-license.

Setting up the iOS Emulator

To prepare to run and test your Flutter application on the iOS emulator, follow these steps:

1. On a Mac, find the emulator through Spotlight or use the following command:

open -a Simulator
Copy the code

2. Make sure your emulator is using a 64-bit device (iPhone 5S or later) by checking the Settings in the Emulator Hardware > Devices menu.

3. Depending on the screen size of your development machine, a simulated HD iOS device may cause your screen to overflow. Set the device Scale in the emulator under Window> Scale.

4. Run Flutter Run to start your application.

Install to aN iOS device

To install your Flutter application on your iOS device, you need some additional tools and an Apple account. You also need to set up the Flutter application in Xcode.

1. Install Homebrew (skip this step if you already have brew installed). 2. Open the terminal and run these commands to install the tools used to install the Flutter application onto an iOS device.

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
Copy the code

If any of these commands fail and an error occurs, run Brew Doctor and follow the instructions to resolve the problem.

Follow the Xcode signing process to configure your project.

A, open the default Xcode workspace in your Flutter project directory by opening ios/Runner. Xcworkspace. B, in Xcode, select the Runner project on the left side of the navigation panel. C, on the Runner Target Settings page, make sure your development team is selected under General > Signature > Teams. When you select a team, Xcode creates and downloads development certificates, registers your account with your device, and creates and downloads configuration files (if required). Such as:

The Android Settings

Install the Android Studio

To develop Flutter applications for Android, you can use Mac, Windows, or Linux (64-bit) machines.

Flutter requires Android Studio to be installed and configured as follows:

  1. Download and install Android Studio.
  2. Start Android Studio, and then execute the Android Studio Installation Wizard. This will install the latest Android SDK, Android SDK platform tools and Android SDK build tools, which are required when Flutter is developed for Android.

### Set up your Android device

To be ready to run and test your Flutter application on an Android device, you need Android 4.1 (API Level 16) or higher.

  • Enable developer options and USB debugging on your device. Detailed instructions can be found in the Android documentation.
  • Use USB to plug your phone into your computer. If your device appears, authorize your computer to access your device.
  • On the terminal, run the Flutter Devices command to verify that the flutter recognizes the Android device to which you are connected.
  • Run start your application, Flutter Run.

By default, the Android SDK version that Flutter uses is based on your ADB tool version. If you want Flutter to use a different version of the Android SDK, you must set the ANDROID_HOME environment variable to the SDK installation directory.

Setting up the Android Emulator

To prepare to run and test your Flutter application on an Android emulator, follow these steps:

  • Enable VM Acceleration on your machine;
  • Start Android Studio>Tools>Android>AVD Manager and select Create Virtual Device.
  • Select a device and select the Next option;
  • Select one or more system images for the version of Android you want to emulate, and then select Next. X86 or x86_64 image is recommended.
  • From Emulated Performance, select Hardware-gles 2.0 to enable Hardware acceleration, verify that the AVD configuration is correct, and then select Finish.
  • In Android Virtual Device Manager, click the Run button in the toolbar. The emulator starts and displays the startup screen of the selected operating system version or device;
  • Run Flutter Run to start your device. The connected device name is Android SDK built for<platform>Platform is a chip family, such as x86.

Develop tools and plug-ins

Developing Flutter applications requires Android Studio and VSCode. On the one hand, VSCode provides very nice code hints. In Android Studio, perhaps due to the lack of functionality of the Dart plugin in Android Studio, code hints and development are not very powerful.

Android Studio

Installing a plug-in

To develop a Flutter mobile application using Android Studio, install the Flutter and Dart plug-ins first. To install the Plugin for Android Studio, go to Plugins -> Browse Repositories-> Search for Flutter-> Click Install.

New project

Open AndroidStudio-> Select Start a new Flutter Project -> Select Flutter Application; The diagram below:

Run the project

The Flutter project is also very simple to run. Navigate to the Android Studio toolbar and click the Run button, as shown below.

VSCode

Installing a plug-in

Press command+ Shift + X to open the App Store, then search for “Dart Code” and click Install, as shown below:

Creating a new project

Open VSCode-> View -> Command Panel -> Enter the command name of flutter create Project and click OK to create the flutter application.

Flutter project structure

Open the created Flutter project using Android Studio as shown below:

  • The Android directory: Contains the code for Flutter to interact with Android native. This path is basically the same as creating a separate Android project.
  • The ios directory: Contains the code for Flutter’s native interaction with ios.
  • Lib: Stores code written in the Dart language, which is the core code of the project.
  • Pubspec. yaml: The project depends on a configuration file that works like build.gradle on Android or cocospod on iOS. For example, in pubspec.yaml, cupertino_icons: ^0.1.2 indicates that the project will rely on the cupertino_icons library, whose version number is 0.1.2.

Read more: [1]gmtc.geekbang.org/

[2] marketplace.visualstudio.com/items?itemN…

[3] flutter. IO/SDK – archive…

[4]www.dartlang.org/

[5] en.wikipedia.org/wiki/Just-i…

[6] en.wikipedia.org/wiki/Ahead-…

[7] www.dartlang.org/guides/lang…

[8]api.dartlang.org/dev

[9] hackernoon.com/why-flutter…