Flutter – Disable Screenshots

There are many applications that do not allow taking screenshots of the screen for security purpose and other security, Like Google Pay – Screenshot is not allowed on some screen. That prevents our information from revealing, stolen, etc. In this article we going to do in flutter application, this is going to be pretty simple. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml File

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

Dart

flutter pub add flutter_windowmanager

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Step 3: Import the package into the main file.

Dart

import 'package:flutter_windowmanager/flutter_windowmanager.dart';

Step 4: Make a button in the center of the body to toggle the flag secure, We can also show the text true or false according to the state of the flag. Also, we have a local variable secureMode to access the mode of the flag.

Dart

Text('Secure Mode Test: ${_secureMode.toString()}\n'),
             ElevatedButton(
                 onPressed: () async {
                   final secureModeToggle = !_secureMode;

                   if (secureModeToggle == true) {
                     await FlutterWindowManager.addFlags(
                         FlutterWindowManager.FLAG_SECURE);
                   } else {
                     await FlutterWindowManager.clearFlags(
                         FlutterWindowManager.FLAG_SECURE);
                   }

                   setState(() {
                     _secureMode = !_secureMode;
                   });
                 },
                 child: const Text("Toggle Secure Mode")),

Code Example

Dart

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

void main() => runApp(const MyApp());

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _secureMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Secure',
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Secure'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('Secure Mode Test: ${_secureMode.toString()}\n'),
              ElevatedButton(
                  onPressed: () async {
                    final secureModeToggle = !_secureMode;

                    if (secureModeToggle == true) {
                      await FlutterWindowManager.addFlags(
                          FlutterWindowManager.FLAG_SECURE);
                    } else {
                      await FlutterWindowManager.clearFlags(
                          FlutterWindowManager.FLAG_SECURE);
                    }

                    setState(() {
                      _secureMode = !_secureMode;
                    });
                  },
                  child: const Text("Toggle Secure Mode")),
            ],
          ),
        ),
      ),
    );
  }
}

Output UI:

Output:

Note: Black Screen is seen during the screen record when the secure flag is true. But the screen is seen when the flag is false.