Flutter scroll_screenshot: The Essential Guide

Vinoth M
2 min readMar 4, 2024

Mar 05, 2024

Features

A new Flutter package ‘scroll_screenshot’ function allows you to capture a full-size screenshot, and scrolling functionality is also available to capture full screens, including those hidden at the bottom.

Getting Started #

To get started, add scroll_screenshot to your pubspec.yaml. In this article we’ll be using ^0.0.4.

dependencies:
scroll_screenshot: ^0.0.4

Depend on it #

Run this command:

With Flutter:

$ flutter pub add scroll_screenshot

Configuration #

After doing that let's add scroll_screenshot configuration to your app:

import 'dart:developer';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:scroll_screenshot/scroll_screenshot.dart';
void main() {
runApp(const MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
final GlobalKey _globalKey = GlobalKey();

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

Future<void> _captureAndSaveScreenshot() async {
String? base64String =
await ScrollScreenshot.captureAndSaveScreenshot(_globalKey);
log(base64String!);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
title: const Text("Scroll Screenshot"),
),
body: SingleChildScrollView(
child: RepaintBoundary(
key: _globalKey,
child: Column(
children: <Widget>[
SizedBox(
height: 2250, // Important Adjust the height as needed
width: MediaQuery.of(context).size.width,
child: Column(children: [
LayoutBuilder(
builder:
(BuildContext context, BoxConstraints constraints) {
return SizedBox(
height: 2250, // Important Adjust the height as needed
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: 40,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
'Item ${index+1}',
),
);
},
),
);
},
),
]),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _captureAndSaveScreenshot,
child: const Icon(Icons.screenshot),
),
),
);
}
}

Mobile Screen #

Final Output #

Final Output #

Future<void> _captureAndSaveScreenshot() async {
String? base64String =
await ScrollScreenshot.captureAndSaveScreenshot(_globalKey);
log(base64String!);
}

Finally, you will receive a base64-encoded string. You can use this string to convert it into an image, or you can use it directly depending on your requirements.

Find here the project example 👇🏿👇🏿

A simple Flutter project with sample code about how to work with scroll_screenshot. To get…

https://pub.dev/packages/scroll_screenshot/example

--

--