【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
文章目录
- 前言
- 一、创建 Android 项目
- 二、关联 Android 工程与 Flutter Module 工程
- 1、配置 Flutter Module工程
- 2、配置 build.gradle
- 3、配置 AndroidManifest.xml
- 三、Activity 中嵌入 FlutterFragment 页面
- 四、Activity 中启动 FlutterActivity 页面
- 五、完整代码示例
- 1、Android 主界面代码示例
- 2、Flutter 完整代码示例
- 四、相关资源
前言
在上一篇博客 【Flutter】Flutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module ) 中 , 创建了 Flutter Module 工程 ;
本篇博客开始创建 Android 工程 , 并将两个工程进行关联 ;
Flutter 混合开发集成步骤 :
- ① 在 Android Studio 中创建 Flutter Module ;
- ② 为 Native 应用添加 Flutter Module 依赖 ;
- ③ 在 Native 应用 ( Android / iOS 应用 ) 中 , 调用 Flutter Module 模块 ;
- ④ 编写 Flutter Module 中的 Dart 代码 ;
- ⑤ 运行 Flutter 混合应用 ;
- ⑥ 项目的 热重启 / 重新加载 ;
- ⑦ 调试 Dart 代码 ;
- ⑧ 应用发布 ;
一、创建 Android 项目
在 Android Studio 中 , 在菜单栏中 , 选择 " File -> New -> New Project … " 选项 ;
选择创建 " Empty Activity " ;
这里要特别注意路径的设置 ,
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 应用创建完成 :
Android 工程 与 Flutter Module 工程 , 都在同一个目录中 ;
二、关联 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 中配置的脚本 , 会自动关联到 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 中配置的脚本 , 会自动关联到 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();// 创建 FlutterFragmentfragmentTransaction.replace(R.id.frame, FlutterFragment.createDefault());fragmentTransaction.commit();}
});
执行结果 :
四、Activity 中启动 FlutterActivity 页面
将 Flutter 页面当做一个新的 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);}
});
执行结果 : 点击 方式二 按钮 , 弹出 FlutterActivity ;
五、完整代码示例
这里只贴出主界面完整代码 , 具体的配置参数 , 查看 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();// 创建 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(/// 该构造方法中传入从 Android 中传递来的参数MyApp(initParams: window.defaultRouteName,)
);class MyApp extends StatelessWidget {/// 这是从 Android 中传递来的参数final String initParams;/// 构造方法 , 获取从 Android 中传递来的参数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.);}
}
四、相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 插件下载地址 : https://pub.dev/packages
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
- GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
- Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
- Dart 语言练习网站 : https://dartpad.dartlang.org/
重要的专题 :
- Flutter 动画参考文档 : https://flutterchina.club/animations/
博客源码下载 :
GitHub 地址 : ( 随博客进度一直更新 , 有可能没有本博客的源码 )
- Flutter Module 工程 : https://github.com/han1202012/flutter_module
- Android 应用 : https://github.com/han1202012/flutter_native
- 注意 : 上面两个工程要放在同一个目录中 , 否则编译不通过 ;
博客源码快照 : https://download.csdn.net/download/han1202012/21670919 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )相关推荐
- 混合开发架构|Android工程集成React Native、Flutter、ReactJs
混合开发架构|Android工程集成React Native.Flutter.ReactJs 架构设计说明 创建安卓原生工程 创建Flutter 集成嵌入原生工程 创建React Native 解决R ...
- android 实现表格横向混动_Flutter混合开发和Android动态更新实践
Flutter混合开发和Android动态更新实践 感谢闲鱼和csdn的文章给的思路: 本篇是实践性文章包含两部分 将Flutter工程编译后的文件集成到Android项目 将Flutter代码热更新 ...
- Flutter混合开发:Android中如何启动Flutter
目录 现有项目中引入Flutter 启动flutter页面 加速启动 启动传参 flutter可以独立完成项目,但是在现有项目情况下最好的方式就是混合开发,逐步过渡.这样就会共存native和flut ...
- 如何用 Flutter 实现混合开发?闲鱼公开源代码实例
2019独角兽企业重金招聘Python工程师标准>>> 具有一定规模的 App 通常有一套成熟通用的基础库,尤其是阿里系 App,一般需要依赖很多体系内的基础库.那么使用 Flutt ...
- 干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索
作者简介 Deway,携程资深工程师,iOS客户端开发,热衷于大前端和动态化技术: Frank,携程高级工程师,关注移动端热门技术,安卓客户端开发. 前言 随着各种多端技术的蓬勃发展,如今的移动端和前 ...
- android webview定位权限,混合开发安Android webview使用内置浏览器定位的权限
具体步骤: 一.添加权限: 二.设置webview.setting WebSettings settings = webView.getSettings(); settings.setGeolocat ...
- Android混合开发-(Android与Web的交互)
在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的JavaSc ...
- 【Flutter】Flutter 混合开发 ( 安卓端向 Flutter 传递数据 | FlutterFragment 数据传递 | FlutterActivity 数据传递 )
文章目录 前言 一.FlutterFragment 数据传递 二.FlutterActivity 数据传递 三.相关资源 前言 在上一篇博客 [Flutter]Flutter 混合开发 ( 关联 An ...
- android调用flutter aar_Flutter原生混合开发
混合开发简介 使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的.因此使用Flutter去统一Andro ...
最新文章
- uvc摄像头代码解析7
- python右对齐 数字_如何在Python中右对齐数值数据?
- JAVA Thread Dumps 三部曲
- Microsoft Build 2016 Day 1 记录
- 测试点2错的来:1033 旧键盘打字 (20分)
- P4764-[CERC2014]Pork barrel【主席树,LCT,最小生成树】
- -code vs 1474 十进制转m进制
- “黑天鹅”,正在改变 AI 落地医疗领域的加速度
- curaengine linux编译,Cura源码在Ubuntu15.04上编译脚本(成功)
- iOS基础 - 控制器
- 4.2 算法之数论 1486 A Funny Game python
- CCF201712-2 游戏
- git手动删除的文件 pul不下来了_Git工作总结
- 软件设计模式与体系结构 期末课后题
- C语言中将二进制转换成十进制
- QGraphicsView使用详解
- java word转html乱码怎么办,poi导出word 乱码 poi word转html 乱码
- 联想y430p黑苹果之自定义屏幕亮度
- 2022年最新美股上市SaaS公司前50名排行榜单
- 数据分析:大数据时代的必备技能之EXCEL