Skip to main content

Flutter: How to take Screenshot of the screen or widget and save as image

Introduction:

In this post, we will discuss how to take a screenshot of the widget and save it as an image. Let’s take a use case where we need this functionality.

Here is an app to read quotes in a beautiful background.

quote app
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Quote> _quotes = [
Quote(
content: "Friendship is Love without his wings!",
author: "Lord Byron",
image: 'quote-1.jpeg')
];
String _currentImage = 'assets/img/image1.jpeg';
initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/img/placeholder.jpeg'),
fit: BoxFit.cover,
),
),
),
PageView.builder(
scrollDirection: Axis.vertical,
itemCount: _quotes.length,
itemBuilder: (context, position) {
return Container(
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: new EdgeInsets.all(25.0),
child: Text(
_quotes[position].content,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: new EdgeInsets.all(25.0),
child: Text(
'- ' + _quotes[position].author,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic),
),
),
],
),
),
],
),
);
},
),
],
));
}
}

Users might want to share it with friends and family. So adding a download button there will download the screenshot of the screen and save it into the user's mobile.

Let’s add a save/download button.

So we have added a button that should take the screenshot and save it as an image.

Code for adding the download button.

Positioned(
right: 15.0,
bottom: 12.0,
child: InkWell(
onTap: () {
download();
},
child: Icon(Icons.download_sharp, color:Colors.white70),
),
),

On click on the download button onTap function will call the download function.

Prepare and Download the Image:

We will use RepaintBoundary Flutter class to achieve this.

Wrap the widgets you want to take screenshot of inside RepaintBoundary(..)

RepaintBoundary needs to be specified with Global key so lets set that.

static GlobalKey _globalKey = GlobalKey();

Finally, now we need to covert the RepaintBoundary widget to an image. Remember the download function that we defined on download button click.

Lets add magic in that function.

Future<Null> download() async {
RenderRepaintBoundary boundary =
_globalKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
final directory = (await getExternalStorageDirectory()).path;
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
final now = new DateTime.now();File imgFile = new File('$directory/Sher_$now.png');
imgFile.writeAsBytes(pngBytes);
Toast.show('Saved to $directory', context,
duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
}
}

This function will convert the widget to image and will store the byte data as image in device storage.

Thanks for reading. If you have some feedback, please reach out to me on Twitter or Github.



Comments

Popular posts from this blog

Track stock market information right in your Terminal.

     Introduction: As a developer, I love working with the terminal. The plain, simple, and in my opinion the best way to interact with the computer (also it makes you look geeky). I spent most of my time in the terminal. By now you must have guessed I am a huge fan of the terminal and terminal-based applications. Recently I developed an interest in stock markets and started tracking the stock markets. Since I love working with the terminal I decided to build a terminal oriented application that can help me to track the stock market. Inspir e d by  wttr.in  I build  terminal-stocks  which can provide the stock's current prices, historical prices, and global market summary. How to use terminal-stocks terminal-stocks  is available and can be used without installation. Get the current price of the stock. curl terminal-stocks.dev/ITC.NS Current price of stocks You need to provide the ticker of the stock and terminal-stocks will give you the price information of the stock.  terminal-st

Setting up Nginx as a reverse proxy for Node.js App

Okay.. but what is a reverse proxy? A reverse proxy is a web server that centralizes internal services and provides unified interfaces to the public. Requests from clients are forwarded to a server that can fulfill it before the reverse proxy returns the server’s response to the client. Nginx is a popular choice to use as a reverse proxy for your node.js application. Got it. Now let’s set up Nginx Let’s say your nodejs server is running locally on localhost:3000. We will set up Nginx to get the request and forward the request to our nodejs server. Ins t alling Nginx on ubuntu sudo apt-get update sudo apt-get install nginx Configure Nginx Disable the default, virtual host unlink /etc/nginx/sites-enabled/default 2. Create a configuration file cd /etc/nginx/sites-available sudo nano reverse-proxy.conf 3. Put the following content in the file server { listen 80; listen [::]:80; access_log /var/log/nginx/reverse-access.log; error_log /var/log/nginx/reverse-e

RESTful CRUD API with Deno, Oak and MongoDB

In this post, we are going to build a RESTful CRUD API with Deno, Oak and MongoDB as database. In the previous article, we discussed how to install deno in your local machine and start using Deno. If you haven’t read that article, please read the article below and install the deno first. Getting started with Deno, Your first app Hello Deno. Let's install Deno. Deno ships as a single executable with no dependencies. You can install it using the installers… blog.shashi.dev After installing the Deno, we will start building the restful crud api’s. We will use o ak  microframework. Some of the other deno microframeworks are: abc deno-drash deno-express oak pogo servest In this article we will be using oak, which is inspired by koa. Setting up the project: Create a new directory called  restful-api-deno mkdir restful-api-deno 2. After c r eating the directory just  cd  into the directory cd restful-api-deno 3. Create a new file  server.ts  and paste the following code init. import { Ap