Flutter来电界面集成插件custom_flutter_callkit_incoming的使用

A Flutter plugin to show incoming call in your Flutter app(Custom for Android/Callkit for iOS).

Build Status

Buy Me A Coffee

⭐ 特性

• 显示来电
• 开始呼出电话
• 自定义安卓/呼叫套件（Callkit）的UI
• 示例使用Pushkit/VoIP进行iOS集成

iOS: 仅在真机上工作（模拟器不支持Callkit框架）

🚀 安装

1. 安装包

运行以下命令：

flutter pub add flutter_callkit_incoming

在pubspec.yaml中添加依赖：

dependencies:
  flutter_callkit_incoming: any

2. 配置项目

Android

在AndroidManifest.xml中添加权限：

<manifest...>
    ...
    <!-- 
        用于从互联网加载图像
    -->
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

iOS

在Info.plist中配置：

<key>UIBackgroundModes</key>
<array>
    <string>processing</string>
    <string>remote-notification</string>
    <string>voip</string>
</array>

3. 使用

导入

import 'package:flutter_callkit_incoming/flutter_callkit_incoming.dart';

接收来电

this._currentUuid = _uuid.v4();
var params = <String, dynamic>{
  'id': _currentUuid,
  'nameCaller': 'Hien Nguyen',
  'appName': 'Callkit',
  'avatar': 'https://i.pravatar.cc/100',
  'handle': '0123456789',
  'type': 0,
  'textAccept': 'Accept',
  'textDecline': 'Decline',
  'textMissedCall': 'Missed call',
  'textCallback': 'Call back',
  'duration': 30000,
  'extra': <String, dynamic>{'userId': '1a2b3c4d'},
  'headers': <String, dynamic>{'apiKey': 'Abc@123!', 'platform': 'flutter'},
  'android': <String, dynamic>{
    'isCustomNotification': true,
    'isShowLogo': false,
    'isShowCallback': false,
    'isShowMissedCallNotification': true,
    'ringtonePath': 'system_ringtone_default',
    'backgroundColor': '#0955fa',
    'backgroundUrl': 'https://i.pravatar.cc/500',
    'actionColor': '#4CAF50'
  },
  'ios': <String, dynamic>{
    'iconName': 'CallKitLogo',
    'handleType': 'generic',
    'supportsVideo': true,
    'maximumCallGroups': 2,
    'maximumCallsPerCallGroup': 1,
    'audioSessionMode': 'default',
    'audioSessionActive': true,
    'audioSessionPreferredSampleRate': 44100.0,
    'audioSessionPreferredIOBufferDuration': 0.005,
    'supportsDTMF': true,
    'supportsHolding': true,
    'supportsGrouping': false,
    'supportsUngrouping': false,
    'ringtonePath': 'system_ringtone_default'
  }
};
await FlutterCallkitIncoming.showCallkitIncoming(params);

显示未接来电通知

this._currentUuid = _uuid.v4();
var params = <String, dynamic>{
  'id': this._currentUuid,
  'nameCaller': 'Hien Nguyen',
  'handle': '0123456789',
  'type': 1,
  'textMissedCall': 'Missed call',
  'textCallback': 'Call back',
  'extra': <String, dynamic>{'userId': '1a2b3c4d'},
};
await FlutterCallkitIncoming.showMissCallNotification(params);

开始呼出电话

this._currentUuid = _uuid.v4();
var params = <String, dynamic>{
  'id': this._currentUuid,
  'nameCaller': 'Hien Nguyen',
  'handle': '0123456789',
  'type': 1,
  'extra': <String, dynamic>{'userId': '1a2b3c4d'},
  'ios': <String, dynamic>{'handleType': 'generic'}
};
await FlutterCallkitIncoming.startCall(params);

结束来电

var params = <String, dynamic>{'id': this._currentUuid};
await FlutterCallkitIncoming.endCall(params);

结束所有来电

await FlutterCallkitIncoming.endAllCalls();

获取活跃通话

await FlutterCallkitIncoming.activeCalls();

输出：

[{"id": "8BAA2B26-47AD-42C1-9197-1D75F662DF78", ...}]

获取设备VoIP推送令牌

await FlutterCallkitIncoming.getDevicePushTokenVoIP();

输出：

<d6a77ca80c5f09f87f353cdd328ec8d7d34e92eb108d046c91906f27f54949cd>

确保在AppDelegate.swift中使用以下代码保存设备令牌：

