文章目錄

• 前言
• 一、創(chuàng)建 Android 項目
• 二、關(guān)聯(lián) Android 工程與 Flutter Module 工程
• • 1、配置 Flutter Module工程
  • 2、配置 build.gradle
  • 3、配置 AndroidManifest.xml
• 三、Activity 中嵌入 FlutterFragment 頁面
• 四、Activity 中啟動 FlutterActivity 頁面
• 五、完整代碼示例
• • 1、Android 主界面代碼示例
  • 2、Flutter 完整代碼示例
• 四、相關(guān)資源

前言

在上一篇博客 【Flutter】Flutter 混合開發(fā) ( 簡介 | Flutter 混合開發(fā)集成步驟 | 創(chuàng)建 Flutter Module ) 中 , 創(chuàng)建了 Flutter Module 工程 ;

本篇博客開始創(chuàng)建 Android 工程 , 并將兩個工程進行關(guān)聯(lián) ;

Flutter 混合開發(fā)集成步驟 :

• ① 在 Android Studio 中創(chuàng)建 Flutter Module ;
• ② 為 Native 應(yīng)用添加 Flutter Module 依賴 ;
• ③ 在 Native 應(yīng)用 ( Android / iOS 應(yīng)用 ) 中 , 調(diào)用 Flutter Module 模塊 ;
• ④ 編寫 Flutter Module 中的 Dart 代碼 ;
• ⑤ 運行 Flutter 混合應(yīng)用 ;
• ⑥ 項目的 熱重啟 / 重新加載 ;
• ⑦ 調(diào)試 Dart 代碼 ;
• ⑧ 應(yīng)用發(fā)布 ;

一、創(chuàng)建 Android 項目

---

在 Android Studio 中 , 在菜單欄中 , 選擇 " File -> New -> New Project … " 選項 ;

選擇創(chuàng)建 " Empty Activity " ;

這里要特別注意路徑的設(shè)置 ,

Flutter Module 工程的路徑是 : D:\002_Project\002_Android_Learn\flutter_hybrid\flutter_module

Android 工程的路徑是 : D:\002_Project\002_Android_Learn\flutter_hybrid\flutter_native

上面兩個工程的路徑都在 D:\002_Project\002_Android_Learn\flutter_hybrid 目錄下 ;

Android 應(yīng)用創(chuàng)建完成 :

Android 工程 與 Flutter Module 工程 , 都在同一個目錄中 ;

二、關(guān)聯(lián) Android 工程與 Flutter Module 工程

---

Android 工程的路徑 與 Flutter Module 工程路徑 , 否符合如下要求 :

• Flutter Module 工程的路徑是 : D:\002_Project\002_Android_Learn\flutter_hybrid\flutter_module
• Android 工程的路徑是 : D:\002_Project\002_Android_Learn\flutter_hybrid\flutter_native
• 上面兩個工程的路徑都在 D:\002_Project\002_Android_Learn\flutter_hybrid 目錄下 ;

1、配置 Flutter Module工程

在 Android 工程的 settings.gradle 進行如下配置 : 這樣配置后 , Flutter 工程就會被編譯成一個 Android Library Module , 名稱是 flutter ;

