Android项目集成flutter模块-原创手记-慕课网

1、创建Android项目

如果你已经有Android项目，可以直接使用。这里我们先创建一个空的android项目来模拟已有的项目，取名叫FlutterHybridAndroid。比如创建的目录为：E:\test\FlutterHybridAndroid

2、创建Flutter模块

进入你的项目同一层目录，假如你的项目是在…path1/path2/yourApp,那么你应该进入到path2目录中。比如创建的目录为：E:\test\flutter_module
android工程和flutter模块创建目录

3、将Flutter模块作为依赖添加到主项目

打开E:\test\FlutterHybridAndroid\app\build.gradle文件，声明以下源兼容性：

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

兼容java1.8

打开E:\test\FlutterHybridAndroid\settings.gradle文件，添加如下代码：

// MyApp/settings.gradle
include ':app'                                     // assumed existing content
setBinding(new Binding([gradle: this]))                                 // new
evaluate(new File(                                                      // new
        settingsDir.parentFile,                                               // new
        'flutter_module/flutter_module/.android/include_flutter.groovy'                          // new
))

注意路径：flutter_module/flutter_module/.android/include_flutter.groovy，相当于flutter的模块目录下面有一个隐藏的.android目录，我们将android工程需要关联此目录中。
点击同步完成后，到你app目录的build.gradle文件把依赖加上：

// MyApp/app/build.gradle
:
dependencies {
  implementation project(':flutter')
  :
}

到此为止，flutter模块就集成到android项目中了。

4、在Java代码中直接调用Flutter模块

android项目中可以直接将Flutter的view添加到Java代码中,如下两种方式：
方式一：通过使用Flutter.createView，我在新创建的工程首页的activity_main.xml添加了点击事件，点击后会弹出一个flutter的view，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="点击我" />

    <RelativeLayout
        android:id="@+id/rl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></RelativeLayout>


</LinearLayout>

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RelativeLayout rl = findViewById(R.id.rl_root_view);
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "route1");
                rl.addView(flutterView);
            }
        });
    }
}

运行效果图如下;
图片描述
方式二：通过flutter创建Fragment的方式，代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


</RelativeLayout>

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
        tx.replace(R.id.rl_root_view, Flutter.createFragment("route1"));
        tx.commit();
    }
}

效果图如下
图片描述
在上面的2种方式中，java代码都传递了一个“route1”，那这个参数在flutter代码中怎么接收呢？
1、在flutter代码中可以通过window.defaultRouteName来获取java传入的参数：

void main() => runApp(_widgetForRoute(window.defaultRouteName));

完整代码如下：
布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="添加route1 view" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="添加route2 view" />

    <RelativeLayout
        android:id="@+id/rl_route1"
        android:layout_width="match_parent"
        android:layout_height="200dp"></RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_route2"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"></RelativeLayout>

</LinearLayout>

java代码

public class MainActivity extends AppCompatActivity {

    RelativeLayout route1View, route2View;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        route1View = findViewById(R.id.rl_route1);
        route2View = findViewById(R.id.rl_route2);
        View flutterView1 = Flutter.createView(this, getLifecycle(), "route1");
        View flutterView2 = Flutter.createView(this, getLifecycle(), "route2");
        findViewById(R.id.btn1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                route1View.addView(flutterView1);
            }
        });

        findViewById(R.id.btn2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                route2View.addView(flutterView2);
            }
        });
    }
}

dart代码

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  print('route = ${route}');
  switch (route) {
    case 'route1':
      return _route1();
    case 'route2':
      return _route2();
    default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
  }
}

Widget _route1() {
  return Container(
    height: 200,
    color: Colors.white,
    child: Text(
      '这个_route1的view',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 24,
        color: Colors.pinkAccent,
      ),
    ),
  );
}

Widget _route2() {
  return Container(
    height: 200,
    color: Colors.white,
    child: Text(
      '这个_route2的view',
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 24, color: Colors.lightGreen),
    ),
  );
}

效果图如下
图片描述
以上方式就可以让android工程显示flutter界面。
官方文档