Recommended way to create a map snapshot, working on native and web?

[androidseb]

I've implemented a snapshot feature in my flutter app and I was going to ask this question because my implementation was "not working" on web.

After searching for a while, I noticed this was due to this bug, and could be worked around with the BROWSER_IMAGE_DECODING_ENABLED flag.

I'll still share the code here so that it helps others and so that I can get feedback too if there is a better recommended way to do this. The code is pretty simple and straightforward, but getting there was not trivial and took me a lot of time.

This technique uses the RepaintBoundary widget.

This is the content of my .vscode/launch.json file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug",
            "cwd": ".",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "Release",
            "cwd": ".",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release",
            "args": [
                "--dart-define=BROWSER_IMAGE_DECODING_ENABLED=false"
            ]
        },
    ]
}

Important note: the "Debug" configuration does not work on web, only the "Release" one works.

These are my pubspec.yaml file's dependencies:

  flutter_map: ^2.2.0
  latlong2: ^0.8.1
  share_plus: ^4.0.4
  path_provider: ^2.0.5

Here is the code:

import 'dart:convert';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:path_provider/path_provider.dart';

// Comment out these imports if targetting native
import 'dart:html' as html;

// Comment out these imports if targetting web
import 'dart:io' as io;
import 'package:share_plus/share_plus.dart';

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _rbKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      key: _rbKey,
      child: Stack(
        children: [
          FlutterMap(
            options: MapOptions(
              center: LatLng(50, 20),
              zoom: 5,
              interactiveFlags: InteractiveFlag.all - InteractiveFlag.rotate,
            ),
            children: [
              TileLayerWidget(
                options: TileLayerOptions(
                  urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                  subdomains: ['a', 'b', 'c'],
                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                ),
              ),
            ],
          ),
          Positioned.fill(
            child: IgnorePointer(
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.amber,
                    width: 10,
                  ),
                ),
              ),
            ),
          ),
          Center(
            child: TextButton(
              onPressed: _exportSnapshot,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(
                    color: Colors.blue,
                    width: 0.5,
                  ),
                ),
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text('Export snapshot'),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  /// Because of this bug: https://github.com/flutter/flutter/issues/94895
  /// Images would not be rendered when exporting the snapshot (and the map view is made of images).
  ///
  /// This function will only work for production web apps using the flag "BROWSER_IMAGE_DECODING_ENABLED"
  /// For example, building your web app must be done like this:
  /// flutter build web --web-renderer canvaskit --release --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false
  /// Lauching your web app must be done with these options:
  /// {
  ///   "name": "My Web App",
  ///   "cwd": ".",
  ///   "request": "launch",
  ///   "type": "dart",
  ///   "flutterMode": "release",
  ///   "args": [
  ///       "--dart-define=BROWSER_IMAGE_DECODING_ENABLED=false"
  ///   ]
  /// },
  void _exportSnapshot() async {
    final RenderRepaintBoundary? boundary = _rbKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
    if (boundary == null) {
      return;
    }
    if (kDebugMode) {
      if (boundary.debugNeedsPaint) {
        int remainingWaitCount = 5;
        while (boundary.debugNeedsPaint && remainingWaitCount > 0) {
          remainingWaitCount--;
          await Future<void>.delayed(Duration.zero);
        }
        if (boundary.debugNeedsPaint) {
          return null;
        }
      }
    }
    final ui.Image image = await boundary.toImage(pixelRatio: ui.window.devicePixelRatio);
    final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List? pngBytes = byteData?.buffer.asUint8List();
    if (pngBytes == null) {
      return;
    }
    _exportBytes('export.png', pngBytes);
  }

  void _exportBytes(String fileName, Uint8List pngBytes) {
    if (kIsWeb) {
      _exportBytesWeb(fileName, pngBytes);
    } else {
      _exportBytesNative(fileName, pngBytes);
    }
  }

  void _exportBytesWeb(String fileName, Uint8List pngBytes) {
    // Comment out this function if targetting native
    final String base64ContentString = base64.encode(pngBytes);
    html.AnchorElement(href: 'data:application/octet-stream;charset=utf-8;base64,$base64ContentString')
      ..setAttribute('download', fileName)
      ..click();
  }

  void _exportBytesNative(String fileName, Uint8List pngBytes) async {
    // Comment out this function if targetting web
    final io.Directory rootDir = await getApplicationDocumentsDirectory();
    final file = io.File('${rootDir.absolute.path}/$fileName');
    await file.writeAsBytes(pngBytes);
    Share.shareFiles(<String>[file.absolute.path]);
  }
}

Running this code and clicking the "Export snapshot" button provides the following image:

Please let me know if you see a better way to do this, thanks!