Native screeshot

Question

After looking for a long time on how to take a Webview screenshot, I found this package - native_screenshot.

The issue is, it works in debug mode, but not in production mode - even when using the example posted in pub.dev.

I've added the required permission to the android manifest and still can't get it working.

I've reported the issue to the dev, still waiting for an answer. I was wondering if anyone here can help.

I need help to make this works. All help is appreciated. Thanks

Answer 1

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