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:
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'))
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.