An overview,
This paper mainly summarizes the JDFlutter encapsulation based on Google Flutter, used for the overall process of component development, fast and accurate positioning of the effective information of component development, to provide a reference for the novice.
The following is based on Mac development, which is prepared for the relevant documentation. For those with 0 development experience, you can focus on familiarizing yourself with the Dart language development specification. After the initial mastery, you can skip and start the environment building step by step
Two, pre-preparation
Dart is the language for Flutter development, Pub is used to provide an open source repository of plug-ins provided by officials and other developers, and YAML is the plugin configuration file for the Flutter project.
1. Dart official website for development language
Dart. Dev /guides
Chinese official website: dart.cn/guides
2. Official Website of Google Flutter
English website: flutter. Dev /docs
Chinese official website: flutter.cn/docs
Pub official website: pub.dev
3. JDFlutter official website
Liverpoolfc.tv: doc.jd.com/jd_flutter/…
Pub website: pub.jd.com/#/index
4, other
Yaml configuration file related introduction: www.jianshu.com/p/81365711a…
Third, environment construction
Google officially provides a method for installing the Flutter environment, but it is relatively complex; This paper summarizes the installation and construction of environment through JDFlutterTool (IDE), the simultaneous construction of Google Flutter environment, and finally the unification of Google Flutter and JDFlutter environment.
1, JDFlutterTool
The IDE is not used for development purposes. It is used for processes such as configuring the environment, building and managing the Flutter project, and packaging and publishing. Other ides are used for development, including but not limited to Android Studio, VS Code, etc. Android Studio is described in detail below.
IDE installation
Version 1.3.0 (2021) :
In the upper right corner, log in to the SYSTEM using ERP, and then go to the environment configuration page to download and install the environment SDK:
Step 1: You are advised to install the JDF-1.22.5 SDK.
Step 2: After the download and installation is complete, set it to default.
Step 3: After the download is complete, click to view the installation directory. Then set the Google Flutter environment variables using this directory path to unify the environment.
Configure the Google Flutter environment
– through the above steps 3 to get installed the SDK path, for example: “/ Users/y * * * * * 3-1.22.5 / workspace/jdflutter/SDK/JDF/bin” (⚠ ️ need to specify the path to the bin).
→ Mac terminal configuration of Google Flutter environment variables:
The terminal executes vim.zshrc
Step 1: Switch the keyboard to English input mode and type I to enter editing mode.
Step 2: Add the obtained path to the configuration file.
Step 3: Press ESC, enter :wq (colon wq), and press Enter to save the configuration and exit.
The terminal executes source. ZSHRC
Make the current configuration file changes take effect.
Add jdflutter –version and flutter –version to the terminal window, respectively
Check whether the JDFlutter and Google Flutter environments are set successfully
→ Success will be displayed as shown above. The current version of the flutter SDK is 1.22.5 and the dart SDK is 2.10.4 (the two commands are executed in no particular order and do not affect each other, just for clarity).
→ Another terminal window Purpose: To verify whether the environment variable configuration is effective.
→ jdflutter indicates the jdflutter command, and flutter indicates the Google flutter command.
At this point, the Google Flutter environment is configured and unified with the JDFlutter environment, using the same SDK.
2, the Android Studio
This development uses Android Studio development, other development IDE please refer to the information, but no matter which kind of development tools, including the following configuration items.
IDE installation
Can download the latest version, address: developer. The android, Google. Cn/studio
Localization reference address: blog.csdn.net/e891377/art…
(The following interface display effects are Android Studio 4.2.1 version, different versions may vary)
Plugin configuration (FLUTTER plugin, DART plugin)
The plug-in is configured to implement compiler syntax highlighting, auto-prompt, code completion, compile and run functions during development.
Install Android Studio and run it. First open the Settings, then select Plugin, enter Flutter and Dart in the location shown, search for the Plugin and install it.
Now that the Android Studio configuration is complete, check the environment with the FLUTTER command.
3. Environmental testing and related problems
The following describes how to detect the environment configuration through the flutter command and how to resolve the problems encountered.
The terminal executes the flutter doctor, and if there is no problem, the result is as follows:
Note: The green check mark indicates that the current test items are normal, and the six test items respectively represent:
① Check whether the Flutter SDK is installed and configured.
② Check whether the Android Toolchain is installed and configured.
③ Check whether the iOS development tool Xcode IDE has been installed and configured.
Check whether the Android Studio IDE development tool is installed and configured.
⑤ Whether VS Code IDE development tools are installed and configured.
⑥ Whether a debuggable device, including a real computer or emulator, exists and is running.
Possible abnormal execution results:
Note: The yellow exclamation mark indicates that there is a problem with the current detection item. The solution to the above problem is as follows:
Android license status unknown: If there is an unapproved license, terminal run Flutter doctor — Android-licenses to approve all licenses as prompted.
Flutter plugin not installed, Dart plugin not installed: Android Studio IDE does not have the Flutter and Dart plugins installed. If the previous configuration is complete, the plugin is actually installed successfully. The installation position of the new Android Studio plug-in is different from the directory path detected by the Flutter Doctor. Therefore, soft connection is required and terminal execution is performed: Ln -s ~ / Library/Application/Support/Google/AndroidStudio4.2 / plugins ~ / Library/Application/Support/AndroidStudio4.2, 4.2 is the current major version.
VS Code… : VS Code IDE flutter plug-in installation (extension), if you don’t use the IDE development can be ignored, if you need you can refer to: blog.csdn.net/liyangzmx/a… .
Xcode… : For non-ios development, that is, without Xcode IDE installed, yellow exclamation mark warning or Red Cross error may be displayed, you can ignore it.
Iv. Engineering construction
JDFlutterTool is used for project creation and management in a unified manner, which presets JDFlutter environment. As component development is conducted, plugin component project needs to be created first, and then module project needs to be created for component packaging, product generation and integration into the original project.
1, JDFlutterTool create Plugin component project
Process description:
Step 1: Open the JDFlutterTool and select New to go to the second page.
Step 2: On the create page, first select the type, all of which are illustrated in the figure.
Step 3: Since we are engaged in component development, plugin is selected here. The choice of business type and function type is explained in the figure, and others can be filled in as required.
After completing the above steps, the IDE automatically creates a Git repository and prompts you to open the repository management page. You can also find the repository in the following ways and manually clone it to a local directory for development.
⚠️ Figure 3 shows only the created Git repository, which needs to be manually cloned to the local, and then “Open” the cloned project through the home page. Select Android Studio in Figure 4 to open the project for development.
JDFlutterTool create Module project
The Plugin described above is the component we are developing, so how can we integrate it into the native project? This is done with the help of Module:
The module creation process is the same as the plugin creation process, except that the module is selected when the type is selected, and it also needs to be manually cloned to the local.
3. Brief introduction of the main structure of the project
A simple comparison is made between the project structure of Plugin project and Module project as follows:
The YAML configuration file is used to manage dependencies and resources (such as image resources) required by the configuration project.
⚠️ For the plugin project and the internal example project yamL configuration file ①, note the following:
Reading: If the basic components provided by JDFlutter need to be used in the ② configuration file, you can only rely on the container plugin (as shown below). Then use the required base components in the example configuration file ① to debug and develop the flutter. Dependencies on the underlying components in the Module when the package is finally packaged;
However, you can still rely on third-party plug-ins as needed in ②.
Five, packaging and debugging
In the process of development, for network interface requests, flutter interacts with the native, sends the request through the native, and finally transmits the request result to flutter. Therefore, it is natural to package the product of the module described above and integrate it into the debugging process of the native project.
1, Module package
For debug development, we chose the local build, debug type:
After the above construction, wait for a while, generate packaged products and integrate the generated files into the native host project. See the integration process for details:
Android:doc.jd.com/jd_flutter/…
IOS:doc.jd.com/jd_flutter/…
2. Development and debugging
Here, we use Attach to establish Socket connection between Android Studio and the device for debugging and development.
First, select the device to be debugged and run the native host project with the packaged product configured above.
Then, within the Android Studio IDE terminal under the Module project: Flutter Attach
If more than one device is currently running, the terminal will be asked to select the device that is currently running the packaging product by entering a number.
If multiple applications with package names exist on the device, the terminal may ask you to select an application based on the package names. Modify the command as prompted.
After attach is successful, you can directly input the following letters to perform corresponding operations, among which r and R are frequently used to perform hot reloading after code update:
The above is all content, so far, as a small white development summary to this end, there is any question welcome to correct, thank you for your patience to read ~