Flutter is introduced

Official website: flutter. Dev /

Chinese language: flutter. Cn /

Pronunciation: [ˈ fl ʌ t goes r]

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter is Google’s open source UI toolkit that helps developers efficiently build beautiful multi-platform applications through a code base that supports mobile, Web, desktop and embedded platforms.

Have a purpose?

Currently, it is mainly used to develop cross-platform App, a set of code for iOS and Android.

Why a Flutter?

  • Cross-platform, a set of code development iOS and Android, can easily achieve cross-platform development, enhance competitiveness.
  • UI style consistency.
  • Changing the code while the application is running and hotreloading it is a real improvement in App development.
  • Performance is close to native apps.

Flutter frame construction

The development tools

  • Visual Studio Code
  • Android Studio
  • IntelliJ IDEA

All of the above supports Flutter development.

The Dart is introduced

What is Dart?

Pronunciation: [d ɑ ː t]

Wikipedia:

Dart ([KK] ɑrt/, [DJ] ɑ:t/) is an open source programming language for the World Wide Web. It was developed by Google and released in October 2011. Its development team, led by Lars Barker, who led the V8 team for Google Chrome, aims to become the next generation of structured Web development language. Like JavaScript, Dart is an object-oriented language, but it uses class-based programming. It allows only single inheritance and has a syntactic style close to C. Dart is a Client-optimized Language for Fast apps on any platform. Dart is a client-optimized language for fast apps on any platform. Is a programming language.

Web site:

Official website: Dart.dev /

Chinese version: dartpad.cn/

Online Dart environment: dart.dev/#try-dart

Environment set up

Install the Flutter

  1. Download the SDK for the corresponding platform: flutter. Dev /docs/get-st…

    • Go to CD ~/development
    • Unzip ~/development/ flutter_macOS_1.17.3 – stables
    • Add the Flutter tool to your path:
    The flutter command can only be found under ~/development if the flutter command is added in this way
    export PATH="$PATH:`pwd`/flutter/bin"
    Copy the code

    The flutter command can be added globally, depending on which command line is used.

    If using ZSH:

    sudo vi ~/.zshrc
    
    Add the path to flutterSDK at the end of the.zshrc configuration file
    #flutter path
    export PATH="$PATH:/Users/ username /development/flutter/bin"
    
    source ~/.zshrc
    Copy the code
  2. Check flutter environment

    flutter doctor
    Copy the code

    Follow the prompts to install what is missing:

    # Mac needs to install this
    sudo gem install cocoapods
    
    # Install Android Studio[!]  Android toolchain - developforThose who qualify can go onto those who qualify. Android Devices (Android SDK Version 29.0.3) Qualify Android License status unknown Android SDK Manager. See https://developer.android.com/studio/#downloads or visit visit
          https://flutter.dev/docs/get-started/install/macos#android-setup forSolution: Flutter doctor -- Android licenses Java version has been switched to Java8echo $JAVA_HOME/ Library/Java/JavaVirtualMachines jdk1.8.0 _221. JDK/Contents/Home ✗ Flutter plugin not installed; this adds Flutter specific functionality. Android Studio>>File>Settings>Plugins>Browse Repositories Search for Flutter and install the plugin.Copy the code
    # Select Auto-detect Proxy Setting
    # Or use your mobile hotspot to download the plugin[!] Those who qualify onto university can apply to those who qualify. IntelliJ IDEA Ultimate Edition (Version 2019.3.3) Goes onto university. Those who qualify Dart plugin not installed; This adds Flutter specific functionality. this adds Dart specific functionality.Copy the code

    [!]  Connected device ! No devices available Install mobile -- developer option ---- enable USB to debug flutter doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.17.3, on Mac OS X 10.15.4 19E287, locale zh-hans -CN) [✓] Android Toolcha-developforAndroid Devices (Android SDK version 28.0.3) [✓] xcode-developfor✓ Android Studio (Version 4.0) [✓] IntelliJ IDEA Ultimate Edition (version 2019.3.3) [✓] Connected Device (1 available) • No issues found!Copy the code

Installing the Dart Environment

dart.dev/get-dart

Mac environment:

Brew tap Dart-lang /dart brew install dart brew info Dart Successfully installed: 🍺 /usr/local/Cellar/dart/2.8.4: 502 files, 486MB, built in 56 seconds
Copy the code

Create projects using Android Studio

Create the project using VsCode

VS Code’s Flutter configuration is also simple:

Open VS Code -> Extension Management, search for Flutter in the search box, and click Install. The Dart environment will be automatically installed.

Then enter project Name.

Run: Debug => Start debugging

Create projects using IntelliJ IDEA

Operation effect:

Android:

iOS: