webview_h5与原生增加权限索取行为交互(Flutter)

应各大应用市场上架要求,增加权限索取行为用户交互弹窗

详细: https://developer.huawei.com/consumer/cn/doc/app/FAQ-faq-05#h1-1698326401789-0

  1. flutter端使用permission_handler申请权限
  2. 注册一个MethodChannel,增加一个函数,提供安卓webview相机/麦克风等权限被触发时回调用到flutter端
bash 复制代码
static const platform = MethodChannel('webview_permission'); 
bash 复制代码
platform.setMethodCallHandler((MethodCall call) async {
	// 处理回调
	switch (call.method) {  
        case 'requestCameraPermission': 
         ...略
         // 回调showPermissionDialog
    }
}
  1. 增加一个通用权限交互弹窗
dart 复制代码
  /// 通用权限弹窗
  /// @permission
  /// @title
  /// @desc
  void showPermissionDialog(Permission permission) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          title: Text(title),
          content: Text(desc),
          actions: <Widget>[
            TextButton(
              child: Text('去授权'),
              onPressed: () {
                Navigator.of(context).pop();
                // 处理权限授予逻辑
                permission.request().then((status) {
                  print(status.isGranted);
              });
              },
            ),
            TextButton(
              child: Text('不'),
              onPressed: () {
                // 处理权限拒绝逻辑
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
  1. 安卓端同样注册MethodChannel
bash 复制代码
import android.content.pm.PackageManager;
import androidx.core.content.ContextCompat;
...略
//
methodChannel4Premission = new MethodChannel(messenger, "webview_permission");
methodChannel4Premission.setMethodCallHandler(this);
  1. webview发起申请权限索取时,判断是否已授权,未授权时通过methodChannel调用flutter弹窗向用户说明权限用途

判断是否已授权麦克风权限

bash 复制代码
if (ContextCompat.checkSelfPermission(WebViewFlutterPlugin.activity, Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
	   methodChannel4Premission.invokeMethod("requestMicroPhonePermission", null);
	 }

判断是否已授权相机权限

bash 复制代码
if (ContextCompat.checkSelfPermission(WebViewFlutterPlugin.activity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
        methodChannel4Premission.invokeMethod("requestCameraPermission", null);
      }
  1. flutter端批量索取权限
bash 复制代码
    // 列出需要请求的权限
    Map<Permission, PermissionStatus> statuses = {
      Permission.camera: await Permission.camera.status,
      Permission.location: await Permission.location.status,
      Permission.microphone: await Permission.microphone.status,
    };
    bool allPermissionsGranted = true;
    for (final entry in statuses.entries) {
      if (entry.value != PermissionStatus.granted) {
        allPermissionsGranted = false;
        break;
      }
    }
    if (allPermissionsGranted) {
      // 所有权限都已授权,调用成功的回调函数
      onSuccess();
    } else {
      // 批量索取权限
      await [
          Permission.camera,
          Permission.location,
          Permission.microphone,
        ].request();
    }
  
相关推荐
兰亭妙微UI设计公司2 小时前
实战总结|兰亭妙微:移动端交互设计十大核心原则
交互
西西学代码2 小时前
尾灯-应用层通信协议(BLE)
flutter
hhzz5 小时前
【OpenCV 入门到精通 04】视频入门与绘图交互:从摄像头到鼠标画笔
人工智能·python·opencv·计算机视觉·音视频·交互
元岳数字人小元5 小时前
数字人交互的用户体验设计与场景交互感受
运维·人工智能·开源·人机交互·交互
王解5 小时前
CL-01_Clap 是什么?—— 智能体的交互新范式
microsoft·交互
恋猫de小郭6 小时前
iPhone Duo 适配详解,需要改变的不止是布局模型
前端·flutter·ios
我就是DaLing呀!9 小时前
flutter + ffmpeg_kit_extended_flutter 大视频合并下载
flutter·ffmpeg·音视频
工业HMI实战笔记1 天前
玩具制造HMI:注塑成型的快速换模与质量监控界面
人工智能·学习·交互·制造
程序员老刘1 天前
Dart Skills CLI 1.0发布,老刘年初的预言兑现了
flutter·ai编程·dart
兰亭妙微UI设计公司1 天前
UI设计外包项目复盘沉淀|兰亭妙微:交互设计复盘,到底要写哪些内容
交互