“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

When we use Flutter for project development, we inevitably need to use mixed development scenarios; There are two general types of mixed development:

  • FlutterProjects invoke native functionality; (recommended)
  • Native project embeddingFlutterPage; (Not recommended)

We generally recommend the first one. Embedding a Flutter page in a native project is not recommended because it makes the project heavier. Every Flutter page we embed has a separate Flutter rendering engine inside it.

Flutter call native

To demonstrate how to use Flutter to invoke its native functions, we use the feature of changing your head as an example.

MethodChannel is used in Flutter to send messages

To communicate with native Flutter, we need to use the MethodChannel class. We create a MethodChannel and assign the name attribute to mine_page/changeAvatar:

We need to send a message to the parent via the MethodChannel:

In the Flutter head click event, through _methodChannel. InvokeMapMethod method to send native a changePicture message;

IOS uses the FlutterMethodChannel to receive messages

On the native side, we accordingly need to use the FlutterMethodChannel to receive processing messages:

  • createFlutterMethodChannelName,nameTo work withFluttertheMethodChannelHave the same name;
  • usemethodChannel.setMethodCallHandlerMethods according to thecall.methodTo process different messages

Running results:

It is important to note that method execution may be slightly delayed when first interacting;

Next, we need to return the image selected on the native endpoint to the Flutter and display it on the Flutter interface.

IOS sends data back to Flutter

We set methodChannel as a global variable and then use methodChannel in the proxy callback of the selected image to return the result to Flutter:

In the Flutter through _methodChannel. SetMethodCallHandler to obtain primary data comes back:

Final result:

image_picker

The same function can be achieved with the image_picker plugin for Flutter.

First you need to add the image_picker plug-in to the pubspec.yaml file:

Podfile is automatically generated in the ios directory:

Next, we can use image_picker to replace the avatar;

Image_picker can be used as follows:

We receive the return value directly via ImagePicker, obviously the return value file is not immediately available, so we need to use async and await;

Next, when we run the project, we can see that the native project generates a Podfile due to the image_picker plug-in, so pod Install is automatically executed.

Native directories will change:

End result:

Don’t forget to add permissions to the info.plist file in your iOS project;

A bug with image_picker

Image_picker can’t select the first image.

When we select the first image, the console raises an exception and we need to use try_catch to handle this:

  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; }); }}Copy the code