安卓和Flutter混合开发（原生调用flutter）

一，安卓和Flutter相关联

首先app内的gradle引入flutter库

implementation project(':flutter')

引入java8代码

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

然后settings.gradle中加入以下代码 flutter_module 是下面将要创建的fluttermoudle的名字，以后会提到

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

好 现在安卓代码的初始工作完成了，下面来创建fluttermodel
选择File->New->New Flutter Project 然后会出现以下情况,选择Flutter Module

16110198.png

Project name中的flutter_module还记得嘛 这里如果改成别的名字 上面也需要修改

1611020040(1).png

注意
Project location 这里的flutter moudle的路径一定要和咱们的安卓项目同级目录,就是下边这样

1611020696(1).png

好了 现在切换到android代码 中 点击Sync Now 现在已经安卓项目中已经成功引入新建的flutter_moule了 两者关联成功，就像下边这样子

1611056081(1).png

二，安卓和Fluttert通讯

首先，把下边的代码复制到app的清单文件中，FlutterActivity是flutter提供的一个用于原生加载flutterView的一个页面

<activity
            android:name="io.flutter.embedding.android.FlutterActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:theme="@style/AppTheme"
            android:windowSoftInputMode="adjustResize" />

现在已经可以跳转了，先来个最简单的跳转，在自己的MainActivity放上这个代码

Button btn;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       
       btn = findViewById(R.id.btn);
       btn.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
              //最简单的跳转flutter页面，并不能指定跳转的页面，如果手机不好 还有可能会卡顿（卡不卡顿要在正式包才能测试出来，debug包永远会卡顿）
               startActivity(FlutterActivity.createDefaultIntent(MainActivity.this));

           }
       });
   }

看一下效果

fe69bc8a5771fc3d748aa00d03f20ce.jpg

点击按钮，跳转到下面的页面

da4aca45892ece163d02cc180ee483d.jpg

好吧，有人会说了，我如果想指定的flutter页面怎么办呢，卡顿的的问题怎么解决呢？往下看！！！

下面我们原生代码的意思是跳转到一个routerPage的flutter页面，并在跳转之前进行了预加载

//创建flutter发动机
                FlutterEngine flutterEngine = new FlutterEngine(MainActivity.this);
                //指定想要跳转的flutter页面 这里要和下图对应上 记住他
                flutterEngine.getNavigationChannel().setInitialRoute("routerPage");
                flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());

                //这里做一个缓存 可以在适当的地方执行他 比如MyApp里 或者未跳转flutterr之前 在flutter页面执行前预加载
                FlutterEngineCache flutterEngineCache = FlutterEngineCache.getInstance();
                //缓存可以缓存好多个 以不同的的id区分
                flutterEngineCache.put("default_engine_id", flutterEngine);
                
                //上面的代码一般在执行跳转操作之前调用 这样可以预加载页面 是的跳转的时候速度加快
                
                //跳转页面
                startActivity(FlutterActivity.withCachedEngine("default_engine_id").build(MainActivity.this));

emmm 当然 我们需要在flutter代码中做一些操作，最少要创建一个routerPage页面对吧

class MyRouterPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyRouterState();
  }
}

class MyRouterState extends State<MyRouterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是routerPage'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Text('routerPage'),
      ),
    );
  }
}

看，MyRouterPage 简单吧，然后关键的一步来了，创建一个函数

Widget getDefaultRouter() {
  String router = window.defaultRouteName;//还记得我们上边的routerPage嘛， 这个东西就是我们传进来的字符串，我们可以根据这个字符串来决定加载那个flutter页面
  if (router == 'routerPage') {
    return MyRouterPage();
  } else {
    return MyHomePage();
  }
}

然后我们用这个方法代替home

1611057963(1).png

完成了，我们现在点击按钮就可以跳转到MyRouterPage ，运行一下，看看效果

ae4a5ca28743930c11f27dec023ecfa.jpg

好！下班！周末再给写一篇原生和flutter的交互通信