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.herokuapp.com/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.  t

Free to use tools for maintaining your OpenSource projects

In this post, we will talk about how to effectively maintain your OpenSource projects using tools/softwares which are free to use for OpenSource and the public repositories. Over time, when the project grows you, need to set up a few tools which can help you maintain the project and automate the trivial tasks. 1. Setup CI/CD Having an OpenSource project to which you might b e  contributing just as a hobby, but doesn’t mean you don’t need to set up CI/CD pipeline. You don’t need to expend a single dime on servers or need to use cloud services to run your CI/CD. There are a lot of CI/CD tools available free for open source projects and public repositories. One such tool is  Travis CI  which you can use for setting up CI/CD for your project. Travis CI Travis CI You can run test cases and deploy code to your servers. Travis CI works great and easy to set up the CI/CD pipeline. 2. Code Analysis and Code Quality Maintaining code quality as the project grows can be very hard and time-consumi

Why I switched to Brave browser from Google Chrome.

  I have used Google Chrome for the last 5–6 years, Chrome was the perfect browser and it has many features like syncing everything across the platform and devices, bookmarks, history, lots of extensions, password manager, auto-complete, developer options to name a few. All of these in with just a Google Id. Google ecosystem is very rich and useful. So why I decided to switch to  Brave  browser after giving it a trial for a month. Although chrome has everything, there were few issues that led me to hunt for a new browser and finally switched to Brave. Why Brave? 1. Chrome hogs the RAM “Aw ,  Snap! Google Chrome ran out of memory while trying to display this webpage.” I am sure you might have seen this message. This message appears when chrome has eaten all of the available RAM memory. I understand the reason behind Chrome using a lot of memory because of its architecture. It runs all the tabs in a separate process so that it can provide isolation. Modern sites and designers/developer