在已有Android项目中使用Flutter

﹏ヽ暗。殇╰゛Y 2021-10-01 12:18 432阅读 0赞

###### 实现效果，在已存在的android项目中接入flutter，即android调用开启flutter页面（使用android打开flutter的指定页面），flutter调用原生android方法 ######

#### 步骤 ####

###### android开启flutter页面实现: ######

1.创建一个android项目，并添加一个按钮，来作为已存在的项目

![11172442-2a9e28fc9053193a.png][]

image.png

键入项目信息，并创建，等待创建完成

![11172442-9fcc0d73e20fa7fa.png][]

image.png

修改项目布局文件，/res/layout/activity\_main/xml,加一个输入框，一个按钮

![11172442-0d9a6993f01036bf.png][]

image.png

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <EditText
            android:hint="请输入路由名称"
            android:id="@+id/etInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <Button
            android:textAllCaps="false"
            android:id="@+id/btn_open"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="打开flutter页面"
             />
    
    </LinearLayout>

好了，一个原始项目就新建好了，现在**开始引入flutter**  
2.接入flutter

*  修改/app/build.gradle，添加支持的cpu架构，因为目前flutter只支持'armeabi-v7a', 'arm64-v8a'两个cpu架构，为了防止其他架构的设备安装了这个app不能正常使用，所以需要添加cpu架构

apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 28
        defaultConfig {
            applicationId "com.elitetyc.nativeimportflutter"
            minSdkVersion 19
            targetSdkVersion 28
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
            //这里是新加的内容
            ndk {
                abiFilters 'armeabi-v7a', 'arm64-v8a'
            }
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            }
        }
    //    这里也是新加的
        compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
        }
    }
    
    
    
    dependencies {
        implementation project(':flutter')
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        implementation 'com.android.support:appcompat-v7:28.+'
        implementation 'com.android.support.constraint:constraint-layout:1.1.3'
        testImplementation 'junit:junit:4.12'
        androidTestImplementation 'com.android.support.test:runner:1.0.2'
        androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    
    
    }

*  新建flutter project 选择flutter\_model
    
      
    
    
    ![11172442-c9a75c0c7e75848f.png][]
    
    image.png
 *  导入刚才新建的flutter\_model
    
      
    
    
    ![11172442-8ad7e56f6c9848e7.png][]
    
    image.png

![11172442-a04dae384d6ceccd.png][]

image.png

*  坐等完成，刚才的操作，其实就是完成了以下的步骤，跟其他教程都差不多  
    1.新建flutter\_module  
    2.修改app/build.gradle,三个地方，一个设置cpu架构，一个设置编译版本为1.8，一个在dependency中导入flutter项目  
    3.修改settings.gradle，新加了如下代码
    
        setBinding(new Binding([gradle: this]))
          evaluate(new File(
            settingsDir.parentFile,
          'flutter_testmodule/.android/include_flutter.groovy'
          ))
    
    ###### 注意：new Binding可能会报错，ide会提示你导包，但是你不用导包，直接sync同步一下就好了，这个地方我卡了很久，不管你导入什么包，都不对，不用导入！！！！！！，直接运动同步 ######

3.使用代码打开flutter页面

*  修改Mainfest文件，新加以下代码

*  修改flutter中的main.dart代码，主要是根据传过来的路由名称打开指定的页面

void main() => runApp(getRouter(window.defaultRouteName));
    
    Widget getRouter(defaultRouteName) {
      switch(defaultRouteName){
        case "main":
          return MyApp();
        default:
          return Container(
            child: Center(
              child: Text("这是默认页面"),
            ),
          );
      }
    }

*  修改adnroid项目中MainActivity的代码

package com.elitetyc.nativeimportflutter;
    
    import android.os.Bundle;
    import android.widget.EditText;
    
    import androidx.appcompat.app.AppCompatActivity;
    import io.flutter.embedding.android.FlutterActivity;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            EditText viewById = findViewById(R.id.etInput);
    //        新加代码
            findViewById(R.id.btn_open).setOnClickListener(
    //                v -> startActivity(FlutterActivity.createDefaultIntent(MainActivity.this))
                    v -> startActivity(FlutterActivity
                            .withNewEngine()
                            .initialRoute(viewById.getText().toString())
                            .build(MainActivity.this)
                    )
            );
        }
    }

*  然后打包apk运行到手机。
    
      
    
    
    ![11172442-22c2a9d831eeb530.gif][]
    
    下载.gif

[11172442-2a9e28fc9053193a.png]: /images/20210825/79664b5570d84a178483780a1fe00a2f.png
[11172442-9fcc0d73e20fa7fa.png]: /images/20210825/ee21ca35e04444f79962a94fe2fe3701.png
[11172442-0d9a6993f01036bf.png]: /images/20210825/b8362cd701c44f9c98bea75f57627771.png
[11172442-c9a75c0c7e75848f.png]: /images/20210825/1d89035a545c41119100b5fc2b2ee1d9.png
[11172442-8ad7e56f6c9848e7.png]: /images/20210825/33c16f3d89aa4e71899486a29e852238.png
[11172442-a04dae384d6ceccd.png]: /images/20210825/05efbf0c581c4988b348ee2cab2bcc9b.png
[11172442-22c2a9d831eeb530.gif]: /images/20210825/31bcee616fc64590984e06e82d4433b7.png