Flutter es un marco popular de Google que está creciendo rápidamente con su creciente comunidad. Flutter ha creado un gran revuelo a través de sus bibliotecas, lo que hace que el desarrollo sea acelerado.
Hoy en día, a todo el mundo le encanta hacer capturas de pantalla. Si su aplicación implica el uso de capturas de pantalla, Flutter tiene un paquete para ello. No solo para este propósito, sino que es muy útil en el proceso de prueba y depuración. Las pantallas de datos que cambian rápidamente se pueden capturar a través de capturas de pantalla, y hacerlo manualmente es una tarea aburrida y una pérdida de tiempo. El paquete de capturas de pantalla automatiza el proceso de capturar los widgets que desea capturar y almacenarlos en algún lugar. Si desea que su usuario capture solo ciertos widgets de la pantalla, no una pantalla completa, este paquete está aquí para ayudarlo. En este artículo, implementaremos un paquete de captura de pantalla en Flutter.
Sigue el artículo para ver cómo hacer capturas de pantalla en Flutter.
Paso 1: agregue la siguiente dependencia en su archivo pubspec.yaml .
Agregue la dependencia dada en el archivo pubspec.yaml .
Dart
dependencies: screenshot: ^1.2.3
Ahora haga clic en el pub get para configurarlo. O agregue la dependencia directamente a pubspec.yaml desde la terminal escribiendo el siguiente código en la terminal.
flutter pub add screenshot
Paso 2: Importa la biblioteca.
Dart
import 'package:screenshot/screenshot.dart';
Paso 3: navega a main.dart.
Primero, vaya a main.dart y modifique la función principal. Cuando crea una aplicación de Flutter, ya se han escrito algunas líneas de código. Lo vamos a mantener. Elimine el widget sin estado MyHomePage del código y conserve solo el código que se muestra a continuación. Luego damos nuestra primera pantalla de la aplicación en el hogar: HomePage().
Dart
import 'package:flutter/material.dart';
import 'home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: HomePage(),
);
}
}
Paso 4: declarar StatefulWidget() para la clase HomePage()
Cree otro archivo dart home.dart donde crearemos una clase HomePage() con estado . En esa clase HomePage() , le hemos dado screenshotController . Después de eso, hemos declarado Scaffold() en el que hemos declarado la barra de aplicaciones que consiste en el título de la aplicación: «Aplicación de demostración de captura de pantalla». En la sección del cuerpo, hemos declarado el widget Captura de pantalla que toma el controlador de captura de pantalla como un parámetro envuelto con el widget central.
Hemos creado dos ElevatedButton , uno muestra el temporizador decreciente y el otro es un temporizador creciente. Podemos tomar una captura de pantalla de ambos botones presionando otro botón que muestra Capture above Widget. Esto mostrará el widget capturado en una pantalla diferente. Recuerde, debemos envolver todos los widgets dentro del widget Captura de pantalla cuya captura de pantalla desea. Hemos envuelto tanto los temporizadores como sus respectivos textos dentro del widget Screenside . En los respectivos valores particulares, ambos temporizadores se detendrán y, al hacer clic en el botón Actualizar, se restablecerán sus valores.
A veces, lleva tiempo cargar los widgets en la pantalla y son invisibles hasta que no están en la pantalla. Pero con esta biblioteca, incluso podemos capturarlos. Para mostrar eso, hemos creado un widget invisible, que se captura cuando se presiona otro botón que muestra Capturar un widget invisible. Esto mostrará el widget invisible en otra pantalla.
Dart
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Create an instance of ScreenshotController
ScreenshotController screenshotController = ScreenshotController();
@override
void initState() {
super.initState();
}
// create a variable of type Timer
late Timer _timer;
int _start = 0;
int _startTwo = 61;
// function to increment the timer until
// 61 and set the state
void increasingStartTimer() {
const oneSec = const Duration(seconds: 1);
_timer = new Timer.periodic(
oneSec,
(Timer timer) => setState(
() {
if (_start > 60) {
timer.cancel();
} else {
_start = _start + 1;
}
},
),
);
}
// function to decrease the timer
// until 1 and set the state
void decreasingStartTimer() {
const oneSec = const Duration(seconds: 1);
_timer = new Timer.periodic(
oneSec,
(Timer timer) => setState(
() {
if (_startTwo < 0) {
timer.cancel();
} else {
_startTwo = _startTwo - 1;
}
},
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
centerTitle: true,
),
body: Center(
child: Column(
children: [
SizedBox(height: 30),
Screenshot(
controller: screenshotController,
child: Column(
children: [
Text("Decreasing Timer : "),
SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border:
Border.all(color: Colors.blueAccent, width: 5.0),
color: Colors.amberAccent,
),
child: Text(_startTwo.toString())),
SizedBox(
height: 25,
),
Text("Increasing Timer : "),
SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border:
Border.all(color: Colors.blueAccent,
width: 5.0),
color: Colors.amberAccent,
),
child: Text("$_start")),
],
),
),
ElevatedButton(
onPressed: () {
// invoking both functions for timer to start
increasingStartTimer();
decreasingStartTimer();
},
child: Text("start"),
),
ElevatedButton(
onPressed: () {
setState(() {
_start = 0;
_startTwo = 61;
});
},
child: Text("Refresh")),
ElevatedButton(
child: Text(
'Capture Above Widget',
),
onPressed: () {
// invoking capture on
// screenshotController
screenshotController
.capture(delay: Duration(milliseconds: 10))
.then((capturedImage) async {
// showing the captured widget
// through ShowCapturedWidget
ShowCapturedWidget(context,
capturedImage!);
}).catchError((onError) {
print(onError);
});
},
),
ElevatedButton(
child: Text(
'Capture An Invisible Widget',
),
onPressed: () {
var container = Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent,
width: 5.0),
color: Colors.pink,
),
child: Text(
"This is an invisible widget",
style: Theme.of(context).textTheme.headline6,
));
// capturing all the widgets
// that are invisible
screenshotController
.captureFromWidget(
InheritedTheme.captureAll(
context, Material(child: container)),
delay: Duration(seconds: 1))
.then((capturedImage) {
// showing the captured invisible widgets
ShowCapturedWidget(context, capturedImage);
});
},
),
],
),
),
);
}
// function to show captured widget
Future<dynamic> ShowCapturedWidget(
BuildContext context, Uint8List capturedImage) {
return showDialog(
useSafeArea: false,
context: context,
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Captured widget screenshot"),
),
body: Center(
child: capturedImage != null
? Image.memory(capturedImage)
: Container()),
),
);
}
}
Las capturas de pantalla capturadas:
Guardar capturas de pantalla en la galería:
Para guardar capturas de pantalla en la galería, debemos escribir un código adicional para ellas en el código que se muestra anteriormente. Usaremos un paquete: image_gallery_saver para este propósito. Agregue la dependencia a continuación en el archivo pubspec.yaml .
Dart
dependencies: image_gallery_saver: '^1.7.1'
Ahora, ejecute pub get para configurarlo, y necesitamos importar la biblioteca en nuestro archivo home.dart .
Dart
import 'package:image_gallery_saver/image_gallery_saver.dart';
Ahora, necesitamos crear una función a la que pasaremos las imágenes capturadas para guardarlas en la Galería.
Dart
_saved(Uint8List image) async {
final result = await ImageGallerySaver.saveImage(image);
print("File Saved to Gallery");
}
Aquí, creamos una función asíncrona que toma datos de tipo Uint8List como entrada. Podemos guardar imágenes como archivos o bytes, pero necesitamos convertirlas a un tipo específico. Dado que las capturas de pantalla capturadas están en formato de bytes, estamos usando la función saveImage para guardar la captura de pantalla. Ahora, necesitamos llamar a la función, llamaremos a esta función cada vez que capturemos una captura de pantalla, tanto de un widget visible como de un widget invisible. Vea el código completo de home.dart a continuación.
Código fuente completo:
Dart
import 'dart:async';
import 'dart:typed_data';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Create an instance of ScreenshotController
ScreenshotController screenshotController = ScreenshotController();
@override
void initState() {
super.initState();
}
late Timer _timer;
int _start = 0;
int _startTwo = 61;
void increasingStartTimer() {
const oneSec = const Duration(seconds: 1);
_timer = new Timer.periodic(
oneSec,
(Timer timer) => setState(
() {
if (_start > 60) {
timer.cancel();
} else {
_start = _start + 1;
}
},
),
);
}
void decreasingStartTimer() {
const oneSec = const Duration(seconds: 1);
_timer = new Timer.periodic(
oneSec,
(Timer timer) => setState(
() {
if (_startTwo < 0) {
timer.cancel();
} else {
_startTwo = _startTwo - 1;
}
},
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Screenshot Demo App"),
),
body: Center(
child: Column(
children: [
SizedBox(height: 30),
Screenshot(
controller: screenshotController,
child: Column(
children: [
Text("Decreasing Timer : "),
SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border:
Border.all(color: Colors.blueAccent, width: 5.0),
color: Colors.amberAccent,
),
child: Text(_startTwo.toString())),
SizedBox(
height: 25,
),
Text("Increasing Timer : "),
SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border:
Border.all(color: Colors.blueAccent, width: 5.0),
color: Colors.amberAccent,
),
child: Text("$_start")),
],
),
),
ElevatedButton(
onPressed: () {
increasingStartTimer();
decreasingStartTimer();
},
child: Text("start"),
),
ElevatedButton(
onPressed: () {
setState(() {
_start = 0;
_startTwo = 61;
});
},
child: Text("Refresh")),
ElevatedButton(
child: Text(
'Capture Above Widget',
),
onPressed: () {
screenshotController
.capture(delay: Duration(milliseconds: 10))
.then((capturedImage) async {
ShowCapturedWidget(context, capturedImage!);
_saved(capturedImage);
}).catchError((onError) {
print(onError);
});
},
),
ElevatedButton(
child: Text(
'Capture An Invisible Widget',
),
onPressed: () {
var container = Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent,
width: 5.0),
color: Colors.pink,
),
child: Text(
"This is an invisible widget",
style: Theme.of(context).textTheme.headline6,
));
screenshotController
.captureFromWidget(
InheritedTheme.captureAll(
context, Material(child: container)),
delay: Duration(seconds: 1))
.then((capturedImage) {
ShowCapturedWidget(context, capturedImage);
_saved(capturedImage);
});
},
),
],
),
),
);
}
Future<dynamic> ShowCapturedWidget(
BuildContext context, Uint8List capturedImage) {
return showDialog(
useSafeArea: false,
context: context,
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Captured widget screenshot"),
),
body: Center(
child: capturedImage != null
? Image.memory(capturedImage)
: Container()),
),
);
}
_saved(image) async {
final result = await ImageGallerySaver.saveImage(image);
print("File Saved to Gallery");
}
}
Producción: