Flutter禁用截图插件disable_screenshots的使用

Flutter禁用截图插件disable_screenshots的使用

在Flutter开发中,有时我们需要对App的内容进行管控,避免敏感信息暴露,所以开发了这个插件。此插件提供三个禁用截屏的相关功能,分别是:截屏监控行为全局添加水印禁用截屏(仅支持Android)

Getting Started

Add dependency

在你的pubspec.yaml文件中添加依赖:

dependencies:
  disable_screenshots: 0.0.1 #latest version

功能演示

demo_gif

使用样例

import 'dart:math';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:disable_screenshots/disable_screenshots.dart';

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: RootApp());
  }
}

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

class _RootAppState extends State<RootApp> {
  // 初始化插件
  DisableScreenshots _plugin = DisableScreenshots();
  // 监控截屏行为的stream
  late StreamSubscription<void> _screenshotsSubscription;
  int _screenshotsCount = 0;
  bool _disableScreenshots = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _screenshotsSubscription = _plugin.onScreenShots.listen((event) {
      // 监控到截屏行为会回调到这里
      setState(() {
        _screenshotsCount++;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('禁止截屏'),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 100), // 增加间距
          Center(
            child: Text("监控到截屏次数:$_screenshotsCount"),
          ),
          Center(
            child: Text(_disableScreenshots ? "禁止截屏状态" : "允许截屏状态"),
          ),
          RaisedButton(
              onPressed: () {
                // 添加默认样式的水印
                _plugin.addWatermark(context, "默认水印",
                    rowCount: 4, columnCount: 8);
              },
              child: Text("添加默认水印")),
          RaisedButton(
              onPressed: () {
                // 添加自定义widget当做水印
                _plugin.addCustomWatermark(context,
                    Watarmark(rowCount: 3, columnCount: 10, text: "自定义水印"));
              },
              child: Text("添加自定义水印")),
          RaisedButton(
              onPressed: () {
                // 移除水印
                _plugin.removeWatermark();
              },
              child: Text("删除水印")),
          RaisedButton(
              onPressed: () async {
                bool flag = !_disableScreenshots;
                // 禁用或允许截屏(只支持iOS)
                await _plugin.disableScreenshots(flag);
                setState(() {
                  _disableScreenshots = flag;
                });
              },
              child: Text(_disableScreenshots
                  ? "允许截屏(仅android适用)"
                  : "禁用截屏(仅android适用)")),
          RaisedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (_) => Scaffold(
                          appBar: AppBar(
                            title: Text("我是新页面"),
                          ),
                          body: Center(child: Text("new page")),
                        )));
              },
              child: Text("进入新页面"))
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    // 取消截屏监控可以调用cancel()方法
    if (_screenshotsSubscription != null) {
      _screenshotsSubscription.cancel();
    }
  }
}

class Watarmark extends StatelessWidget {
  final int rowCount;
  final int columnCount;
  final String text;

  const Watarmark(
      {Key? key,
      required this.rowCount,
      required this.columnCount,
      required this.text})
      : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return IgnorePointer(
      child: Container(
          child: Column(
        children: creatColumnWidgets(),
      )),
    );
  }

  List<Widget> creatRowWdiges() {
    List<Widget> list = [];
    for (var i = 0; i < rowCount; i++) {
      final widget = Expanded(
          child: Center(
              child: Transform.rotate(
        angle: pi / 10,
        child: Text(
          text,
          style: TextStyle(
              color: Color(0x08000000),
              fontSize: 18,
              decoration: TextDecoration.none),
        ),
      )));
      list.add(widget);
    }
    return list;
  }

  List<Widget> creatColumnWidgets() {
    List<Widget> list = [];
    for (var i = 0; i < columnCount; i++) {
      final widget = Expanded(
          child: Row(
        children: creatRowWdiges(),
      ));
      list.add(widget);
    }
    return list;
  }
}

更多关于Flutter禁用截图插件disable_screenshots的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter禁用截图插件disable_screenshots的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,我可以为你提供一个关于如何在Flutter项目中使用disable_screenshots插件来禁用截图的示例代码。disable_screenshots是一个用于防止用户在应用中截图的Flutter插件。以下是具体的实现步骤和代码示例:

1. 添加依赖

首先,在你的pubspec.yaml文件中添加disable_screenshots依赖:

dependencies:
  flutter:
    sdk: flutter
  disable_screenshots: ^0.0.x  # 请检查最新版本号

2. 安装依赖

运行以下命令来安装依赖:

flutter pub get

3. 导入并使用插件

在你的Flutter项目中,找到你想要禁用截图功能的页面或组件,然后导入并使用disable_screenshots插件。

以下是一个示例,展示了如何在一个页面中使用这个插件:

import 'package:flutter/material.dart';
import 'package:disable_screenshots/disable_screenshots.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Disable Screenshots Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DisableScreenshotsPage(),
    );
  }
}

class DisableScreenshotsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Disable Screenshots Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Taking screenshots is disabled on this page.',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Navigate to another page or perform some action
              },
              child: Text('Do Something'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Wrap the entire widget tree of this page with DisableScreenshots widget
    return DisableScreenshots(
      child: Scaffold(
        // ... your existing scaffold code ...
      ),
    );
  }
}

注意:由于build方法在DisableScreenshotsPage类中被重复定义了,这是不正确的。我们应该只定义一个build方法,并在其中使用DisableScreenshots包装整个页面。下面是修正后的代码:

import 'package:flutter/material.dart';
import 'package:disable_screenshots/disable_screenshots.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Disable Screenshots Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DisableScreenshotsPage(),
    );
  }
}

class DisableScreenshotsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DisableScreenshots(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Disable Screenshots Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Taking screenshots is disabled on this page.',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // Navigate to another page or perform some action
                },
                child: Text('Do Something'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们使用了DisableScreenshots组件来包装整个Scaffold,从而在这个页面上禁用了截图功能。

4. 运行应用

现在你可以运行你的Flutter应用,并尝试在启用了DisableScreenshots的页面上截图,你会发现截图功能被禁用了。

flutter run

希望这个示例能帮助你在Flutter项目中成功使用disable_screenshots插件来禁用截图功能。

回到顶部