Comments (4)
Hey @rcsousa14 you can try using the signature package which provides a watermark.
from screenshot.
@harshkumarkhatri How can achieve this? I've looked for signature
package but haven't found a way to do it:
https://github.com/4Q-s-r-o/signature/search?q=watermark
@rcsousa14 Nevertheless I was thinking in something more simpler. You can add a Stack
surrounding the area you want to capture. There I'm going to put my watermark (an image, an icon, a text... whatever you want). This layer will be always hidden... but will be shown few instants before the screenshot is captured. When the capture is done, the layer will be hidden again.
And I think it could be really useful having this behavior integrated in the whole package
Here is a quick example but may illustrate what I want to achieve:
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:path_provider/path_provider.dart';
import 'package:screenshot/screenshot.dart';
import 'package:share_plus/share_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Watermark Example',
home: WatermarkScreen(),
);
}
}
class WatermarkScreen extends StatefulWidget {
const WatermarkScreen({super.key});
@override
_WatermarkScreenState createState() => _WatermarkScreenState();
}
class _WatermarkScreenState extends State<WatermarkScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final ScreenshotController _screenshotController = ScreenshotController();
bool _showWatermark = false;
Future<void> _showWatermarkCallback() async {
await Future.delayed(
const Duration(milliseconds: 100),
() => setState(() => _showWatermark = true),
);
// Unwaited
Future.delayed(
const Duration(milliseconds: 5000),
() => setState(() => _showWatermark = false),
);
}
Future<void> _takeScreenshot() async {
// Wait for the watermark to show up
await _showWatermarkCallback();
final directory = await getTemporaryDirectory();
final imagePath = await _screenshotController.captureAndSave(
directory.path,
fileName: 'screenshot.png',
);
const text = 'Hey! take a look!. ';
await Share.shareXFiles([XFile(imagePath!)], text: text);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Watermark Example'),
),
body: Screenshot(
controller: _screenshotController,
child: Stack(
children: [
Positioned.fill(
child: Image.network(
'https://picsum.photos/id/26/1000/1000',
fit: BoxFit.cover,
),
),
if (_showWatermark)
Positioned.fill(
child: Center(
child: Opacity(
opacity: 0.2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/images/dark-logo.svg',
height: MediaQuery.of(context).size.height/3,
),
],
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _takeScreenshot,
child: const Icon(Icons.camera_alt),
),
);
}
}
from screenshot.
This is a generic, replacement of Screenshot
widget I've done on top of existing one:
Widget:
import 'package:flutter/widgets.dart';
import 'package:screenshot/screenshot.dart';
import './watermark_screenshot_controller.dart';
class WatermarkScreenshot extends StatelessWidget {
const WatermarkScreenshot({
super.key,
required this.controller,
required this.child,
});
final Widget child;
final WatermarkScreenshotController controller;
@override
Widget build(BuildContext context) {
return Screenshot<void>(
controller: controller.controller,
child: ValueListenableBuilder(
valueListenable: controller.inScreenshotNotifier,
child: child,
builder: (context, showWatermark, child) => Stack(
children: [
child!,
if (showWatermark)
Positioned.fill(
child: Center(
child: Opacity(
opacity: 0.1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Replace here with your custom watermark
Text('YOUR WATERMARK HERE'),
],
),
),
),
)
],
),
),
);
}
}
controller:
import 'package:flutter/foundation.dart';
import 'package:screenshot/screenshot.dart';
class WatermarkScreenshotController {
WatermarkScreenshotController() : controller = ScreenshotController();
ValueNotifier<bool> inScreenshotNotifier = ValueNotifier(false);
final ScreenshotController controller;
Future<String?> captureAndSave(
String path, {
required String fileName,
}) async {
inScreenshotNotifier.value = true;
return controller
.captureAndSave(path, fileName: fileName)
.whenComplete(() => inScreenshotNotifier.value = false);
}
}
from screenshot.
Since Watermark is not in the scope of the project, Closing this issue.
from screenshot.
Related Issues (20)
- arguments don't match. const ViewConfiguration({ No named parameter with the name 'size'. HOT 1
- Can't print Text to screenshot image (using command line to export image) 💦 HOT 1
- No named parameter with the name 'size' :: vs. 2.3.0 issue with Flutter (Channel master, 3.21.0-9.0.pre.29, on macOS) HOT 12
- Flutter web use HTML renderer along with screenshot controller?
- Sometimes screenshot return back null captured image HOT 1
- The argument type 'Null Function(Uint8List)' can't be assigned to the parameter type 'FutureOr<dynamic> Function(Uint8List?)'. HOT 2
- How can I remove the corner radius in an image? HOT 2
- Long widget didn't work HOT 4
- Cannot capture Overlays HOT 1
- Capturing Screenshot doesn't work in HookWidget HOT 1
- Unable to capture width screenshot in Sony Xperia IV device
- No MediaQuery widget ancestor found. HOT 2
- Screenshot fails when trying to take a screenshot - Flutter Web when website is viewed from a mobile (ios) device. HOT 2
- Not build with new flutter 3.22.0 HOT 3
- Error (Xcode): ../../../.pub-cache/hosted/pub.dev/screenshot-2.4.0/lib/screenshot.dart:165:9: Error: No named parameter with the name 'logicalConstraints'. HOT 2
- Error: No named parameter with the name 'logicalConstraints'. HOT 7
- i have update 2.3.0 to 2.4.0 and getting this error . HOT 10
- Crashes on Linux / Flutter 3.22 HOT 1
- upgrade the package to support latest flutter version v3.22.1 HOT 2
- Error: No named parameter with the name 'size' HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from screenshot.