How to Prevent Screenshot and Video Screen Recording in Flutter

There are a variety of reasons why someone might want to prevent screenshots from being taken within their app. For example, a banking app might want to prevent screenshots for security reasons and to protect sensitive financial information. On the other hand, an individual might want to prevent screenshots in order to protect their privacy.

Whatever the reason, it is important to carefully consider the decision to prevent screenshots within an app. This is especially true in the case of apps that handle sensitive information, as the consequences of a security breach could be severe.

Flutter no_screenshot plugin

The no_screenshot plugin for Flutter is a useful tool for developers who want to give their users the ability to turn off, turn on, or toggle the screenshot functionality within their app. This plugin was created and provided by FlutterPlaza. If you’re interested in using the no_screenshot plugin in your own Flutter app, you can find it on the pub.dev package repository and on the GitHub project page. The no_screenshot plugin is open source, so you can also contribute to its development and improvement if you wish. With the no_screenshot plugin, you can give your users more control over their app experience and add an extra layer of security to your app’s data.

Flutter no_screenshot Features 

At this moment there are only three features in this plugin:

• Disables video screen recording and screenshots on Android and iOS
• Enables video screen recording and screenshots on Android and iOS
• Toggle video screen recording screenshots on Android and iOS

Someone might ask, why not disable completely screenshots and screen recording?

With this plugin, you can prevent these actions on certain pages, like private information pages, financial pages, or where you can see your passwords. But still, you will be able to take screenshots of the less sensitive pages in your app and share them with your friends or colleagues.

How to install no_screenshot for your flutter app

First, add no_screenshot into your dependencies in your pubspec.yaml file.

dependencies:
  no_screenshot: ^0.0.1+3

Then you can import the plugin into your dart code.

import 'package:no_screenshot/no_screenshot.dart';

How to use no_screenshot in Flutter

First, declare the _noScreenshot variable

final _noScreenshot = NoScreenshot.instance;

Then you have three options to choose from.

_noScreenshot.toggleScreenshot();
_noScreenshot.screenshotOff();
_noScreenshot.screenshotOn();

For example, if you want to turn off screenshots when the app starts, you can create screenshotsOff() function and call it from your initState() as you see below.

@override
void initState() {
  screenshotsOff();
  super.initState();
}

screenshotsOff() async{
  await _noScreenshot.screenshotOff();
  // print('screenshots Off');
}

You can also allow your app users to decide if they want these features on or off. In this case use buttons. The example is from the project page.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    ElevatedButton(
      child: const Text('Press to toggle screenshot'),
      onPressed: () async {
        final result = await _noScreenshot.toggleScreenshot();
        print(result);
      },
    ),
    ElevatedButton(
      child: const Text('Press to turn off screenshot'),
      onPressed: () async {
        final result = await _noScreenshot.screenshotOff();
        print(result);
      },
    ),
    ElevatedButton(
      child: const Text('Press to turn on screenshot'),
      onPressed: () async {
        final result = await _noScreenshot.screenshotOn();
        print(result);
      },
    ),
  ],
)

If you want to prevent users from taking screenshots or recording your app. You can turn off the screenshot support from the root didChangeAppLifecycleState method.

Below is the original code from the project page.

    class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
    final _noScreenshot = NoScreenshot();

  AppLifecycleState? _notification; 
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
      case AppLifecycleState.resumed, :
        print("app in resumed");
        if(app_secure) _noScreenshot.screenshotOff();
        break;
      case AppLifecycleState.inactive:
        print("app in inactive");
        if(app_secure) _noScreenshot.screenshotOff();

        break;
      case AppLifecycleState.paused:
        print("app in paused");
        if(app_secure) _noScreenshot.screenshotOff();
        break;
      case AppLifecycleState.detached:
        print("app in detached");
        break;
    }
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
    ...
  }

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

The example below contains three buttons

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _noScreenshot = NoScreenshot.instance;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              child: const Text('Press to toggle screenshot'),
              onPressed: () async {
                final result = await _noScreenshot.toggleScreenshot();
                print(result);
              },
            ),
            ElevatedButton(
              child: const Text('Press to turn off screenshot'),
              onPressed: () async {
                final result = await _noScreenshot.screenshotOff();
                print(result);
              },
            ),
            ElevatedButton(
              child: const Text('Press to turn on screenshot'),
              onPressed: () async {
                final result = await _noScreenshot.screenshotOn();
                print(result);
              },
            ),
          ],
        )),
      ),
    );
  }
}