rootProject.name = "flutter_native" include ':app' setBinding(new Binding([gradle: this])) evaluate(new File(settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy' )) include ':flutter_module' project(':flutter_module').projectDir = new File('../flutter_module')

2、配置 build.gradle

在 Android Module 下的 build.gradle 中 :

① 配置最低支持版本 minSdkVersion 16+ , 因為 Flutter 最低支持版本是 16 ;

// Flutter 最低支持版本是 16 minSdkVersion 18

② 添加工程依賴 :

// 在 settings.gradle 中配置的腳本 , 會自動關(guān)聯(lián)到 Flutter 模塊 implementation project(':flutter')

完整的配置文件如下 :

plugins {id 'com.android.application' }android {compileSdkVersion 30buildToolsVersion "30.0.3"defaultConfig {applicationId "com.example.flutter_native"// Flutter 最低支持版本是 16minSdkVersion 18targetSdkVersion 30versionCode 1versionName "1.0"testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'}}compileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8} }dependencies {implementation 'androidx.appcompat:appcompat:1.3.1'implementation 'com.google.android.material:material:1.4.0'implementation 'androidx.constraintlayout:constraintlayout:2.1.0'testImplementation 'junit:junit:4.+'androidTestImplementation 'androidx.test.ext:junit:1.1.3'androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'// 在 settings.gradle 中配置的腳本 , 會自動關(guān)聯(lián)到 Flutter 模塊implementation project(':flutter') }

3、配置 AndroidManifest.xml

將 io.flutter.embedding.android.FlutterActivity 配置到 AndroidManifest.xml 清單文件中 ;

<activityandroid:name="io.flutter.embedding.android.FlutterActivity"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize" />

完整配置文件如下 :

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.flutter_native"><applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/Theme.Flutter_native"><activity android:name=".MainActivity"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activityandroid:name="io.flutter.embedding.android.FlutterActivity"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize" /></application></manifest>

三、Activity 中嵌入 FlutterFragment 頁面

---

在 Activity 中 , 將 Flutter 頁面作為 Fragment , 嵌入到 Activity 中 ;

findViewById(R.id.flutter1).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {FragmentTransaction fragmentTransaction =getSupportFragmentManager().beginTransaction();// 創(chuàng)建 FlutterFragmentfragmentTransaction.replace(R.id.frame, FlutterFragment.createDefault());fragmentTransaction.commit();} });

執(zhí)行結(jié)果 :

四、Activity 中啟動 FlutterActivity 頁面

---

將 Flutter 頁面當(dāng)做一個新的 Activity 啟動 ;

findViewById(R.id.flutter2).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent = FlutterActivity.withNewEngine().initialRoute("Android 啟動 FlutterActivity").build(MainActivity.this);//intent.putExtra("initParams", "Android 中 Activity 啟動 Flutter");startActivity(intent);} });

執(zhí)行結(jié)果 : 點擊 方式二 按鈕 , 彈出 FlutterActivity ;

五、完整代碼示例

---

這里只貼出主界面完整代碼 , 具體的配置參數(shù) , 查看 GitHub 或者 CSDN 源碼快照 ;

1、Android 主界面代碼示例

package com.example.flutter_native;import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.FragmentTransaction;import android.content.Intent; import android.os.Bundle; import android.view.View;import io.flutter.embedding.android.FlutterActivity; import io.flutter.embedding.android.FlutterFragment;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);findViewById(R.id.flutter1).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {FragmentTransaction fragmentTransaction =getSupportFragmentManager().beginTransaction();// 創(chuàng)建 FlutterFragmentfragmentTransaction.replace(R.id.frame, FlutterFragment.createDefault());fragmentTransaction.commit();}});findViewById(R.id.flutter2).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent = FlutterActivity.withNewEngine().initialRoute("Android 啟動 FlutterActivity").build(MainActivity.this);//intent.putExtra("initParams", "Android 中 Activity 啟動 Flutter");startActivity(intent);}});} }

2、Flutter 完整代碼示例

import 'package:flutter/material.dart'; import 'dart:ui';void main() => runApp(/// 該構(gòu)造方法中傳入從 Android 中傳遞來的參數(shù)MyApp(initParams: window.defaultRouteName,) );class MyApp extends StatelessWidget {/// 這是從 Android 中傳遞來的參數(shù)final String initParams;/// 構(gòu)造方法 , 獲取從 Android 中傳遞來的參數(shù)const MyApp({Key? key, required this.initParams}):super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: initParams),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headline4,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }

四、相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰(zhàn)電子書 : https://book.flutterchina.club/chapter1/
• Dart 語言練習(xí)網(wǎng)站 : https://dartpad.dartlang.org/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

  • Flutter Module 工程 : https://github.com/han1202012/flutter_module
  • Android 應(yīng)用 : https://github.com/han1202012/flutter_native
  • 注意 : 上面兩個工程要放在同一個目錄中 , 否則編譯不通過 ;

• 博客源碼快照 : https://download.csdn.net/download/han1202012/21670919 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。