Repository: flutter
Issue: Allow flutter to save widget to image even if widget is offscreen
Labels: framework,a: images,c: proposal,P3,team-framework,triaged-framework

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill our the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

When you have an application, sometimes it's important to save widgets as images even if they're not on screen.

An example of how this would be necessary: having a customized widget displayed in a thumbnail in the app but you wish to save as an image a full size/full screen version of that same widget. 

## Steps to Reproduce

<!-- Please tell us exactly how to reproduce the problem you are running into. -->

1. ... Following documentation, use RepaintBoundary with a global key in the widget to save as image.
2. ... Wrap the previous widget in an OffStage widget.
3. ... Try to call RenderRepaintBoundary boundary =
          _exportLayoutKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage();



## Logs

<!--
      Include the full logs of the commands you are running between the lines
      with the backticks below. If you are running any "flutter" commands,
      please include the output of running them with "--verbose"; for example,
      the output of running "flutter --verbose create foo".
-->

It will throw an error

`flutter: 'package:flutter/src/rendering/proxy_box.dart': Failed assertion: line 2882 pos 12: '!debugNeedsPaint': is not true.`

running `flutter doctor -v`

<!-- If possible, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel dev, v1.9.7, on Mac OS X 10.14.6 18G95, locale en-US)
    • Flutter version 1.9.7 at /Users/tapizquent/Projects/tools/flutter
    • Framework revision 4984d1a33d (11 days ago), 2019-08-28 17:04:07 -0700
    • Engine revision f52c0b9270
    • Dart version 2.5.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at /Users/tapizquent/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.7.4

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 36.1.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[✓] VS Code (version 1.38.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.4.1

[✓] Connected device (1 available)
    • Tapizquent • e75fc710ec1404ac1c323311b0ba25049db7e7d4 • ios • iOS 12.4.1

• No issues found!
```

## **Update:**

Minimal project showcasing scenario:

```
import 'dart:convert';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey _globalKey = GlobalKey();

  Future<void> _capturePng() async {
    try {
      print('inside');
      RenderRepaintBoundary boundary =
          _globalKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData =
          await image.toByteData(format: ui.ImageByteFormat.png);
      var pngBytes = byteData.buffer.asUint8List();
      var bs64 = base64Encode(pngBytes);
      print(pngBytes);
      print(bs64);
      return pngBytes;
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget To Image demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Tapping button below should capture placeholder image capture the placeholder image',
            ),
            RepaintBoundary(
              key: _globalKey,
              child: Offstage(
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.8,
                  child: Placeholder(),
                ),
              ),
            ),
            RaisedButton(
              child: Text('capture Image'),
              onPressed: _capturePng,
            ),
          ],
        ),
      ),
    );
  }
}
```

I have tried doing it like this, and also switching Offstage and RepaintBoundary:

```
RepaintBoundary(
    key: _globalKey,
    child: Offstage(
        child: Container(
            width: MediaQuery.of(context).size.width * 0.8,
            child: Placeholder(),
         ),
     ),
),
```