Android flutter aar混合开发 flutter java混合开发

文章目录

• 搭建混合开发环境

• 建立Android项目
• 建立Flutter项目
• 导入Flutter模块
• View 方式显示 Flutter 页面
• Fragment 方式显示 Flutter 页面

搭建混合开发环境

这是给学过 Flutter，但是没学过 Android 开发的人看的。

建立Android项目

1. 打开Android Studio，点击新建Android项目
2. 选择相对应的项目，本例选的是 Basic Activity
3. 填写项目名称：Android_Demo，语言选Java(kotlin不会)，Minimum API level 必须选择 API 15 以上，不选Use androidx.* artifacts，点击 Finish 完成

建立Flutter项目

1. 在 Android Studio 中 点击 File -> New -> New Flutter Project…
2. 选择 Flutter Module(看不见往下拉)，然后 next
3. 填写 Flutter 项目名称：flutter_demo，选择Flutter SDK 路径，项目路径要跟Android项目一样，点击 next
4. Company domain 要填入跟 Android项目一样的(不一样的我没试过)，不选 Use androidx.* artifacts，点击 Finish 完成。
   
   注意：创建完 Flutter 项目会有个提示框，问是在当前窗口，还是在新窗口展示项目，选 new Window。

导入Flutter模块

1. 在 Android_Demo/settings.gradle 中填入如下代码，并保存

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

1. 同时，代码上方会弹出同步提示，点击 Sync Now
2. 等 sync 完成，settings.gradle 中会多出 2 行代码，并会出现 sync 失败（windows系统才会有）
   
   解决方法：把 ‘\f’ 改成 ‘/f’ 或 ‘\f’，再点击上方的 Try Again。就 sync 成功了。
   
   这时 在 Android 项目中 就能看见 Flutter 项目了
3. 在Android_Demo/app/build.gradle文件中的 android 中填入

compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
}

1. 在 dependencies 中填入

implementation project(':flutter')

1. 点击上方的 Sync Now

View 方式显示 Flutter 页面

1. 编辑 Android_Demo / app / src / main / java / com.example.android_demo 下的 MainActivity.java 文件添加如下代码

//...省略代码
import io.flutter.facade.Flutter;  // new
import android.widget.FrameLayout; // new
// import io.flutter.view.FlutterView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //...省略代码
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
                onLoadFlutter(view); // new
            }
        });
    }
	// 用 view 方式显示 Flutter 页面
    public void onLoadFlutter(View view) {
        View flutterView = Flutter.createView(this, getLifecycle(), "route1"); //route1 为 flutter 的路由名
        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 800);
        layoutParams.topMargin = 100;
        addContentView(flutterView, layoutParams);

		// 这样也行
		// final FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route1"); //route1 为 flutter 的路由名
        // final FrameLayout layout = (FrameLayout) findViewById(R.id.flutter_container);
        // layout.addView(flutterView);
    }
	//...省略代码
}

1. 如图所示：
   
   保存后，运行。点击下面的按钮，会在屏幕上方显示出 Flutter 页面

Fragment 方式显示 Flutter 页面

1. 把上面的 onLoadFlutter 方法替换为如下代码。

import android.support.v4.app.FragmentTransaction; //引入库

public void onLoadFlutter(View view) {
    FragmentTransaction transaction= getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.someContainer,Flutter.createFragment("route1"));
    transaction.commit();
}

在content_main.xml中添加个CardView(其它Container都行)，并把id设置成 someContainer，然后在设置一下layout(布局)既可。

运行图如下