移动App混合开发之Flutter篇(3)---Android工程配置

首先要保证谷歌服务畅通访问,这个是程序员基本技能.

将 Flutter module 集成到 Android 项目

首先到Flutter工程里面执行

1
2
flutter build aar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
master_flutter git:(main) flutter build aar
Running "flutter pub get" in master_flutter...                     765ms
Running Gradle task 'assembleAarDebug'...
Running Gradle task 'assembleAarDebug'... Done                     63.9s
✓ Built build/host/outputs/repo.
Running Gradle task 'assembleAarProfile'...
Running Gradle task 'assembleAarProfile'... Done                   49.8s
✓ Built build/host/outputs/repo.
Running Gradle task 'assembleAarRelease'...
Running Gradle task 'assembleAarRelease'... Done                   45.4s
✓ Built build/host/outputs/repo.

Consuming the Module
  1. Open <host>/app/build.gradle
  2. Ensure you have the repositories configured, otherwise add them:

      String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
      repositories {
        maven {
            url '/Users/admin/workspace/native-mix-cross-platform/flutter/Master-Flutter/master_flutter/build/host/outputs/repo'
        }
        maven {
            url '$storageUrl/download.flutter.io'
        }
      }

  3. Make the host app depend on the Flutter module:

    dependencies {
      debugImplementation 'com.example.master_flutter:flutter_debug:1.0'
      profileImplementation 'com.example.master_flutter:flutter_profile:1.0'
      releaseImplementation 'com.example.master_flutter:flutter_release:1.0'
    }


  4. Add the `profile` build type:

    android {
      buildTypes {
        profile {
          initWith debug
        }
      }
    }

To learn more, visit https://flutter.dev/go/build-aar

这个先别关,等下要用.

如何新建Flutter工程,请点击 移动App混合开发之Flutter篇-1-Flutter工程配置 移动App混合开发之Flutter篇-1-Flutter工程配置 构建的。

新建Android工程

app/build.gradle里面新增配置,会用到flutter build aar的内容

别搞错了 必须是Module的gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
repositories {
    maven {
        url '/Users/admin/workspace/native-mix-cross-platform/flutter/Master-Flutter/master_flutter/build/host/outputs/repo'
    }
    maven {
        url 'https://storage.googleapis.com/download.flutter.io'
    }
}
dependencies {

    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

//    flutter
    debugImplementation 'com.example.master_flutter:flutter_debug:1.0'
    profileImplementation 'com.example.master_flutter:flutter_profile:1.0'
    releaseImplementation 'com.example.master_flutter:flutter_release:1.0'

//    flutter
}

Module.gradle配置

在 Android 应用中添加 Flutter 页面

AndroidManifest.xml注册activity,这是Android基础知识,建议去youtube上看一遍Android教程,虽然不写Android,但是基本常识还是要知道的.

1
2
3
4
5
6
7
8
<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

activity

这个时候 android:theme=”@style/LaunchTheme” 会爆红

别紧张,src/main/res/values/strings.xml里面新增一个style

1
2
3
4
5
6
7
8

    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
<!--        <item name="android:windowBackground">@drawable/launch_background</item>-->
        <item name="android:windowFullscreen">true</item>
    </style>

style

这个时候安装官方的教程来,需要你在 src/main/res/layout/activity_main.xml新增一个按钮, 而且默认肯定是 ConstraintLayout布局,搞半天你也不知道怎么玩,更别提还要findViewById, 咱不费那劲,直接在MainActivity的onCreate的方法里面加一行代码就行,先跑起来再说嘛.

1
2
3

startActivity(FlutterActivity.createDefaultIntent(this));

可能的导包

1
2
3
4
5
6
7


import androidx.appcompat.app.AppCompatActivity;
import io.flutter.embedding.android.FlutterActivity;

import android.os.Bundle;

MainActivity

集成效果图