• Install and configure Flutter
  • FlutterIt’s Google MobileUIFrame can be quickly iniOSandAndroidBuild a high quality native user interface, and is the new operating system of the futureFuchsiaThe default development suite for
  • All over the world,FlutterIs being used by more and more developers and organizations, andFlutterIs completely free and open source —-Because Chinese website
  • FlutterAt the same time supportWindows,LinuxandMacOSOperating system as development environment, and inAndroid StudioandVS CodetwoIDEBoth are fully supported
  • FlutterIn order toDartThe language is the development language (covered in a later article)

Cross-platform framework

  • inFlutterBefore it was born, there were many cross-platformsUIFramework schemes, such as basesIn the WebViewtheCordova,AppCanEtc., and useHTML+JavaScriptRendered as a native controlReact Native,Weex(although I have only used itReact Native)
  • Based on theWebViewThe framework of
    • The advantages are obvious. They can inherit modern times almost entirelyWebAll of the results of development (much richer control libraries, page frameworks to meet various needs, full dynamics, automated testing tools, and so on), of courseWebDevelopers, without much learning and migration costs, can develop oneApp
    • The downside can also be fatal. In the case of high requirements for experience and performance,WebViewRendering efficiency andJavaScriptPoor execution performance. Coupled with theAndroidIt is difficult to ensure a consistent experience across all devices due to the customization of various system versions and device manufacturers
  • React NativeA class of frameworks
    • The final rendering is handed back to the system, though again using classesHTML+JStheUIBuild logic, but eventually generate corresponding custom native controls to take full advantage of native controls relative toWebViewHigh rendering efficiency
    • At the same time this strategy will also frame itself andAppDevelopers are tied to the controls of the system, and not only does the framework itself have to handle a lot of platform-specific logic, as the system version changes andAPIDevelopers may also have to deal with differences between platforms, and some features can only be implemented on some platforms, thus reducing the cross-platform nature of the framework
  • FlutterThe framework
    • FlutterIt opens up a whole new way to rewrite a cross-platform software from the ground upUIFramework, includingUIControls, rendering logic, and even development languages
    • FlutterUse your own high-performance rendering engine to drawwidget.FlutteruseC,C ++,DartandSkia(2D rendering engine) build
    • iniOSOn,FlutterThe engine’sC/C ++Code usingLLVMCompile, anyDartThe code isAOTCompiled to native code,FlutterApplications run with native instruction sets (no interpreter involved)
    • And in theAndroidNext,FlutterThe engine’sC/C ++The code is to useAndroidtheNDKCompiled, anyDartThe code isAOTCompiling native code,FlutterThe application still runs with the native instruction set (no interpreter involved)

FlutterThe installation

  • Please refer to the official websiteInstall the FlutterTo supportWindows,LinuxandMacOSThe operating system
  • The system I use isMacOSThe operating system

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 includedXcodeorAndroid StudioDisk space).
  • Tools:FlutterRely on the following command-line tools.
    • bash.mkdir.rm.git.curl.unzip.which

To obtainFlutter SDK

Download the SDK

  • Go to theFlutterDownload the latest available installation package from the official website,Go to the Download page
  • Pay attention to,FlutterChannel version is subject to change, pleaseFlutterWebsite shall prevail
  • In addition, in mainland China, you may need to climb the wall to obtain the installation package list or download the installation package. Readers can also go thereFlutter githubProject down to download the installation package,Go to the Download page

Environment configuration

  • Unpack the SDK and put all the files in the place you want them to be. It is recommended to place them in the SDK of other development languages, for example~/Library/Flutter
  • To facilitate subsequent use, you need to put the project in the root directorybinPath adds environment variablesPATHIn the
    • Editor open~/.bash_profileFile, add as follows
# Configure Flutter
# XXX is your own Flutter folder path
export PATH=/xxx/Flutter/bin:$PATH
Copy the code

Since access to Flutter may sometimes be restricted in China, Flutter officials have created a temporary mirror for Chinese developers who can add the following environment variables to their user environment variables:

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

Note that this image is temporary and is not guaranteed to be available all the time. Please refer to Using Flutter in China to get the latest information about the image server

Save the file and update the current configuration

Source ~/.bash_profileCopy the code

Verify that the flutter/bin directory is in your PATH

# Run the following command
echo $PATH
Copy the code

If the installation is successful, a path similar to/XXX /Flutter/bin is displayed

Installing development tools

Install the Android Studio

  • Download and install Android Studio
  • Start theAndroid StudioAnd then executeAndroid StudioInstallation wizard, which will install the latestAndroid SDK.Android SDKPlatform tools andAndroid SDKBuild tools, this isFlutterThe development ofAndroidNecessary for application
  • After the installation is complete, configure the required oneAndroidThe simulator

Install Xcode

