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

🚀 安装与配置

1. 添加依赖

首先，在pubspec.yaml文件中添加flutter_callkit_incoming依赖：

dependencies:
  flutter_callkit_incoming: any

然后运行命令安装插件：

flutter pub add flutter_callkit_incoming

2. 配置项目

Android配置

在AndroidManifest.xml中添加以下权限和配置：

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

    <application ...>
        <activity ...
            android:name=".MainActivity"
            android:launchMode="singleInstance">
            ...
    </application>
</manifest>

同时，为了防止混淆代码导致问题，请在proguard-rules.pro中添加规则：

-keep class com.hiennv.flutter_callkit_incoming.** { *; }

iOS配置

在Info.plist中添加背景模式支持：

<key>UIBackgroundModes</key>
<array>
    <string>voip</string>
    <string>remote-notification</string>
    <string>processing</string> <!-- 如果需要可以添加 -->
</array>

注意：iOS上仅支持真机调试，模拟器不支持CallKit框架。

⭐ 功能特性

• 显示来电提醒
• 发起拨号
• 自定义Android UI / 使用iOS Callkit
• 支持通过Pushkit/VoIP推送（仅限iOS）

💡 示例代码

下面是一个完整的示例应用程序，展示了如何集成flutter_callkit_incoming插件来处理来电通知：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_callkit_incoming/flutter_callkit_incoming.dart';
import 'package:uuid/uuid.dart';

// 背景消息处理器
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Handling a background message: ${message.messageId}");
  await Firebase.initializeApp(); //确保Firebase已初始化
  showCallkitIncoming(const Uuid().v4());
}

// 展示来电通知
Future<void> showCallkitIncoming(String uuid) async {
  final params = CallKitParams(
    id: uuid,
    nameCaller: 'Hien Nguyen',
    appName: 'Callkit',
    avatar: 'https://i.pravatar.cc/100',
    handle: '0123456789',
    type: 0, // 0 - 音频通话, 1 - 视频通话
    duration: 30000, // 呼叫显示时间(秒)
    textAccept: '接听',
    textDecline: '挂断',
    missedCallNotification: const NotificationParams(
      showNotification: true,
      isShowCallback: true,
      subtitle: '未接来电',
      callbackText: '回拨',
    ),
    extra: <String, dynamic>{'userId': '1a2b3c4d'},
    headers: <String, dynamic>{'apiKey': 'Abc@123!', 'platform': 'flutter'},
    android: const AndroidParams(
      isCustomNotification: true,
      isShowLogo: false,
      ringtonePath: 'system_ringtone_default',
      backgroundColor: '#0955fa',
      backgroundUrl: 'assets/test.png',
      actionColor: '#4CAF50',
      textColor: '#ffffff',
    ),
    ios: const IOSParams(
      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() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  late final Uuid _uuid;
  String? _currentUuid;
  late final FirebaseMessaging _firebaseMessaging;

  @override
  void initState() {
    super.initState();
    _uuid = const Uuid();
    initFirebase();
    WidgetsBinding.instance.addObserver(this);
    checkAndNavigationCallingPage();
  }

  Future<dynamic> getCurrentCall() async {
    var calls = await FlutterCallkitIncoming.activeCalls();
    if (calls is List &amp;&amp; calls.isNotEmpty) {
      print('DATA: $calls');
      _currentUuid = calls[0]['id'];
      return calls[0];
    } else {
      _currentUuid = null;
      return null;
    }
  }

  Future<void> checkAndNavigationCallingPage() async {
    var currentCall = await getCurrentCall();
    if (currentCall != null) {
      // 导航到呼叫页面逻辑
    }
  }

  @override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    if (state == AppLifecycleState.resumed) {
      checkAndNavigationCallingPage();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  Future<void> initFirebase() async {
    await Firebase.initializeApp();
    _firebaseMessaging = FirebaseMessaging.instance;
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
      _currentUuid = _uuid.v4();
      showCallkitIncoming(_currentUuid!);
    });
    _firebaseMessaging.getToken().then((token) {
      print('Device Token FCM: $token');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(title: Text('Home Page')),
        body: Center(child: Text('Hello World')),
      ),
    );
  }

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

此示例演示了如何结合Firebase Cloud Messaging (FCM) 和 flutter_callkit_incoming 插件来处理来电通知。当收到推送消息时，会触发showCallkitIncoming方法，从而展示来电界面。

🔗 参考资料

• GitHub Repository
• Example Code

以上就是关于flutter_callkit_incoming插件的基本用法介绍。如果有任何疑问或遇到问题，欢迎随时提问！