As a Flutter or Dart developer, having an online IDE environment that allows you to create and share your prototypes as quickly as possible in a browser is important. Why? Having a sandbox environment in your browser to develop a Flutter application can open up a lot of opportunities, such as:
- You can share code and embed live examples in your documentation.
- You can rapidly prototype your idea and build an application and share it.
- You can reproduce bugs and attach them to your issues when you open them, which can help maintainers start debugging quickly.
- You can learn to use different packages from Pub and save a lot of time setting up an environment; you can even share what you have learned.
- You can teach Flutter and Dart without needing to set up an environment, which will speed up the learning process.
… and perhaps so many other opportunities.
Zapp
Today, we proudly announce Zapp, an in-browser IDE that will help you build Flutter and Dart applications.
With Zapp, you can enjoy building Flutter apps as though in your favorite IDE, especially if you are a VSCode user; you should feel at home.
Let me introduce to you some essential features of Zapp.
Use any Pub package
Add any package that supports the Web platform in Flutter and Dart to your pubspec.yaml file and use it right in your browser with Zapp!
IntelliSense
Zapp provides syntax highlighting, autocompletion and so much more with it’s built-in Dart analyzer. Step in and out of your code and find definitions and documentation, get code completion, parameter info, quick info, member lists, and much more.
Preview & Share
Rename your project, get a unique shareable URL that everyone can access, and send it to your community members to preview and load instantly.
Command Palette
Search, find, and run command actions, just like in VS Code. The command palette helps you perform actions and be productive.
Other Features
- Themes: Zapp provides you with dark and light mode for now, but we have plans to support most VS Code “themes” in the editor so you can select what your favorite theme.
- Logs: You can see logs, click and navigate through stack trace locations and view output of the Dart analyzer.
- Debugging: Zapp helps you to debug your application as quickly as possible with your browsers own devtools/debugger. See example.
- Embedding: You can create a rapid prototype; for example and get a minimal embedded edition of Zapp and add directly into your documentation!.
- Git features: Edit, change, organize and see the difference to find out what you have changed. Committing and pushing support coming in a later release.
- Run Tests: In Zapp, you can write Unit and Widget tests and run them in your browser.
- Many more: Many more features will be added to Zapp soon, but we would love to hear your feedback and prioritize what the community needs.
Roadmap
We are building Zapp to help the community. Therefore, we have opened a Public Board, where you can see the backlog and even help us prioritize them by giving your vote on issues.
Early Access
Zapp is evolving, and we are actively developing. Hence, we now invite you to join our Zapp Early Access Program and help make this product even better for everyone.
Once you navigate to zapp.run, sign in with your GitHub account, then wait until your access is given (you’ll be notified by email once you have been added to the EAP).
If you found a bug or have a feature in mind that we should develop, please open an issue on the GitHub Zapp repository and let us know what you are looking for. We appreciate any feedback.
Watch the live stream
Tune in to our live stream later to learn more and to ask questions:
Conclusion
Stay tuned for more updates and exciting news that we will share in the future. Follow us on Zapp_run Twitter, Invertase Twitter, Invertase Linkedin, and Invertase Youtube, and subscribe to our monthly newsletter to always stay up-to-date.