Flutter与Native的混合开发之--Andriod项目调用Flutter项目页面-初探

handyxuefeng
1,146 阅读4分钟

     目前Flutter比较流行，对于目前前端同学来说，，学习Flutter的来说，相对来说不是那么难，学习曲线还好，而相对于有Android或者IOS开发经验的同学来说，可能会更容易一点，如果是光学些Flutter和Dart方面的东西来说，可以按照其官方提供的api来进行学习即可，这都是入门Flutter的必要途径，当学习Flutter一段时间之后，就会遇到Flutter如何与Android和Ios进行混合式开发，也就是说Flutter项目和andriod、ios做的app项目，它们之间的页面如何相互调用，这里我们就只对Android端如何来调用Flutter的项目进行一个入门介绍，有两原生端开发经验的同学，针对这个那可能就是秒懂了。

   在实现这两者之间的调用之前，我们先准备两个项目(Android 端 和Flutter 端)

一、准备工作，这里先上界面

1. Flutter 原生项目界面

2. Android原生项目界面


二、在Andriod项目中调用Flutter页面步骤
对于之前没有进行过android项目开发的H5小伙伴来说，这个是难点，这里我们就整理一下，现在社区都提供了先关资料，android页面中调用Flutter页面的步骤：
1. 先创建一个FlutterHybrid目录

2. 在FlutterHybrid目录中通过以下命令进行创建一个flutter_module的flutter原生项目，运行界面就是上面的

flutter create -t module flutter_module

通过命令创建flutter_module 项目,创建好后，flutter_module的目录结构如下：  


3.利用AndroidStudio创建一个android 的app项目



点击Finish后，等待Android项目的加载，创建好的界面为：


4.修改/Users/xxxx/flutter_hybrid/FlutterHybridAndroid/settings.gradle，在改文件添加如下内容：

setBinding(new Binding([gradle: this]))
evaluate(new File(
    settingsDir.parentFile,
    'flutter_module/.android/include_flutter.groovy'
))


5.修改/Users/xxx/flutter_hybrid/FlutterHybridAndroid/app/build.gradle 文件，在该文件添加如下配置：

(1) JAVA8编译器

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

 (2) 在dependencies里面添加Flutter的依赖项

implementation project(':flutter')

(3) 添加完后，整体配置项展示位：


6.完成以上步骤，运行app，看是否能够调起android的模拟器


7.出现下面的截图，表示android模拟器被成功启动


8.Android项目对Flutter项目的调用方式可以通过以下两种方式来实现

  • 使用Flutter.createView API 的方式
  • 使用FlutterFragment 的方式

9. 修改Android项目中的java中添加对Flutter模块调用的代码，在android原生项目的/FlutterHybridAndroid/app/src/main/res/layout/activity_main.xml中添加元素

<Button 
android:id="@+id/test"    
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:text="在android项目中调用Flutter页面并传递参数1"
/>
<Button 
android:id="@+id/test2"   
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:text="在android项目中调用Flutter页面并传递参数2"
/>

10.在刚创建的android项目 的MainActivity.java 文件中添加入添加如下代码：

//1.使用FlutterFragment的方式，在页面上添加test按钮的点击事件
final String initParams = "这是来自android项目中的参数";
findViewById(R.id.test).setOnClickListener(        
    new View.OnClickListener() {            
       @Override         
       public void onClick(View v) {                          
         FragmentTransaction tx = getSupportFragmentManager().beginTransaction();                
            tx.replace(R.id.someContainer,Flutter.createFragment(initParams));                
            tx.commit();            
        }        
    });
//2.使用Flutter.createView API的方式，在页面上添加test按钮的点击事件
findViewById(R.id.test2).setOnClickListener(
        new View.OnClickListener() { 
        @Override            
        public void onClick(View v) {
          View flutterView = Flutter.createView( 
            MainActivity.this,
            getLifecycle(),
            initParams                
          );                
         FrameLayout.LayoutParams  layout  = new FrameLayout.LayoutParams(600,800);                
           layout.leftMargin = 100;                
           layout.rightMargin = 200;                
           layout.topMargin = 300;                
           addContentView(flutterView,layout);            
         }        
 });

11.MainActivity.java的内容如下：


12.如果AndroidStudio 升级到3.0以上版本时候，这个时候项目如果从原来的Android升级或者迁移到AndroidX时，原来Android中的一些包名会和升级或者迁移到AndroidX时一些包名冲突，这个时候需要解决包名冲突的问题，要不然项目无法运行，解决步骤如下：

（1）利用androidStudio的migrate功能，截图如下：


（2）修改项目中/FlutterHybridAndroid/gradle.properties 这个路径下的这个文件，修改内容
在该文件中添加如下代码：

android.useAndroidX=true
android.enableJetifier=true


(3）修改完这些之后，点击运行按钮或者上面的Sync Now，让系统重新同步一次

13.项目在运行过程中，android项目中在之前导入的Flutter包就失效了，就要使用迁移到AndroidX后，Flutter包都要使用androidX中Flutter包，这里列出项目中两个因包名冲突的文件，并要做如下修改
(1) 修改/flutter_module/.android/Flutter/src/main/java/io/flutter/facade/FlutterFragment.java的这个文件，修改导入的包名：

//import android.support.annotation.NonNull;
//import android.support.v4.app.Fragment;
import androidx.annotation.NonNull;
import androidx.fragment.app.*;


(2) 修改/flutter_module/.android/Flutter/src/main/java/io/flutter/facade/Flutter.java的这个
文件，修改导入的包名：

/*
import android.arch.lifecycle.Lifecycle;
import android.arch.lifecycle.LifecycleObserver;
import android.arch.lifecycle.OnLifecycleEvent;
*/
import androidx.lifecycle.*;


14.在flutter_module项目中添加接受Android项目中传递过来的参数，方法为使用Flutter中window对象，要想使用window对象，修改/flutter_module/lib/main.dart这个main.dart文件，首先在main.dart中导入ui包

import 'dart:ui';


16 修改完这些之后，重新运行项目，效果图如下：
（1）在android项目传递参数的方式如下图：


（2）在Flutter页面接受传递过来的参数如下图,能看到下面表示Android 项目 调用Flutter项目成功了。



总结，心动不如行动，看都是问题，做才是答案，只有经过亲自动手实践才能明白其流程是怎么样的，给大家一起分享一下，希望能给大家带来一点帮助，避免采坑。



avatar
文章
阅读
粉丝