1. Environment configuration
1. Flutter environment installation
Due to the Android code, there are many jar packages that conflict with the grammar after Flutter3.0, which makes it impossible to use the latest Flutter language development. It is necessary to control the version of Flutter below Flutter3.0. In the case of consistent Android environment, we use Flutter2 .2 version.
Because my computer has already installed Flutter3.0, I need to downgrade. Open the terminal first. The specific downgrade method is as follows:
1. View all branches and the current branch
flutter channel
2. Switch to the specified branch
flutter channel stable
3. Downgrade to the specified version
flutter downgrade v2.2.0
4. Check the Flutter environment
flutter doctor
If you want to install the latest Flutter version, you can do this
If you are going to use it on an Apple chip Mac computer, you also need to install the Rosetta 2 environment because some auxiliary tools are still required, you can manually run the following command to install:
sudo softwareupdate --install-rosetta --agree-to-license
If it is not an M series chip, go to the next step directly:
1. Download the following installation package to get the latest stable Flutter SDK:
Intel chip download
2. Unzip the file to the target path, for example:
cd ~/development
unzip ~/Downloads/flutter_macos_3.7.12-stable.zip
3. Configure the PATH environment variable of flutter:
export PATH="$PATH:`pwd`/flutter/bin"
This command configures the PATH environment variable and will only take effect in your current command line window. To make it permanent, see Updating the PATH environment variable.
4. Check the Flutter environment
flutter doctor
As shown in the figure below, it means that the Flutter environment has been configured:
2. XCode installation and configuration
To develop Flutter applications for iOS, you need Xcode 9.0 or later, because iOS has some new features that need to be compatible, so generally we use the latest XCode version, and the installation is relatively simple. We open the mac app store and search for XCode. Can.
After the XCode installation is complete, we need to set up a developer account or a development certificate, otherwise it will not be possible to debug on the real machine. The specific steps are: open
XCode -> XCode option, Settings -> Accounts -> Add a developer account.
After completion, it is as follows:
The mixed development of flutter and iOS does not support BitCode, so we need to set it to
3. Cocoapods installation
At present, the mainstream third-party management tool in iOS development is cocoapods. Flutter officially recommends this method for management. Compared with manual integration, they are more convenient. We only need to use a simple scripting language to integrate the latest code.
The specific integration method is as follows:
1. Install the ruby environment
The mac comes with its own ruby environment. We don’t need to care about this anymore. If the current Flutter syntax conflicts with the default ruby, we need to install the required version. Here, because of project refactoring and componentization, we use some New script configuration, here the ruby environment needs to install two versions, ruby-2.6.3 and ruby-3.0.0, the related installation and version switching are as follows:
1. View the current ruby version
rvm list
2. View the version of ruby that can be installed
rvm list known
3. Install the desired ruby version
rvm install 3.0.0
rvm install 2.6.3
4. Switch the default version of ruby
rvm use ruby-3.0.0 --default
Of course, if we have other local tools that require a specific ruby environment to run, we only need to switch to the corresponding environment through the fourth step.
2. Delete the built-in ruby image
Type in terminal:
gem sources --remove https://rubygems.org/
3. Add a new image
Type in terminal:
gem source --add https://gems.ruby-china.com/
After the addition is complete, make sure that only one mirror is what we need, and enter in the terminal:
gem sources -l
4. Update ruby
Type in terminal:
sudo gem update --system
5. Install cocoapods
Type in terminal:
sudo gem install -n /usr/local/bin cocoapods
6. Check whether cocoapods is installed successfully
Type in terminal:
pod --version
7. Install pods
Type in terminal:
pod setup
8. Complete
2. Flutter code development and configuration
Before integration, we need to run through the Flutter code first, otherwise it will not be able to proceed. We need to check whether the code we checked is complete. There must be a pubspec.yaml file in the folder, otherwise the corresponding ios file cannot be generated folder, if the iOS folder is not found, you need to run the corresponding command first.
Execute in the VSCode terminal:
flutter pub get
If we need to develop a new page, we can do it at this time.
1. Real machine debugging
If real machine debugging is required, we need to further configure relevant certificates in XCode. In iOS development, a developer account is required for real-device debugging. Otherwise, the validity period of the generated relevant certificate is only 7 days, and it cannot be used again after 7 days. By default, we use automatic certificate management to make it easier .
We open the .ios folder, then double-click the Runner.xcworkspace file, and then use XCode to open the corresponding project.
Next, find the corresponding location and configure the developer account. The account configuration is as follows:
After the configuration is complete, select the device to run, and then click the run button to check that the code is running normally.
If it works, you're generally fine and you're ready to integrate.
2. Integrate the code into the project through cocoapods
1. Project folder configuration
Here we need to put the Flutter folder and the root directory folder of the iOS project at the same level
2. Edit the Podfile folder
This folder is the configuration file of all third-party libraries in the iOS project project, which basically controls the management of all third-party versions. Here we need to add the code and dependent libraries of the Flutter project. Of course, there are many ways to add, but Flutter1. 0 and the integration methods of Flutter2.0 and Flutter3.0 are different. This is mentioned in the official documentation of Flutter. The following is the configuration method of Flutter2.0 version: here is the setting path
and the name of the project that needs to be imported.
Then add integration under target
3. Integrate Flutter code
Open the terminal, cd to the iOS project
773dfa.png)
and then run:
pod install
Note: In the iOS project, we use a lot of new scripting languages. If the execution of pod install fails, here we need to switch the ruby environment to version 3.0.0 first, then execute pod install, and then switch to 2.6.3 after execution
If it goes well, the code has been integrated at this time. If you open the iOS project at this time, you will find 3 more libraries, which are:
Next, run it according to the above real machine debugging. If it runs normally, the integration has been completed.
Note: There are some pitfalls in the integration part, and some configuration has been written, which can basically be avoided by following the above steps. If it fails to run in the end, and XCode does not report a specific error, it is basically caused by some environment configuration version conflicts of. Just check the version of the configuration environment again.