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();
    }
  
相关推荐
程序员老刘1 小时前
跨平台开发地图 | 2026年6月
flutter·ai编程·客户端
悟空瞎说21 小时前
Flutter 架构详解:新手必懂底层原理
flutter
SoaringHeart1 天前
Flutter最佳实践:IM聊天文字链接自动识别跳转
前端·flutter
恋猫de小郭1 天前
KMP / CMP 鸿蒙版本 Beta 发布,他有什么特别之处?
android·前端·flutter
北极星日淘2 天前
前端 i18n 中日双语交互 + 翻译客服接口联动方案|日系海淘平台中文友好化开发实战
前端·交互
风华圆舞2 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
韩曙亮2 天前
【Flutter】Flutter 组件 ④ ( 组件渲染 的 三棵树理论 | Widget 树 → Element 树 → RenderObject 树 )
flutter·element·widget·renderobject
UXbot2 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
蓝速科技2 天前
蓝速科技 AI 数字人部署与交互实战指南
人工智能·科技·交互
恋猫de小郭2 天前
Android 17 正式版发布,全新 AI 和各种破坏性更新
android·前端·flutter