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. 👇

Here's how to hide your web APIs behind an umbrella file using conditional imports
Here's how to hide your web APIs behind an umbrella file using conditional imports

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!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.