「这是我参与2022初次更文应战的第6天，活动详情查看：2022初次更文应战」

咱们在运用Flutter进行项目开发的过程中，不可避免的需求运用到混合开发的场景；一般混合开发分为两种：

• Flutter项目调用原生的功用；(引荐)
• 原生项目嵌入Flutter页面；(不引荐)

一般咱们比较引荐第一种，而在原生项目中嵌入Flutter页面的形式并不引荐，由于这样会把项目搞得比较重，咱们嵌入的每一个Flutter页面，都是有一个独立的Flutter烘托引擎在里面的；

Flutter调用原生

咱们以替换头像这个功用为例，来演示一下怎么运用Flutter调用原生的功用；

Flutter中运用MethodChannel发送音讯

在Flutter中想要与原生通信，就需求运用到MethodChannel这个类，咱们创立一个MethodChannel给name特点赋值为mine_page/changeAvatar：

咱们需求经过MethodChannel给原生发音讯：

在Flutter中头像的点击事件里，经过_methodChannel.invokeMapMethod办法给原生发送一个changePicture的音讯；

iOS中运用FlutterMethodChannel接纳音讯

在原生端，相应的，咱们需求运用FlutterMethodChannel来接纳处理音讯：

• 创立FlutterMethodChannel时，姓名name要与Flutter端的MethodChannel的姓名一致；
• 运用methodChannel.setMethodCallHandler办法根据call.method的不同值，处理不同的音讯

运转结果：

需求留意的是，第一次进行交互时，办法履行可能会稍有延迟；

接下来，咱们还需求将原生端选中的图片返回给Flutter，经过Flutter显示在界面上；

iOS给Flutter回传数据

咱们将methodChannel设为大局的变量，然后在选中图片的署理回调中运用methodChannel来给Flutter回传结果：

在Flutter中经过_methodChannel.setMethodCallHandler来获取原生回传的数据：

最终结果：

image_picker

同样的功用，咱们能够经过image_picker这个Flutter插件来完成；

首先需求在pubspec.yaml文件中添加image_picker插件：

之后履行Pub get，履行完毕咱们能够发现，在ios目录下会主动生成Podfile文件：

接下来，咱们就能够运用image_picker替换头像了；

image_picker运用方法如下：

咱们经过ImagePicker直接接纳返回值，很明显返回值file不可能当即得到，所以需求运用async和await；

接下来运转项目，咱们能够看到由于添加了image_picker插件，原生项目生成了Podfile文件，所以在履行的时候，会主动履行pod install操作；

原生目录将会发生变化：

最终作用：

不要忘记在iOS项目中的info.plist文件中添加权限；

image_picker的一个bug

image_picker无法选中第一张图片，目前测试，该bug真机上没有复现：

在咱们选中第一张图片是，控制台报出了异常，这个时候咱们需求运用try_catch来进行处理：

  void _changeAvatar() async {
    try {
      XFile file = await ImagePicker().pickImage(source: ImageSource.gallery) as XFile;
      setState(() {
        _avatarFile = File(file.path);
      });
    } catch (e) {
      print(e.toString());
      setState(() {
        _avatarFile = null;
      });
    }
  }