Flutter scroll_screenshot: The Essential Guide

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