How to take a screenshot of WebView (webview_flutter) which is implemented based on AndroidViews?
As I reported to this similar issue:
The webview_flutter
plugin doesn't offer a way or a method to take the screenshot of the WebView.
So, you can try my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.
To take a screenshot, you can use InAppWebViewController.takeScreenshot
method, that takes a screenshot (in PNG format) of the WebView's visible viewport and returns a Uint8List
.
Here is an example that takes a screenshot of the WebView when the page stops loading and shows an alert dialog with the corresponding screenshot image:
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(initialRoute: '/', routes: {
'/': (context) => InAppWebViewExampleScreen(),
});
}
}
class InAppWebViewExampleScreen extends StatefulWidget {
@override
_InAppWebViewExampleScreenState createState() =>
new _InAppWebViewExampleScreenState();
}
class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
InAppWebViewController webView;
Uint8List screenshotBytes;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("InAppWebView")),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl: "https://github.com/flutter",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {},
onLoadStop: (InAppWebViewController controller, String url) async {
screenshotBytes = await controller.takeScreenshot();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Image.memory(screenshotBytes),
);
},
);
},
))
])));
}
}
jakub_gros
Updated on December 14, 2022Comments
-
jakub_gros over 1 year
I need to take a screenshot of WebView from webview_flutter, but it doesn't work.
I have an app which has to take a screenshot of WebView and then process it. I tried to do it using Screenshot package. I found this information https://github.com/fluttercommunity/flutter_webview_plugin/issues/181#issuecomment-497625384
From the link, I learned that it's impossible to do it through the Screenshot plugin.
Screenshot( controller: _screenshotController, child: WebView( initialUrl: widget._webUrl, onWebViewCreated: (WebViewController webViewController) { if (_controller.isCompleted == false) _controller.complete(webViewController); }, ), ); void takeScreenshot() { _screenshotController.capture().then( (File image) async { _screenshot = image; } );
When I take the screenshot I got transparent png image, whereas I would like to have capture of the WebView content
-
GGirotto over 3 yearsI'm trying to use your plugin, but the
takeScreenshot
sometimes returns null, and the method doesn't specify when this function can fail -
Ujjwal Raijada about 3 yearsif you are trying to get screenshot using onPress(), replace
screenshotBytes = await controller.takeScreenshot();
withscreenshotBytes = await webView.takeScreenshot();
-
Shiva Yadav over 2 yearsgreat job. helped me when i was surfing for solution from past 10 days.