func pushRegistry(_ registry: PKPushRegistry, didUpdate credentials: PKPushCredentials, for type: PKPushType) {
    print(credentials.token)
    let deviceToken = credentials.token.map { String(format: "%02x", $0) }.joined()
    // Save deviceToken to your server
    SwiftFlutterCallkitIncomingPlugin.sharedInstance?.setDevicePushTokenVoIP(deviceToken)
}
    
func pushRegistry(_ registry: PKPushRegistry, didInvalidatePushTokenFor type: PKPushType) {
    print("didInvalidatePushTokenFor")
    SwiftFlutterCallkitIncomingPlugin.sharedInstance?.setDevicePushTokenVoIP("")
}

监听事件

FlutterCallkitIncoming.onEvent.listen((event) {
  switch (event!.name) {
    case CallEvent.ACTION_CALL_INCOMING:
      // TODO: 收到来电
      break;
    case CallEvent.ACTION_CALL_START:
      // TODO: 开始呼出电话
      // TODO: 在Flutter中显示呼叫屏幕
      break;
    case CallEvent.ACTION_CALL_ACCEPT:
      // TODO: 接受来电
      // TODO: 在Flutter中显示呼叫屏幕
      break;
    case CallEvent.ACTION_CALL_DECLINE:
      // TODO: 拒绝来电
      break;
    case CallEvent.ACTION_CALL_ENDED:
      // TODO: 结束来电
      break;
    case CallEvent.ACTION_CALL_TIMEOUT:
      // TODO: 来电超时
      break;
    case CallEvent.ACTION_CALL_CALLBACK:
      // TODO: 仅安卓 - 点击未接来电通知中的“回拨”按钮
      break;
    case CallEvent.ACTION_CALL_TOGGLE_HOLD:
      // TODO: 仅iOS
      break;
    case CallEvent.ACTION_CALL_TOGGLE_MUTE:
      // TODO: 仅iOS
      break;
    case CallEvent.ACTION_CALL_TOGGLE_DMTF:
      // TODO: 仅iOS
      break;
    case CallEvent.ACTION_CALL_TOGGLE_GROUP:
      // TODO: 仅iOS
      break;
    case CallEvent.ACTION_CALL_TOGGLE_AUDIO_SESSION:
      // TODO: 仅iOS
      break;
    case CallEvent.ACTION_DID_UPDATE_DEVICE_PUSH_TOKEN_VOIP:
      // TODO: 仅iOS
      break;
  }
});

从原生代码调用（iOS PushKit）

// Swift
var info = [String: Any?]()
info["id"] = "44d915e1-5ff4-4bed-bf13-c423048ec97a"
info["nameCaller"] = "Hien Nguyen"
info["handle"] = "0123456789"
info["type"] = 1
//... 设置更多数据
SwiftFlutterCallkitIncomingPlugin.sharedInstance?.showCallkitIncoming(flutter_callkit_incoming.Data(args: info), fromPushKit: true)

// 或者
let data = flutter_callkit_incoming.Data(id: "44d915e1-5ff4-4bed-bf13-c423048ec97a", nameCaller: "Hien Nguyen", handle: "0123456789", type: 0)
data.nameCaller = "Johnny"
data.extra = ["user": "abc@123", "platform": "ios"]
//... 设置更多数据
SwiftFlutterCallkitIncomingPlugin.sharedInstance?.showCallkitIncoming(data, fromPushKit: true)

// Objective-C
#if __has_include(<flutter_callkit_incoming/flutter_callkit_incoming-Swift.h>)
#import <flutter_callkit_incoming/flutter_callkit_incoming-Swift.h>
#else
#import "flutter_callkit_incoming-Swift.h"
#endif

Data * data = [[Data alloc]initWithId:@"44d915e1-5ff4-4bed-bf13-c423048ec97a" nameCaller:@"Hien Nguyen" handle:@"0123456789" type:1];
[data setNameCaller:@"Johnny"];
[data setExtra:@{ @"userId" : @"HelloXXXX", @"key2" : @"value2"}];
//... 设置更多数据
[SwiftFlutterCallkitIncomingPlugin.sharedInstance showCallkitIncoming:data fromPushKit:YES];

// 从原生代码发送自定义事件
SwiftFlutterCallkitIncomingPlugin.sharedInstance?.sendEventCustom("customEvent", body: ["customKey": "customValue"])

属性

Android

iOS

源代码

请查看GitHub仓库：

• https://github.com/hiennguyen92/flutter_callkit_incoming
• Example

6. Pushkit - 接收VoIP并从终止状态唤醒应用（仅限iOS）