Search the App Store for the latest version of Xcode to download and install

VSCode

To develop IDE, go to the official website to download and install

Environment configuration detection

The install of a flutter is now executed using the Flutter doctor command. After a period of download and installation, the flutter will output the installation result (which may take a long time).

$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [!] ✓ Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale EN-NZ) [!]  Android toolchain - developfor Android devices (Android SDK 26.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop forIOS Devices (Xcode 9.4.1) Qualify Missing Xcode Dependency: Python Module"six".
    Install via 'pip install six' or 'sudo easy_install six'Those who qualify qualify libimobiledevice and ideviceinstaller are not installed. To install, run: Brew install --HEAD libiMobileDevice brew install ideviceInstaller onto ios-deploy not installed. To install: Brew install ios-deploy qualify CocoaPods not installed. CocoaPods is used to retrieve the ios platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: Brew Install Cocoapods pod setup [✓] Android Studio Onto university plugin not installed; Those who qualify Dart plugin not installed; This adds Flutter specific functionality. This adds Dart specific functionality. [✓] Android Studio (version 3.0) Eligible Flutter plugin not installed; Those who qualify Dart plugin not installed; This adds Flutter specific functionality. this adds Dart specific functionality. [!] Those who qualify onto university can apply to those who qualify. IntelliJ IDEA Ultimate Edition (Version 2017.1.1) Eligible Flutter plugin not installed; Those who qualify Dart plugin not installed; This adds Flutter specific functionality. this adds Dart specific functionality. [!] VS Code (Version 1.24.1) [!]  Connected devices ! No devices available ! Doctor found issues in 5 categories.Copy the code
  • In front of it is[✓]Indicates that the installation has been successful
  • [!]Signs need to be installed or updated
  • The following describes the editor you need to install and its configuration

The development tools

Run the flutter doctor command to see the information

  • FlutterVersion and information of
  • FlutterRun requiredAndroidToolchain, some licenses not accepted, type prompt command, typeyconfirm
  • FlutterRun requirediOSThe tool chain is not satisfied
  • AS,IDEAtheFlutterThe plug-in is not installed, so it needs to be installed, and therefore configuredASorIDEA
  • There are connected devices available

Android Studio

  • Open the plug-in optionsPreferences > Plugins
  • chooseBrowse repositoriesSearch,FlutterPlug-in and install (automatically install at the same timeDartPlug-in)
  • After the plug-in is installed, restart itAndroid StudioAfter plug-in takes effect

Run flutter Doctor on the command line and see that Android Studio is ready

[✓] Android Studio (version 3.2)
Copy the code

IOS configuration

  • In theiOSInstallation is required before configurationCocoaPods, can be baidu
  • The installationCocoaPodsAfter the executionflutter doctorCommand, the following problems may occur
  • In this case, run the commands in sequence on the terminal
[!]  iOS toolchain - developfor iOS devices

If the command appears, execute the command in sequence. If the command does not appear, do not execute the command$ brew install --HEAD usbmuxd $ brew link usbmuxd $ brew install --HEAD libimobiledevice $ brew install ideviceinstaller  ios-deploy cocoapods $ pod setupCopy the code

Run flutter Doctor on the command line and you can see the iOS configuration

VSCode plug-in

Reload the extension to search for the Flutter and Dart installation

Configuration is complete

At this point running the Flutter Doctor command should be no problem

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.3 18D109, locale zh-hans -CN) [✓] Android Toolcha-developfor Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop forIOS Devices (Xcode 10.1) [✓] Android Studio (Version 3.0) [✓] VS Code (version 1.30.2) [✓] Connected device (1) Available) • No issues found!Copy the code

Create Flutter application

CSCode create

Vscode -> View -> Command Panel -> Flutter: new project -> Enter the project name

Note: Project names do not support capital letters

Android Studio to create

Open Android Studio and you can see the Flutter project template below

Command to create

flutter create helloflutter
Copy the code

A Dart package called Helloflutter is created here

  • Parameter is introduced
  • To create the plug-in package, use the--template=pluginParameters to performflutter create
  • use--orgOption to specify your organization and use reverse domain name notation. This value is used to generateAndroidandiOSVarious packages and package identifiers in the code.
flutter create --org com.example --template=plugin helloflutter
Copy the code
  • By default, plug-in projects targetiOSCode usingObjective-C.AndroidCode usingJava.
  • If you preferSwiftorKotlin, can be used-ior-a 为iOSorAndroidSpecify the language. Such as:
flutter create --template=plugin -i swift -a kotlin helloflutter
Copy the code

Refer to the article

  • The principle of Flutter and its practice
  • Because Chinese website

When I first learned about Flutter, my summary may not be accurate. Please bear in mind the shortcomings. I will continue to optimize related articles in the future

Please scan the following wechat official account and subscribe to my blog!