How to add watermark over all screens in flutter app

Question

Most search results showed adding watermarks to images .. what i need is to add text watermark to the whole app that covers all screens or pages of the app.. such as (beta version) or (student version) so as to avoid screenshots of not yet ready version of the app.

Answer 1

You can use this class:

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
  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;
  }
}

and use by this as a widget:

OverlayEntry _overlayEntry;

void addWatermark(BuildContext context, String watermark,
    {int rowCount = 3, int columnCount = 10}) async {
  if (_overlayEntry != null) {
    _overlayEntry.remove();
  }
  OverlayState overlayState = Overlay.of(context);
  _overlayEntry = OverlayEntry(
      builder: (context) => Watarmark(
            rowCount: rowCount,
            columnCount: columnCount,
            text: watermark,
          ));
  overlayState.insert(_overlayEntry);
  // return await _methodChannel.invokeMethod<void>("addWatermark", ['I am a watermark']);
}

Answer 2

class WatermarkLogo extends StatelessWidget {
  const WatermarkLogo({super.key, required this.child});
  final Widget child;
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Positioned.fill(child: child),
        IgnorePointer(
            child: Center(
                child: Opacity(
          opacity: 0.025,
          child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 50,
              ),
              child: Image.asset('assets/logo.png')),
        )))
      ],
    );
  }
}

Answer 3

Here's an example of how you can use Overlay to add something on top of you whole flutter app

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WillPopScope(
        onWillPop: () async => !await _navigatorKey.currentState.maybePop(),
        child: LayoutBuilder(
          builder: (context, constraints) {
            WidgetsBinding.instance.addPostFrameCallback((_) => _insertOverlay(context));
            return Navigator(
              key: _navigatorKey,
              onGenerateRoute: (RouteSettings settings) {
                switch (settings.name) {
                  case '/page2':
                    return MaterialPageRoute(builder: (_) => Page2());
                  default:
                    return MaterialPageRoute(builder: (_) => Page1(_navigatorKey));
                }
              },
            );
          },
        ),
      ),
    );
  }

  void _insertOverlay(BuildContext context) {
    return Overlay.of(context).insert(
      OverlayEntry(builder: (context) {
        final size = MediaQuery.of(context).size;
        return Positioned(
          width: 130,
          height: 50,
          top: size.height - 200,
          left: size.width - 200,
          child: Material(
            color: Colors.transparent,
            child: GestureDetector(
              onTap: () => print('ON TAP OVERLAY!'),
              child: Center (child: Container(
                decoration: BoxDecoration(color: Colors.redAccent),
                child: Text('BETA VERSION')
              ),)
            ),
          ),
        );
      }),
    );
  }
}

class Page1 extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey;

  Page1(this.navigatorKey);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[200],
      appBar: AppBar(title: Text('Page1')),
      body: Container(
        alignment: Alignment.center,
        child: TextButton(
          child: Text('go to Page2'),
          onPressed: () => navigatorKey.currentState.pushNamed('/page2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow[200],
      appBar: AppBar(title: Text('back to Page1')),
      body: Container(
        alignment: Alignment.center,
        child: Text('Page 2'),
      ),
    );
  }
}