Flutter用户反馈插件flutter_feedback的使用

功能

• ✅ 可以截取当前页面的屏幕截图。
• ✅ 支持Android和iOS平台。
• ❌ 不支持Web。
• ✅ 提供反馈表单模板。
• ✅ 预览截图。
• ✅ 编辑截图。可以在截图上添加文字和线条。

设置

Android

对于Android平台，此插件需要WRITE_EXTERNAL_STORAGE权限。因此，你需要在AndroidManifest.xml文件中添加该权限，如下所示：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="id.net.nusa.plugin.flutter_feedback_example">

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

</manifest>

iOS

对于iOS平台，此插件需要NSPhotoLibraryUsageDescription权限。因此，你需要在Info.plist文件中添加该权限，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	...
	<key>NSPhotoLibraryUsageDescription</key>
	<string>用于保存截图到相册。</string>
	...
</dict>
</plist>

同时，你需要在Podfile中启用照片权限：

target.build_configurations.each do |config|
  config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
    '$(inherited)',
    
    ## dart: PermissionGroup.calendar
    'PERMISSION_EVENTS=0',

    ## dart: PermissionGroup.reminders
    'PERMISSION_REMINDERS=0',

    ## dart: PermissionGroup.contacts
    'PERMISSION_CONTACTS=0',

    ## dart: PermissionGroup.camera
    'PERMISSION_CAMERA=0',

    ## dart: PermissionGroup.microphone
    'PERMISSION_MICROPHONE=0',

    ## dart: PermissionGroup.speech
    'PERMISSION_SPEECH_RECOGNIZER=0',

    ## dart: PermissionGroup.photos
    'PERMISSION_PHOTOS=1',

    ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
    'PERMISSION_LOCATION=0',

    ## dart: PermissionGroup.notification
    'PERMISSION_NOTIFICATIONS=0',

    ## dart: PermissionGroup.mediaLibrary
    'PERMISSION_MEDIA_LIBRARY=0',

    ## dart: PermissionGroup.sensors
    'PERMISSION_SENSORS=0',

    ## dart: PermissionGroup.bluetooth
    'PERMISSION_BLUETOOTH=0',

    ## dart: PermissionGroup.appTrackingTransparency
    'PERMISSION_APP_TRACKING_TRANSPARENCY=0',

    ## dart: PermissionGroup.criticalAlerts
    'PERMISSION_CRITICAL_ALERTS=0',
  ]
end

使用方法

使用此插件非常简单。你只需调用takeScreenshot(context)函数，并检查返回值以确定是否成功或失败。以下是一个完整的示例：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_feedback/flutter_feedback.dart';

void main() {
  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  final scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      scaffoldMessengerKey: scaffoldMessengerKey,
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  final formFeedbackController = FormFeedbackController();

  var locale = 'en';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter反馈插件'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                final flutterFeedback = FlutterFeedback();
                final result = await flutterFeedback.takeScreenshot(context);
                switch (result!.status) {
                  case Status.success:
                    // 截图成功保存。
                    // 这里是一个例子，如果想导航到预览截图结果的页面。
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (BuildContext context) {
                          return PreviewImagePage(File(result.path!));
                        },
                      ),
                    );
                    break;
                  case Status.denied:
                    _showSnackbBar('权限被拒绝');
                    break;
                  case Status.restricted:
                    _showSnackbBar('权限受限');
                    break;
                  case Status.permanentlyDenied:
                    _showSnackbBar('权限永久拒绝');
                    break;
                  case Status.fileNotFound:
                    _showSnackbBar('截图文件未找到');
                    break;
                  case Status.unknown:
                    _showSnackbBar('未知错误');
                    break;
                }
              },
              child: Text('截屏'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Radio(
                  value: 'en',
                  groupValue: locale,
                  onChanged: (String? value) => setState(() => locale = value ?? 'en'),
                ),
                Text('英语'),
                SizedBox(width: 16),
                Radio(
                  value: 'id',
                  groupValue: locale,
                  onChanged: (String? value) => setState(() => locale = value ?? 'id'),
                ),
                Text('印尼语'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void _showSnackbBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)));
  }
}