美文网首页
在已有Android项目中使用Flutter

在已有Android项目中使用Flutter

作者: eliteTyc | 来源:发表于2020-02-21 11:53 被阅读0次
实现效果,在已存在的android项目中接入flutter,即android调用开启flutter页面(使用android打开flutter的指定页面),flutter调用原生android方法

步骤

android开启flutter页面实现:

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


image.png

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


image.png
修改项目布局文件,/res/layout/activity_main/xml,加一个输入框,一个按钮
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


    image.png
  • 导入刚才新建的flutter_model


    image.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文件,新加以下代码
<activity
            android:name="io.flutter.embedding.android.FlutterActivity"
            android:theme="@style/AppTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            />
  • 修改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运行到手机。


    下载.gif

相关文章

网友评论

      本文标题:在已有Android项目中使用Flutter

      本文链接:https://www.haomeiwen.com/subject/ryiqqhtx.html