1 Introduction to Flutter
Flutter is an open source and free UI framework developed by Google, which allows us to quickly build high-quality apps on Android and iOS. Its biggest feature is cross-platform and high performance. Flutter currently supports iOS, Android, Web, Windows, macOS, Linux, etc.
Flutter is based on Google's Dart language. If you don't have any Dart language foundation, it is not recommended to learn Flutter directly. It is recommended to learn the basic syntax of the Dart language first. Then enter the study of Flutter.
There are already many hybrid App development frameworks on the market, but some hybrid App development frameworks are mainly aimed at front-end developers: such as ReactNative (based on React), Ionic (based on Angular, Vue, React). Some are aimed at .Net developers for the .Net platform, such as: Xamarin
Flutter is a cross-platform App development framework developed by Google based on the Dart language. It's aimed at developers, all developers. Its performance is better than frameworks such as RN and Ionic.
Flutter has a very high degree of attention in 2019. Flutter is currently very stable, and the community is also very complete. More than half of the new applications released in the application market are applications developed by Flutter. After Flutter3.x, it not only supports the cross-platform development of Android Ios App, but also supports the cross-platform development of Web, Windows, MacOs, and Linux desktop applications. Many companies around the world have already used Flutter in commercial projects, such as Google, Microsoft, Ali, Byte, Baidu, JD.com, etc. Flutter already has 1.5 million stars on Github, ranking first among cross-end frameworks. According to official statistics, as of June 2022, more than 500,000 commercial applications have been built with Flutter. Flutter is a framework worth learning. Flutter not only has the characteristics of cross-platform and high performance, but also has the characteristics of stability . From the release of Flutter1.0 on December 5, 2018 to all subsequent versions, the usage is the same.
2 resource address
Flutter official website: https://flutter.dev/
Flutter Packages official website: https://pub.dev/
3 Environment installation and configuration
3.1 Build the Flutter Android operating environment on Windows
3.1.1 Install and configure JDK on the computer
1. Download and install JDK
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2. Configure JDK
1. Add JAVA_HOME in the system variable, and set the value to the java sdk root directory:
2. System variables Find Path Add the following code in the Path environment variable
;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
3.1.2 Download and install Android Studio on the computer
1. Install dart and flutter plugins
3.1.3 Download and configure Flutter Sdk on the computer
1. Download the Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases#windows
2. Decompress the downloaded Flutter SDK to the directory where you want to install the SDK
Such as decompression to ( F:\flutter_windows\flutter_windows_3.0.4\flutter)
3. Configure the bin directory of the Flutter installation directory as an environment variable.
As shown in the figure above, the F:\flutter_windows\flutter_windows_3.0.4\flutter\bin directory needs to be configured in the path environment variable
windows7：
windows10、windows11：
3.1.4 Configure Flutter domestic image on the computer
1. In the process of setting up the environment, many resource files need to be downloaded. When some resources cannot be downloaded, various errors may be reported. There may be restrictions when accessing Flutter in China. Flutter officially provides us with domestic mirror images
https://flutter.dev/community/china
https://flutter-io.cn/
2. Pull to the bottom of the Flutter Chinese website and there is a configuration method, and configure the following two sentences into the environment variable
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
3. Flutter Community Mirror
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
4. Mirror image of Tsinghua University TUNA Association
FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub
3.1.5 Run the flutter doctor command to check whether the environment is configured successfully, configure and install the corresponding software according to the prompts, open Android Studio and install the Flutter plug-in
3.1.6 Create and run Flutter project
3.2 Mac computer builds Flutter Ios environment
3.2.1 Preparations
1. Upgrade the Macos system to the latest system
2. Install the latest Xcode
3. Brew needs to be installed on the computer https://brew.sh/
4. Install the chrome browser (for web development)
3.2.2 Download Flutter, configure Flutter environment variables, configure Flutter mirror
1. Download the Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
2. Decompress the downloaded Flutter SDK to the directory where you want to install the SDK, such as
/Users/axxxg/flutter_mac/flutte
3. Configure the bin directory of the Flutter installation directory to the environment variable, and then configure the Flutter domestic image to the environment variable
vim ~/.bash_profile
vim ~/.zshrc
export PATH=/Users/aishengwanwu/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4. Let the configuration environment variables take effect
source ~/.bash_profile
source ~/.zshrc
flutter --version If the version can be displayed, the flutter sdk configuration is successful.
Note: If you enter flutter --version after the configuration is complete and tell you that flutter is not a built-in command, the sdk may not be configured successfully, or the full sdk may not be downloaded when the sdk is downloaded.
5. Run the fiutter doctor command to detect the environment
When running flutter doctor for the first time, the following error will be prompted
6. Configure the Flutter Xcode Ios environment
If brew is not installed on the computer, the first step is to install brew
https://brew.sh/
Terminal executes the following command
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Execute the following commands respectively
brew install cocoapods
pod setup
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
implement:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
NOTE: If running the command fails run brew doctor and follow the instructions to resolve the issue.
After executing the above command and then re-run: flutter doctor If the following figure comes out, it means that the ios environment configuration is complete
