如何在flutter app的所有屏幕上添加水印

Question

大多数搜索结果显示向图像添加水印..我需要的是向覆盖应用程序所有屏幕或页面的整个应用程序添加文本水印..例如（测试版）或（学生版）所以为了避免尚未准备好的应用程序版本的屏幕截图。

Answer 1

这是一个示例，说明如何使用 Overlay 在整个 flutter 应用程序之上添加一些东西

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'),
      ),
    );
  }
}

Answer 2

你可以使用这个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;
  }
}

并将其用作小部件：

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']);
}

如何在flutter app的所有屏幕上添加水印

How to add watermark over all screens in flutter app

dart

flutter

flutter-dependencies

flutter-layout

flutter-image