请检查PUSHKIT.md设置Pushkit。

7. 待办事项

💡 示例

示例说明：

图片

iOS(锁屏)	iOS(全屏)	iOS(提醒)
Android(锁屏) - 音频	Android(提醒) - 音频	Android(锁屏) - 视频
Android(提醒) - 视频	isCustomNotification: false

完整示例代码：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_callkit_incoming_example/app_router.dart';
import 'package:flutter_callkit_incoming_example/navigation_service.dart';
import 'dart:async';
import 'dart:convert';
import 'package:uuid/uuid.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_callkit_incoming/flutter_callkit_incoming.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Handling a background message: ${message.messageId}");
  showCallkitIncoming(Uuid().v4());
}

Future<void> showCallkitIncoming(String uuid) async {
  var params = <String, dynamic>{
    'id': uuid,
    'nameCaller': 'Hien Nguyen',
    'appName': 'Callkit',
    'avatar': 'https://i.pravatar.cc/100',
    'handle': '0123456789',
    'type': 0,
    'duration': 30000,
    'textAccept': 'Accept',
    'textDecline': 'Decline',
    'textMissedCall': 'Missed call',
    'textCallback': 'Call back',
    'extra': <String, dynamic>{'userId': '1a2b3c4d'},
    'headers': <String, dynamic>{'apiKey': 'Abc@123!', 'platform': 'flutter'},
    'android': <String, dynamic>{
      'isCustomNotification': true,
      'isShowLogo': false,
      'isShowCallback': false,
      'ringtonePath': 'system_ringtone_default',
      'backgroundColor': '#0955fa',
      'background': 'https://i.pravatar.cc/500',
      'actionColor': '#4CAF50'
    },
    'ios': <String, dynamic>{
      'iconName': 'CallKitLogo',
      'handleType': '',
      'supportsVideo': true,
      'maximumCallGroups': 2,
      'maximumCallsPerCallGroup': 1,
      'audioSessionMode': 'default',
      'audioSessionActive': true,
      'audioSessionPreferredSampleRate': 44100.0,
      'audioSessionPreferredIOBufferDuration': 0.005,
      'supportsDTMF': true,
      'supportsHolding': true,
      'supportsGrouping': false,
      'supportsUngrouping': false,
      'ringtonePath': 'system_ringtone_default'
    }
  };
  await FlutterCallkitIncoming.showCallkitIncoming(params);
}

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  var _uuid;
  var _currentUuid;

  late final FirebaseMessaging _firebaseMessaging;

  [@override](/user/override)
  void initState() {
    super.initState();
    _uuid = Uuid();
    initFirebase();
    WidgetsBinding.instance?.addObserver(this);
    // Check call when open app from terminated
    checkAndNavigationCallingPage();
  }

  getCurrentCall() async {
    // check current call from pushkit if possible
    var calls = await FlutterCallkitIncoming.activeCalls();
    if (calls is List) {
      if (calls.isNotEmpty) {
        print('DATA: $calls');
        this._currentUuid = calls[0]['id'];
        return calls[0];
      } else {
        this._currentUuid = "";
        return null;
      }
    }
  }

  checkAndNavigationCallingPage() async {
    var currentCall = await getCurrentCall();
    if (currentCall != null) {
      NavigationService.instance
          .pushNamedIfNotCurrent(AppRoute.callingPage, args: currentCall);
    }
  }

  [@override](/user/override)
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    print(state);
    if (state == AppLifecycleState.resumed) {
      // Check call when open app from background
      checkAndNavigationCallingPage();
    }
  }

  [@override](/user/override)
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  initFirebase() async {
    await Firebase.initializeApp();
    _firebaseMessaging = FirebaseMessaging.instance;
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
      print(
          'Message title: ${message.notification?.title}, body: ${message.notification?.body}, data: ${message.data}');
      this._currentUuid = _uuid.v4();
      showCallkitIncoming(this._currentUuid);
    });
    _firebaseMessaging.getToken().then((token) {
      print('Device Token FCM: $token');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      onGenerateRoute: AppRoute.generateRoute,
      initialRoute: AppRoute.homePage,
      navigatorKey: NavigationService.instance.navigationKey,
      navigatorObservers: <NavigatorObserver>[
        NavigationService.instance.routeObserver
      ],
    );
  }

  Future<void> getDevicePushTokenVoIP() async {
    var devicePushTokenVoIP =
        await FlutterCallkitIncoming.getDevicePushTokenVoIP();
    print(devicePushTokenVoIP);
  }
}