Flutter project packaging process and solution to display blank on Android emulator after packaging apk?

Motivation : The author now needs to package the apk of a Flutter project, and the webview service is used in this Flutter project. The project name is: flutter_issue_120853. This article uses the Android Studio development tool. This article contains two parts: 1. The packaging process of flutter_issue_120853; 2. The solution to the problem of flutter_issue_120853 showing blank on the Android emulator.

1. Packaging process of flutter_issue_120853 (Android application)

1.1 Create signature

Before creating a signature, you need to have a JDK environment on your computer (you can refer to Baidu for specific installation steps). Enter the following command in the root directory of your project:

keytool -genkey -alias android.jks -keyalg RSA -storetype PKCS12 -validity 36500 -keystore android.jks

Command explanation: Create a certificate file named android.jks, the alias is also android.jks, the encryption algorithm uses RSA, the validity period is 100 years, and the industry standard format is PKCS12. note: You can set the path yourself here. The author directly creates it in the root directory of the flutter_issue_120853 project.
Note:
-genkey generated file
-alias alias
-keyalg encryption algorithm
-validity validity period
-keystore file name
-storetype PKCS12 industry standard format PKCS12

Follow the instructions to fill in the required content, and finally enter y to confirm the information.

1.2 View the detailed information of the certificate

The command is as follows:

keytool -list -v -keystore "android.jks"

1.3 Configure signature information in the project

Create the key.properties file in the project's android folder .

=========== 粘贴如下代码 ==================
storePassword=<password from previous step>    //输入上一步创建KEY时输入的 密钥库 密码
keyPassword=<password from previous step>    //输入上一步创建KEY时输入的 密钥 密码
keyAlias=android.jks // 别名
storeFile=   //key.jks的存放路径

=========== 示例 ==================
storePassword=123456
keyPassword=123456
keyAlias=android.jks
storeFile=C:/Users/tingt/Desktop/android.jks （创建签名的路径，1.1中的介绍。）

Enter the */android/app/build.gradle file in the project directory and add the following code at the top of the build.gradle* file:

// 寻找签名配置文件
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

Replace the code in the build.gradle file with the following:

=================== 替换前代码 =================
buildTypes {
    
    
    release {
    
    
        signingConfig signingConfigs.debug
    }
}

=================== 替换后代码 =================
signingConfigs {
    
    
    release {
    
    
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    
    
    release {
    
    
        signingConfig signingConfigs.release
    }
}

1.4 Package and install applications

flutter build apk

1.5 Install app

Normally, the packaged apk is stored in *\build\app\outputs\apk\release\app-release.apk* in the root directory of the project. Then execute the following command to install it.

adb install C:\Users\tingt\Desktop\flutter_app\build\app\outputs\apk\release\app-release.apk

2. Solution to the problem of flutter_issue_120853 showing blank space on Android emulator

The first part has introduced how the Flutter project is packaged into an apk. This chapter mainly introduces the solution to the problem of a blank page after opening an installed app on the Android emulator. When the author opened the newly installed app on the Android emulator, he encountered the following situation: the
Insert image description here
specified page did not appear after waiting for a long time.
Cause analysis: The reason for the above situation is that the flutter application in Android development does not have network permissions. The solution is as follows:

1.1 Add network permissions

In the android\app\src\profile\AndroidManifest.xml file, add the following code in **:

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

The AndroidManifest.xml configuration file is as follows:
Insert image description here
Repackage the apk, and then execute the app in the simulator. You can find that the app can display the web page normally.

You're done! ! !

Welcome to discuss…