Android 集成 Flutter 进行混合开发

时间 2020-11-18 标签 java android web windows app dom ide svg 布局 gradle

文章目录

搭建混合开发环境

搭建混合开发环境

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

创建Android项目

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

创建Flutter项目

在 Android Studio 中点击 File -> New -> New Flutter Project…
选择 Flutter Module(看不见往下拉)，而后 next
填写 Flutter 项目名称：flutter_demo，选择Flutter SDK 路径，项目路径要跟Android项目同样，点击 next
Company domain 要填入跟 Android项目同样的(不同的我没试过)，不选 Use androidx.* artifacts，点击 Finish 完成。

注意：建立完 Flutter 项目会有个提示框，问是在当前窗口，仍是在新窗口展现项目，选 new Window。

导入Flutter模块

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

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

同时，代码上方会弹出同步提示，点击 Sync Now

等 sync 完成，settings.gradle 中会多出 2 行代码，并会出现 sync 失败（windows系统才会有）

解决方法：把 ‘\f’ 改为 ‘/f’ 或 ‘\f’，再点击上方的 Try Again。就 sync 成功了。

这时在 Android 项目中就能看见 Flutter 项目了
在Android_Demo/app/build.gradle文件中的 android 中填入
```
compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
}
```
在 dependencies 中填入
```
implementation project(':flutter')
```
点击上方的 Sync Now

View 方式显示 Flutter 页面

编辑 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);
    }
	//...省略代码
}

如图所示：

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

Fragment 方式显示 Flutter 页面

把上面的 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(布局)既可。

运行图以下
android