How to take a screenshot in Flutter.

Post banner made with canva.
var scr = GlobalKey();
RepaintBoundary(
key: scr,
child: Scaffold());
var scr1 = GlobalKey();Column(
children: <Widget>[
RepaintBoundary(
key: scr1,
child: FlutterLogo(size: 50.0),
),
Text(
'You have pushed the button this many times:',),
]),
takescrshot() async {
RenderRepaintBoundary boundary = scr.currentContext.findRenderObject(); // the key provided
var image = await boundary.toImage();
var byteData = await image.toByteData(format: ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
print(pngBytes);
}
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

var scr = GlobalKey();
var scr1 = GlobalKey();
@override
Widget build(BuildContext context) {
return RepaintBoundary(
key: scr,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Screenshot Example'),
centerTitle: true,
elevation: 0,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RepaintBoundary(
key: scr1,
child: FlutterLogo(
size: 100,
)),
SizedBox(height: 10),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
MaterialButton(
onPressed: () {
takescrshot();
},
child: Text('Take full screen'),
color: Colors.blue,
),
MaterialButton(
onPressed: () {
takescrshot1();
},
child: Text('Take full screen'),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}

takescrshot() async {
RenderRepaintBoundary boundary = scr.currentContext.findRenderObject();
var image = await boundary.toImage();
var byteData = await image.toByteData(format: ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
print('$pngBytes *********************8 scr');
}

takescrshot1() async {
RenderRepaintBoundary boundary = scr1.currentContext.findRenderObject();
var image = await boundary.toImage();
var byteData = await image.toByteData(format: ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
print('$pngBytes *********************8 scr1');
}
}
  1. image_gallery_saver: For saving the images into the gallery
  2. permission_handler: storage permission handler and many other android permissions
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
_requestPermission() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.storage,
].request();
final info = statuses[Permission.storage].toString();
print('$info');
}
@override
void initState() {
super.initState();
_requestPermission();
}
Pop-up screenshot
takescrshot() async {
RenderRepaintBoundary boundary = scr.currentContext.findRenderObject();
if (boundary.debugNeedsPaint) {
Timer(Duration(seconds: 1), () => saveScreen());
return null;
}
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
final result =
await ImageGallerySaver.saveImage(byteData.buffer.asUint8List());
print('$byteData ********** Saved to gallery *********** $result');
}
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:permission_handler/permission_handler.dart';
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
MaterialButton(
onPressed: () {
takescrshot();
},
child: Text('The fullscreen shot'),
color: Colors.blue,
),
MaterialButton(
onPressed: () {
takescrshot1();
},
child: Text('Only flutter logo shot'),
color: Colors.red),
],
),
screenshots

--

--

--

Hi, I run the YouTube channel called TechWithSam! I’m passionate about learning and teaching programming majorly Flutter for the moment.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A better way to set RecyclerView items margin

Fast lane to Data Binding in Android

KSP: Fact or kapt?

Simple Recyclerview in Android Studio — Java

Android Static analysis- How to pull APK?

Javet for Android is Released

Javet for Android (Java + V8 binding engine)

Understanding the Basics of Navigation Component

Broadcast Receiver in Kotlin — Beginner In-Depth Guide

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samuel Adekunle (techwithsam)

Samuel Adekunle (techwithsam)

Hi, I run the YouTube channel called TechWithSam! I’m passionate about learning and teaching programming majorly Flutter for the moment.

More from Medium

What is Google Flutter? | Everything You Need To Know About Flutter

Check if Dates fall in a Date Range in Flutter | Dart

Part 3: The Journey…|| How do you start learning Flutter?

Custom Option Selection Widget — Flutter.