Conditional Imports for Web/Native APIs

Did you know?

If you try to access a web-specific API on native platforms, your app will crash. 💥

To prevent this, hide your API behind an "umbrella" file using conditional imports. ✅

Here's an example showing how to check if the app is using the CanvasKit renderer. 👇

Example code

// is_canvas_kit.dart
export 'unsupported.dart'
    if (dart.library.js) 'web.dart'
    if (dart.library.io) 'native.dart';

// unsupported.dart
bool isCanvasKitRenderer() {
  throw UnsupportedError('Implementation not found on this platform.');
}

// native.dart
bool isCanvasKitRenderer() => false;

// web.dart
import 'dart:js' as js;

bool isCanvasKitRenderer() {
  return js.context['flutterCanvasKit'] != null;
}

Happy coding!