Flutter插件开发---iOS篇_flutter ios处理完application(_:open:options:)代理后再给插件处

Flutter的愿景是一般的开发者只需要开发Flutter代码就能实现跨平台的应用，官方提供了一些插件，也有很多可以可以直接拿来使用的第三方插件。

但是现实是现实，例如当遇到定制化的功能时，编写插件是不可避免的。譬如我们有一个自定义协议的蓝牙功能，这个功能在Flutter中就不可能直接拿来使用了，需要编写插件让Flutter进行调用。本文我们将来看看Flutter插件是如何实现的。

前言

本文我们用Flutter来仿写网易云音乐的播放页面的功能，其中音乐的播放，音乐的暂停，快进，音乐的时长获取，音乐播放的进度等功能我们需要用原生代码编写插件来实现。

提示：本文用音乐播放器的插件只是为了提供一个编写Flutter插件的思路和方法，当需要自己编写插件的时候可以方便的来实现。播放音视频的Flutter插件已经有一些优秀的三方库已经实现了。

说明：

1. 由于是音频播放，我制作GIF的时候没法体现音乐元素，所以音乐只能我自己独自欣赏了，哈哈~~
2. 本文先只介绍iOS的插件制作，下篇文章我们再来介绍Android的插件制作。

架构概览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pHbXg5gX-1620631043776)(https://flutter.dev/images/PlatformChannels.png)]

我们从上面的官方架构图可以看出，Flutter和Native代码是通过MethodChannel进行通信的。

Flutter端向iOS端发送消息

Flutter端的代码

• 创建一个播放器类AudioPlayer, 然后定义为单例模式

class AudioPlayer {
// 单例
  factory AudioPlayer() => _getInstance();
  static AudioPlayer get instance => _getInstance();
  static AudioPlayer _instance;
  AudioPlayer._internal() {}

  static AudioPlayer _getInstance() {
    if (_instance == null) {
      _instance = new AudioPlayer._internal();
    }
    return _instance;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 创建播放器的MethodChannel

class AudioPlayer {
    static final channel = const MethodChannel("netmusic.com/audio_player");
}
1
2
3

MethodChannel名字要有意义，其组成遵循"域名"+"/"+“功能”，随意写就显得不够专业。

• 通过MethodChannel的invokeMethod实现播放音乐

/// 播放
  Future<int> play() async {
    final result = await channel.invokeMethod("play", {'url': audioUrl});
    return result ?? 0;
  }
1
2
3
4
5

1. play就是方法名，{'url': audioUrl}就是参数
2. invokeMethod是异步的，所以返回值需要用Future包裹。

• 通过MethodChannel的invokeMethod实现暂停音乐

/// 暂停
Future<int> pause() async {
    final result = await channel.invokeMethod("pause", {'url': audioUrl});
    return result ?? 0;
}
1
2
3
4
5

• 通过MethodChannel的invokeMethod实现继续播放音乐

/// 继续播放
Future<int> resume() async {
    final result = await channel.invokeMethod("resume", {'url': audioUrl});
    return result ?? 0;
}
1
2
3
4
5

• 通过MethodChannel的invokeMethod实现拖动播放位置

/// 拖动播放位置
Future<int> seek(int time) async {
    final result = await channel.invokeMethod("seek", {
      'position': time,
    });
    return result ?? 0;
}
1
2
3
4
5
6
7

iOS端的代码

前提：需要用Xcode打开iOS项目，这是开始编写的基础。

• 创建一个播放器类PlayerWrapper

class PlayerWrapper: NSObject {
    
    var vc: FlutterViewController
    var channel: FlutterMethodChannel
    var player: AVPlayer?
    
}
1
2
3
4
5
6
7

• 在AppDelegate中初始化PlayerWrapper,并将FlutterViewController作为初始化参数。

@objc class AppDelegate: FlutterAppDelegate {
    
    // 持有播放器
    var playerWrapper: PlayerWrapper?
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        
        // 初始化播放器
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        playerWrapper = PlayerWrapper(vc: controller)
        
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1. FlutterAppDelegate的根视图就是一个FlutterViewController，这个我们在以前的文章中有介绍；
2. FlutterViewController中有一个FlutterBinaryMessenger，创建FlutterMethodChannel时需要，所以将其传入PlayerWrapper。

• 创建播放器的FlutterMethodChannel

class PlayerWrapper: NSObject {
    init(vc: FlutterViewController) {
        self.vc = vc
        channel = FlutterMethodChannel(name: "netmusic.com/audio_player", binaryMessenger: vc.binaryMessenger)
        super.init()
    }
}
1
2
3
4
5
6
7

1. name的值必须和Flutter中的对应，否则是没法通信的；
2. binaryMessenger就使用FlutterViewController的FlutterBinaryMessenger，前面提到过。

• 接收Flutter端的调用，然后回调Flutter端播放进度和结果等。

由于是被动接收，所以可以想象的实现是注册一个回调函数，接收Flutter端的调用方法和参数。

init(vc: FlutterViewController) {
    //...
    channel.setMethodCallHandler(handleFlutterMessage);
}

// 从Flutter传过来的方法
public func handleFlutterMessage(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    // 1. 获取方法名和参数
    let method = call.method
    let args = call.arguments as? [String: Any]
        
    if method == "play" {
        // 2.1 确保有url参数
        guard let url = args?["url"] as! String? else {
            result(0)
            return
        }
        player?.pause()
        // 2.2 确保有url参数正确
        guard let audioURL = URL.init(string: url) else {
            result(0)
            return
        }
        // 2.3 根据url初始化播放内容，然后开始进行播放
        let asset = AVAsset.init(url: audioURL)
        let item = AVPlayerItem.init(asset: asset);
        player = AVPlayer(playerItem: item);
        player?.play();
        
        // 2.4 定时检测播放进度    
        player?.addPeriodicTimeObserver(forInterval: CMTimeMake(value: 1, timescale: 1), queue: nil, using: { [weak self] (time) in
            // *********回调Flutter当前播放进度*********
            self?.channel.invokeMethod("onPosition", arguments: ["value": time.value / Int64(time.timescale)])
            })
            
        keyVakueObservation?.invalidate()
        // 2.5 监测播放状态
        keyVakueObservation = item.observe(\AVPlayerItem.status) { [weak self] (playerItem, change) in
            let status = playerItem.status
            if status == .readyToPlay {
                // *********回调Flutter当前播放内容的总长度*********
                if let time = self?.player?.currentItem?.asset.duration {
                    self?.channel.invokeMethod("onDuration", arguments: ["value": time.value / Int64(time.timescale)])
            }
        } else if status == .failed {
            // *********回调Flutter当前播放出现错误*********
            self?.channel.invokeMethod("onError", arguments: ["value": "pley failed"])
            }
        }
        
        // 2.6 监测播放完成
        notificationObservation = NotificationCenter.default.addObserver(
            forName: NSNotification.Name.AVPlayerItemDidPlayToEndTime,
            object: item,**
            queue: nil
        ) {
            [weak self] (notification) in
            self?.channel.invokeMethod("onComplete", arguments: [])
        }**
            
        result(1)
            
    } else if method == "pause" || method == "stop" {
        // 3 暂停
        player?.pause()
        result(1)
    } else if method == "resume" {
        // 4 继续播放
        player?.play()
        result(1)
    } else if method == "seek" {
        
        guard let position = args?["position"] as! Int? else {
            result(0)
            return
        }
        // 4 拖动到某处进行播放
        let seekTime: CMTime = CMTimeMake(value: Int64(position), timescale: 1)
        player?.seek(to: seekTime);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

1. handleFlutterMessage这个回调函数有两个参数：FlutterMethodCall接收Flutter传过来的方法名method和参数arguments, FlutterResult可以返回调用的结果，例如result(1)就给Flutter返回了1这个结果。
2. 获取到FlutterMethodCall的方法名和参数后就可以进行处理了，我们以play为例：

• 根据url初始化播放内容，然后开始进行播放；
• 通过player.addPeriodicTimeObserver方法检测播放进度，然后通过FlutterMethodChannel的invokeMethod方法传递当前的进度给Flutter端，方法名是onPosition,参数是当前进度；
• 后面还有一列逻辑：例如监听播放状态，监听播放完成等。

目前为止，iOS端的代码完成了。接下来就是Flutter端接收iOS端的方法和参数了。

Flutter端接收iOS端发送的消息

iOS端向Flutter端发送了onPosition(当前播放进度),onComplete(播放完成),onDuration(当前歌曲的总长度)和onError(播放出现错误)等几个方法调用。

• Flutter端注册回调

AudioPlayer._internal() {
    channel.setMethodCallHandler(nativePlatformCallHandler);
}

/// Native主动调用的方法
Future<void> nativePlatformCallHandler(MethodCall call) async {
    try {
      // 获取参数
      final callArgs = call.arguments as Map<dynamic, dynamic>;
      print('nativePlatformCallHandler call ${call.method} $callArgs');
      switch (call.method) {
        case 'onPosition':
          final time = callArgs['value'] as int;
          _currentPlayTime = time;
          _currentPlayTimeController.add(_currentPlayTime);
          break;
        case 'onComplete':
          this.updatePlayerState(PlayerState.COMPLETED);
          break;
        case 'onDuration':
          final time = callArgs['value'] as int;
          _totalPlayTime = time;
          _totalPlayTimeController.add(totalPlayTime);
          break;
        case 'onError':
          final error = callArgs['value'] as String;
          this.updatePlayerState(PlayerState.STOPPED);
          _errorController.add(error);
          break;
      }
    } catch (ex) {
      print('Unexpected error: $ex');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

1. 注册回调也是使用setMethodCallHandler方法,MethodCall对应的也包含方法名和参数；
2. 获取到对应的数据后Flutter就可进行数据的展示了。

• Flutter端对数据的更新

我们以onDuration(当前歌曲的总长度)为例进行介绍。

class AudioPlayer {
    
    // 1. 记录下总时间
    int _totalPlayTime = 0;
    int get totalPlayTime => _totalPlayTime;
    
    // 2. 代表歌曲时长的流
    final StreamController<int> _totalPlayTimeController =
      StreamController<int>.broadcast();
    Stream<int> get onTotalTimeChanged => _totalPlayTimeController.stream;
    
    Future<void> nativePlatformCallHandler(MethodCall call) async {
        try {
          final callArgs = call.arguments as Map<dynamic, dynamic>;
          print('nativePlatformCallHandler call ${call.method} $callArgs');
          switch (call.method) {
            // 3. 记录下总时间和推送更新
            case 'onDuration':
              final time = callArgs['value'] as int;
              _totalPlayTime = time;
              _totalPlayTimeController.add(totalPlayTime);
              break;
          }
        } catch (ex) {
          print('Unexpected error: $ex');
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1. _totalPlayTime记录下总播放时长；
2. _totalPlayTimeController是总播放时长的流，当调用add方法时，onTotalTimeChanged的监听者就能收到新的值；

• StreamBuilder监听流的数据

StreamBuilder(
    initialData: "00:00",
    stream: AudioPlayer().onTotalTimeChanged,
    builder: (context, snapshot) {
        if (!snapshot.hasData)
            return Text(
                "00:00",
                style: TextStyle(color: Colors.white70),
            );
        return Text(
            AudioPlayer().totalPlayTimeStr,
            style: TextStyle(color: Colors.white70),
            );
        },
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

监听AudioPlayer().onTotalTimeChanged的数据变化，然后最新的值展示在Text上。

代码

audio_player.dart

import 'dart:async';

import 'package:flutter/services.dart';
import 'package:netmusic_flutter/music_item.dart';

class AudioPlayer {
  // 定义一个MethodChannel
  static final channel = const MethodChannel("netmusic.com/audio_player");

  // 单例
  factory AudioPlayer() => _getInstance();
  static AudioPlayer get instance => _getInstance();
  static AudioPlayer _instance;
  AudioPlayer._internal() {
    // 初始化
    channel.setMethodCallHandler(nativePlatformCallHandler);
  }

  static AudioPlayer _getInstance() {
    if (_instance == null) {
      _instance = new AudioPlayer._internal();
    }
    return _instance;
  }

  // 播放状态
  PlayerState _playerState = PlayerState.STOPPED;
  PlayerState get playerState => _playerState;

  // 时间
  int _totalPlayTime = 0;
  int _currentPlayTime = 0;
  int get totalPlayTime => _totalPlayTime;
  int get currentPlayTime => _currentPlayTime;
  String get totalPlayTimeStr => formatTime(_totalPlayTime);
  String get currentPlayTimeStr => formatTime(_currentPlayTime);

  // 歌曲
  MusicItem _item;
  set item(MusicItem item) {
    _item = item;
  }

  String get audioUrl {
    return _item != null
        ? "https://music.163.com/song/media/outer/url?id=${_item.id}.mp3"
        : "";
  }

  Future<int> togglePlay() async {
    if (_playerState == PlayerState.PLAYING) {
      return pause();
    } else {
      return play();
    }
  }

  /// 播放
  Future<int> play() async {
    if (_item == null) return 0;
    // 如果是停止状态
    if (_playerState == PlayerState.STOPPED ||
        _playerState == PlayerState.COMPLETED) {
      // 更新状态
      this.updatePlayerState(PlayerState.PLAYING);
      final result = await channel.invokeMethod("play", {'url': audioUrl});
      return result ?? 0;
    } else if (_playerState == PlayerState.PAUSED) {
      return resume();
    }
    return 0;
  }

  /// 继续播放
  Future<int> resume() async {
    // 更新状态
    this.updatePlayerState(PlayerState.PLAYING);
    final result = await channel.invokeMethod("resume", {'url': audioUrl});
    return result ?? 0;
  }

  /// 暂停
  Future<int> pause() async {
    // 更新状态
    this.updatePlayerState(PlayerState.PAUSED);
    final result = await channel.invokeMethod("pause", {'url': audioUrl});
    return result ?? 0;
  }

  /// 停止
  Future<int> stop() async {
    // 更新状态
    this.updatePlayerState(PlayerState.STOPPED);
    final result = await channel.invokeMethod("stop");
    return result ?? 0;
  }

  /// 播放
  Future<int> seek(int time) async {
    // 更新状态
    this.updatePlayerState(PlayerState.PLAYING);
    final result = await channel.invokeMethod("seek", {
      'position': time,
    });
    return result ?? 0;
  }

  /// Native主动调用的方法
  Future<void> nativePlatformCallHandler(MethodCall call) async {
    try {
      // 获取参数
      final callArgs = call.arguments as Map<dynamic, dynamic>;
      print('nativePlatformCallHandler call ${call.method} $callArgs');
      switch (call.method) {
        case 'onPosition':
          final time = callArgs['value'] as int;
          _currentPlayTime = time;
          _currentPlayTimeController.add(_currentPlayTime);
          break;
        case 'onComplete':
          this.updatePlayerState(PlayerState.COMPLETED);
          break;
        case 'onDuration':
          final time = callArgs['value'] as int;
          _totalPlayTime = time;
          _totalPlayTimeController.add(totalPlayTime);
          break;
        case 'onError':
          final error = callArgs['value'] as String;
          this.updatePlayerState(PlayerState.STOPPED);
          _errorController.add(error);
          break;
      }
    } catch (ex) {
      print('Unexpected error: $ex');
    }
  }

  // 播放状态
  final StreamController<PlayerState> _stateController =
      StreamController<PlayerState>.broadcast();
  Stream<PlayerState> get onPlayerStateChanged => _stateController.stream;

  // Video的时长和当前位置时间变化
  final StreamController<int> _totalPlayTimeController =
      StreamController<int>.broadcast();
  Stream<int> get onTotalTimeChanged => _totalPlayTimeController.stream;

  final StreamController<int> _currentPlayTimeController =
      StreamController<int>.broadcast();
  Stream<int> get onCurrentTimeChanged => _currentPlayTimeController.stream;

  // 发生错误
  final StreamController<String> _errorController = StreamController<String>();
  Stream<String> get onError => _errorController.stream;

  // 更新播放状态
  void updatePlayerState(PlayerState state, {bool stream = true}) {
    _playerState = state;
    if (stream) {
      _stateController.add(state);
    }
  }

  // 这里需要关闭流
  void dispose() {
    _stateController.close();
    _currentPlayTimeController.close();
    _totalPlayTimeController.close();
    _errorController.close();
  }

  // 格式化时间
  String formatTime(int time) {
    int min = (time ~/ 60);
    int sec = time % 60;
    String minStr = min < 10 ? "0$min" : "$min";
    String secStr = sec < 10 ? "0$sec" : "$sec";
    return "$minStr:$secStr";
  }
}

/// 播放状态
enum PlayerState {
  STOPPED,
  PLAYING,
  PAUSED,
  COMPLETED,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
    var playerWrapper: PlayerWrapper?
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        
        // 播放器
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        playerWrapper = PlayerWrapper(vc: controller)
        
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

PlayerWrapper.swift

import Foundation
import Flutter
import AVKit
import CoreMedia

class PlayerWrapper: NSObject {
    
    var vc: FlutterViewController
    var channel: FlutterMethodChannel
    var player: AVPlayer?
    var keyVakueObservation: NSKeyValueObservation?
    var notificationObservation: NSObjectProtocol?
    
    init(vc: FlutterViewController) {
        self.vc = vc
        channel = FlutterMethodChannel(name: "netmusic.com/audio_player", binaryMessenger: vc.binaryMessenger)
        super.init()
        channel.setMethodCallHandler(handleFlutterMessage);
    }
    
    // 从Flutter传过来的方法
    public func handleFlutterMessage(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        let method = call.method
        let args = call.arguments as? [String: Any]
        
        if method == "play" {
            guard let url = args?["url"] as! String? else {
                NSLog("无播放地址")
                result(0)
                return
            }
            player?.pause()
            guard let audioURL = URL.init(string: url) else {
                NSLog("播放地址错误")
                result(0)
                return
            }
            let asset = AVAsset.init(url: audioURL)
            let item = AVPlayerItem.init(asset: asset);
            player = AVPlayer(playerItem: item);
            player?.play();
            
            player?.addPeriodicTimeObserver(forInterval: CMTimeMake(value: 1, timescale: 1), queue: nil, using: { [weak self] (time) in
                self?.channel.invokeMethod("onPosition", arguments: ["value": time.value / Int64(time.timescale)])
            })
            
            keyVakueObservation?.invalidate()
            keyVakueObservation = item.observe(\AVPlayerItem.status) { [weak self] (playerItem, change) in
                let status = playerItem.status
                if status == .readyToPlay {
                    if let time = self?.player?.currentItem?.asset.duration {
                        self?.channel.invokeMethod("onDuration", arguments: ["value": time.value / Int64(time.timescale)])
                    }
                } else if status == .failed {
                    self?.channel.invokeMethod("onError", arguments: ["value": "pley failed"])
                }
            }
            
            notificationObservation = NotificationCenter.default.addObserver(
                forName: NSNotification.Name.AVPlayerItemDidPlayToEndTime,
                object: item,
                queue: nil
            ) {
                [weak self] (notification) in
                self?.channel.invokeMethod("onComplete", arguments: [])
            }
            
            result(1)
            
        } else if method == "pause" || method == "stop" {
            player?.pause()
            result(1)
        } else if method == "resume" {
            player?.play()
            result(1)
        } else if method == "seek" {
            guard let position = args?["position"] as! Int? else {
                NSLog("无播放时间")
                result(0)
                return
            }
            let seekTime: CMTime = CMTimeMake(value: Int64(position), timescale: 1)
            player?.seek(to: seekTime);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

有没有感觉编写插件其实也很简单，附上所有Flutter代码，下篇介绍Android的插件编写。