Flutter learning -31- Native page for Flutter calls

• When developing Flutter, we usually invoke native features such as camera and photo albums. Let’s learn more about flutter.

1. Flutter calls album

We added a gesture to the previous wechat project profile picture

Used in the flutterchannelTo interact, we define oneMethodChannel

final MethodChannel _methodChannel = const MethodChannel('mine_page/method');
Copy the code

Called in onTap of the gesture

_methodChannel.invokeListMethod('pictureMethod');
Copy the code

We open the iOS project, and remember to add permissions in the PList file, otherwise the audit will not pass.

Note that info.plist is used here

Add it in the appDelegate

let vc:FlutterViewController = self.window.rootViewController as! FlutterViewController;//fluttevc

      

 let metodChannel:FlutterMethodChannel =  FlutterMethodChannel.init(name: "mine_page/method", binaryMessenger: vc.binaryMessenger);

      
 metodChannel.setMethodCallHandler {(call:FlutterMethodCall, result: @escaping FlutterResult) in

    if (call.method = = "pictureMethod") {let pickVC: UIImagePickerController = UIImagePickerController.init(a); vc.present(pickVC, animated:true, completion: nil); }}Copy the code

Clicking on the profile picture invokes the native album

Here we need to stop the project and run it again, which will be XcodeBuild. If we move the native code, we need to recompile the native side.

• We want to pass on raw data or images

We set vc and metodChannel global

@objc class AppDelegate: FlutterAppDelegate ,UIImagePickerControllerDelegate.UINavigationControllerDelegate{

    var vc:FlutterViewController? ;var metodChannel:FlutterMethodChannel? ;override func application(

    _ application: UIApplication.didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?

  ) -> Bool {

      

      vc =  self.window.rootViewController as? FlutterViewController;//fluttevc

      metodChannel =  FlutterMethodChannel.init(name: "mine_page/method", binaryMessenger: self.vc!.binaryMessenger);

      metodChannel?.setMethodCallHandler {(call:FlutterMethodCall, result: @escaping FlutterResult) in

          if (call.method = = "pictureMethod") {let pickVC: UIImagePickerController = UIImagePickerController.init(a); pickVC.delegate= self;

              self.vc?.present(pickVC, animated: true, completion: nil); }}GeneratedPluginRegistrant.register(with: self)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)


  }
    
    func imagePickerController(_ picker: UIImagePickerController.didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        

        print(info); }}Copy the code

We print the picture information, what we need is UIImagePickerControllerImageURL

We take it down throughinvokeMethodSend it out, so we’re converting the URL to a string

let Str:NSURL = info[UIImagePickerController.InfoKey(rawValue: "UIImagePickerControllerImageURL")] as! NSURL;
            self.metodChannel?.invokeMethod("imagePath", arguments: Str.absoluteString);
Copy the code

We receive in flutter

late File _avatarFile;
final MethodChannel _methodChannel = const MethodChannel('mine_page/method');
@override
void initState() {
  super.initState();
  _methodChannel.setMethodCallHandler((call) async{
    if (call.method == 'imagePath') {
      String imagePath = call.arguments.toString().substring(7);
      setState(() {
        _avatarFile = File(imagePath);
      });
    }else{
      return null; }}); }Copy the code

We make a judgment about whether there is one

image: _avatarFile == null
    ? AssetImage('images/ wechat emotix.png ')
    : FileImage(_avatarFile),
Copy the code

It says here that our type is differentAssetImageandFileImageLet’s wrap it up outside

 image: _avatarFile == null
 ?const DecorationImage( image:
      AssetImage('images/ wechat emotix.png '), fit: BoxFit.cover) : DecorationImage(image: FileImage(_avatarFile!) , fit: BoxFit.cover)Copy the code

I’m gonna go ahead and select my avatar

Here is the main introduction to reduce the use of iOS native album, Android online a lot of introduction.

2 image_picker

We can use image_pickerThe plug-inWe call, we can choose album or camera

void seletImage() async{

  XFile? file = await ImagePicker().pickImage(source: ImageSource.gallery);
  if( file ! =null) {
    setState(() {
      _avatarFile = File(file.path);
    });
  }else{
    setState(() {
      _avatarFile = null; }); }}Copy the code

There’s a problem with writing it this way, and when we cancel, we just empty the previous selection. Our intention is to leave the path empty if the selection fails, but we can leave the path empty if the selection fails.