用Flutter截取网站截图

Question

Is there a way or package to capture screenshots of a website with Flutter framework and get the image to display it in th UI (like the example bellow)?

Code Example:

import 'dart:io';

import 'package:flutter/material.dart';

class SidePage extends StatefulWidget {
  const SidePage({Key? key}) : super(key: key);

  @override
  State<SidePage> createState() => _SidePageState();
}

class _SidePageState extends State<SidePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  image: DecorationImage(
                    image: FileImage( File( ' '),),
                    fit: BoxFit.fill,
                  ),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      bottomLeft: Radius.circular(10))),
            ),
            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(
                  color: Color.fromARGB(255, 73, 73, 73),
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10))),
              alignment: Alignment.center,
              child: Text(
                'Page Title',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 30,
        ),
        ElevatedButton(
            onPressed: () {
                  //what can I do here t get a screen shot for the web page?
            },
            child: Text('Get Image'))
      ]),
    );
  }
}

When user press "get image" button it get a screenshot for the web page by the link..

Image for desired result:

Answer 1

you can use this screenshot package https://pub.dev/packages/screenshot and after installing it, here's how you gonna add in the onPressed() fuc:

ElevatedButton(
onPressed: () {
       screenshotController
        .capture(delay: Duration(milliseconds: 10))
        .then((capturedImage) async {
      ShowCapturedWidget(context, capturedImage!);
    }).catchError((onError) {
      print(onError);
    });
},
child: Text('Get Image'))