What is the fluter

history

Independent development: ios: Object-C, Swift (apple 14 years), Android: Java, Kotlin (Czech software company 11 years, Google best support 17 years)

Cross-platform: Js based WebView, RN, flutter

Environment configuration

Flutter configuration

flutter-sdk

  • downloadLatest stable edition, go to the page where the file is located and decompress (Unzip flutter_macos_1. 17.5 stable. Zip)
  • Through the git:git clone https://github.com/flutter/flutter.git(Not recommended, need to climb the wall)

Configure the FLUTTER command

  • View the current shell type in useecho $SHELL
    • Bash: edit$HOME/.bash_profile 或 $HOME/.bashrc
    • ZSH: edit$HOME/.zshrc
  • Add the following contents to the corresponding files above:
# Flutter # Flutter SDK export FLUTTER_HOME=$PATH:$HOME/Desktop/applications/flutter export PATH=$PATH:$FLUTTER_HOME/bin # # of Shanghai jiao tong university to provide domestic mirror pub mirror export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn/ # flutter mirror export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn/ # Dart SDK (flutter with Dart - SDK, DART_HOME=$FLUTTER_HOME/bin/cache/dart-sdk export PATH=$PATH:$DART_HOME/bin # Android SDK export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-toolsCopy the code
  • Restart the window or executesource $HOME/.bash_profile 或source $HOME/.rcAnd then executeflutter --vesionDetermine whether the flutter is installed successfully
  • flutter doctorCheck that dependencies are installed (for missing dependencies, run again after installationflutter doctorCheck if the Settings are correct)

Android Configuration

Download Android Studio and install it. Then configure the emulator and install flutter, Dart and other plug-insReal machine debugging: about SettingsAndroid devices: After entering developer mode, enable USB debugging and usb installation (Failure [INSTALL_FAILED_USER_RESTRICTED: Install Canceled by user] is reported when the project is running)flutter doctorCheck whether the device is connected

IOS Platform Configuration

  • It can be searched and downloaded on the App Store
  • Open Up Xcode by clicking on the top right cornerXcode -> Open Developer Tools -> SimulatorThe default emulator opens; throughProdue -> DestinationSelect another emulator

Project creation

The command line

flutter create <project-name>

Then wait patiently for the installation

This will check your current flutter environment after installation, as shown in the image above. Executing the Flutter Run will cause an error because the device has not been started locally.open -a SimulatorOpen the ios emulator and executeflutter runCan be

Android studio

After selecting the corresponding simulator, click the start button in the upper right corner, and the picture below will appear (the modified code can be reflected on the interface in real time in the case of hot update)

VS CODE

Make sure that the flutter and DART plug-ins are installed in your editor. When you create a project using the Flutter command for the first time, the SDK location will be displayed in the lower right corner of the editor. Click Config to select the location of the Flutter file on your computer

  • Shift + Command + P (View -> Command Palette)
  • Enter flutter and select Flutter: New Project
  • Enter the project name and press Enter
  • After selecting the location of the project, click the blue button in the lower right corner
  • After the project is successfully created, the lib/main.dart file is displayed by default
  • Click on the device selection in the lower right corner of the editor (the device here is an emulator created with Android Studio)
  • Click start in the upper right corner
  • After the project starts, the emulator opens and the debug interface opens in the browser

Dart DevTools was unable to launch Chrome so your default browser was launched instead. (改 编.vscode/launch.json, Configure runtimeExecutable as the absolute address of the Chrome browser on the current computer.

{
  "version": "0.2.0"."configurations": [{"type": "chrome"."request": "launch"."name": "Launch Chrome against localhost".// "url": "http://localhost:8080",
      "file": "${workspaceFolder}/index.html"."webRoot": "${workspaceFolder}"."runtimeExecutable": "/Applications/Google Chrome.app"}}]Copy the code

packaging

The android package

  1. Get the Android signature file

Keytool -genkey -v -keystore Customized path/customized alias keystore -alias Customized alias -keyalg RSA -keysize 2048 -validity 10000 -storepass User-defined password -keypass User-defined password

If No Java Runtime Present, requesting Install is displayed, the javaSE needs to be downloaded

  1. Importing a signature File
  • Place the signature file generated in the first step into the current projectandroid/appfolder
  • Create a new one in the Android folderkey.propertiesFile, write the following content
storePassword=123456
keyPassword=123456
keyAlias=todo
storeFile=sharekey.jks
Copy the code
  1. Generate the SPK file

flutter build apk

Ios packaging

To be added