Announcing package support for DartPad
Create robust code snippets with popular packages in DartPad
Today we’re excited to announce that package support is now available in DartPad! DartPad is the open-sourced, web-based playground that runs Dart and Flutter apps directly in your web browser. It allows you to quickly run Dart code to test an idea or code up a technical concept without needing to install the Flutter SDK or any tools on your local system.
Since the launch of DartPad, one of the most popular requests has been to add support for importing packages, such as Google Fonts or Firebase Authentication, directly in DartPad’s editor. In this first phase of rollout, you can import from a set of popular packages.
To help you get started, we’ve created several new examples that you can find using DartPad’s Samples menu.
Google Fonts example
Start using a package by adding an import statement for it at the top of the code editor. For example, to use the Google Fonts package, add this:
import 'package:google_fonts/google_fonts.dart';
DartPad handles the pubspec details for you, so all you need is the import statement. You can use suggested completions to change fonts and then rerun the app, just like you would in an IDE.
How package support works
Here’s a quick overview of how package support works in DartPad. The DartPad server takes the set of supported packages and uses flutter pub get to fetch the latest compatible version of each package. Then the server uses these package versions during analysis and compilation of your DartPad script.
This release also supports the most popular Firebase packages, so you can access a suite of backend services without ever leaving DartPad. All necessary Firebase JavaScript SDKs are loaded into the output panel before running the compiled app.
Here’s a simple chat app that uses Firebase:
This multi-user chat app is implemented with only client-side Dart code running (and written) in the browser, and uses the Firestore database to share messages between users. While it might seem dangerous to open your database directly to users, it’s actually secured by only allowing chat messages that use a very specific set of words. Read the comments in the code to learn more about how it works.
To expand the chat app, you could implement sign-in to identify who said what by adding Firebase Authentication. We plan to add many more Firebase features to expand what you can do with Firebase in DartPad.
Supported packages
This first phase of the rollout supports a defined set of popular packages. To see what packages are available (and in what version), click the info icon at the lower right corner of the screen.
Give it a try!
Give DartPad package support a try today on dartpad.dev, and share any feedback with our team. We’ll continue to expand the list of supported packages over time. If you have any preference regarding which packages you’d like to see added, search for the issue that contains the desired package name, and give it a 👍 “thumbs up” reaction. If there’s no issue for the package you want, please create an issue and put the package name in the title.
We hope package support on DartPad empowers you to build and showcase your Flutter designs, ideas, vignettes, and more. We can’t wait to see what you build next!
