Flutter Screenshot Widget - Take sceenshot as capture Image

Last updated Mar 27, 2021

While running the application, if user want to save the current screen of the application they have to capture image as screenshot by default device screenshot application, sometimes this may get user to hard to take screenshot. In this example we are going to create a screenshot widget in flutter application, where user can directly take the screenshot of the current screen by pressing the button and saving images  as capture image inside application directory. Bu using this screenshot plugin user can happily take the screenshot of the current screen. For this we are suing RepaintBoundary widget for flutter screenshot

 

Let's get started

Step 1: Create Flutter application

 

Step 2: Add required dependencies in pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  permission_handler:
  provider:
  image_gallery_saver:

 

Step 3: Import plugin packages into dart file

import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:permission_handler/permission_handler.dart';

 

Step 4: Write Logic to Take screenshot of the current view/screen

To take the screenshot of the current view/widget we will use the RepaintBoundary widget

We will put our view widget inside RepaintBoundary widget

RepaintBoundary(
    key: scr,
    child: FlutterLogo(
      size: 100,
      textColor: Colors.pink,
      style: FlutterLogoStyle.stacked,
    ))

 

In the above code we have given key value as scr, so this key will be used while capture the image

Now its time to write the code to take screenshot of the widget and save it as capture image inside application directory by below code

saveScreen() 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());
  _showInSnackBar(message: 'Saved to gallery - full screen');
}

 

Step 5: Run the application

 

Flutter Screenshot widget

 

Complete example code

import 'package:flutter/material.dart';

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';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Take Screenshot Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}


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

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

class _HomePageState extends State<HomePage> {
  var _scaffoldKey = GlobalKey<ScaffoldState>();
  int _counter = 0;

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

  GlobalKey scr = GlobalKey();
  GlobalKey scr1 = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      key: scr,
      child: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text('Flutter Take Screenshot Example'),
          centerTitle: true,
          elevation: 0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RepaintBoundary(
                  key: scr1,
                  child: FlutterLogo(
                    size: 100,
                    textColor: Colors.pink,
                    style: FlutterLogoStyle.stacked,
                  )),
              SizedBox(height: 30),
              Text(
                'This Example demonstrate how to take screenshot programatically in flutter',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
              SizedBox(height: 25),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  MaterialButton(
                    onPressed: () {
                      saveScreen();
                    },
                    child: Center(child: Text('Take Fullscreen',style: TextStyle(color: Colors.white))),
                    color: Colors.blue,
                  ),
                  MaterialButton(
                      onPressed: () {
                        saveScreen1();
                      },
                      child: Text('Specified View',style: TextStyle(color: Colors.white),),
                      color: Colors.red),
                ],
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  saveScreen() 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');
    _showInSnackBar(message: 'Saved to gallery - full screen');
  }

  saveScreen1() async {
    RenderRepaintBoundary boundary = scr1.currentContext.findRenderObject();
    if (boundary.debugNeedsPaint) {
      Timer(Duration(seconds: 1), () => saveScreen1());
      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');
    _showInSnackBar(message: 'Saved to gallery - Flutter Logo');
  }

  _requestPermission() async {
    Map<Permission, PermissionStatus> statuses = await [
      Permission.storage,
    ].request();
    final info = statuses[Permission.storage].toString();
    print('$info');
  }

  @override
  void initState() {
    super.initState();
    _requestPermission();
  }

  void _showInSnackBar({String message}) {
    _scaffoldKey.currentState.showSnackBar(
      SnackBar(
        content: Text(
          message,
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
        ),
        duration: (Duration(seconds: 3)),
        elevation: 0,
        backgroundColor: Colors.black,
      ),
    );
  }
}

 

Note: Add required permissions in manifest file

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

 

 

How to take a screenshot on Samsung?


There are several ways to take screen shot on your devices. one of it is "Swipe of your palm"
This can be activated by Settings-> Turn on "Palm swipe to capture" inside advance feature.
Next Swipe your hand left to right or right to left in horizontal way. At this time please make sure your hand stays in contact with the screen.
Other way of take screen shot is Press the two buttons Power key and volume down button at the same time.
If that doesn't work, press and hold the Power button for a few seconds. Then tap Screenshot.
If either of these ways didn't work, Reach your phone manufacturer's support site for help

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

4029 Views