invertase / zapp.run

Zapp! A free online sandbox environment for building Flutter applications in the browser.

Zapp!

Welcome to the GitHub repository for Zapp! An online editor allowing you to build Flutter applications in the browser.

https://zapp.run

The source code for Zapp is currently closed-source, this repository is used for issue reporting, feature requests and a public project roadmap.

Note: Zapp is currently in open beta so please report any issues.

FAQs

What is Zapp?

Zapp is an online developer environment for building, running and sharing Flutter projects in the browser.

Where is the source code for Zapp?

Zapp is currently a closed source project, accessible via https://zapp.run. We may decide to open source it in the future, and will update this repository if we decide to do so.

What pub.dev packages are supported?

Zapp builds projects using Flutter Web, therefore only packages which support Flutter Web are supported in Zapp. If a package you are using supports web but isn't working correctly, please file an issue so we're able to investigate.

What isn't supported?

We're currently working hard to get as many features supported as possible. The top features we do not yet support are:

• Dart lints (via analysis_options.yaml) #18
• Semantic token highlighting #19

zapp.run's Issues

Git shows sometimes the changes and sometimes not

Project ID (e.g. flutter-123456): I don't know anymore. I think it was just edit/flutter
Operating System & Version (e.g. macOS Monterey 12.1): 12.2.1
Browser & Version (e.g. Chome 102.0.5005.115): 102.0.5005.115 (Official Build) (arm64)

Demo

Screen.Recording.2022-06-22.at.11.49.59.mov

I'm not able to reproduce it anymore. I'm not sure if this is because I hit the "Save" button 🤔

Run `flutter pub get` when `pubspec.yaml` changed and you press save

In VS Code it's so that when you change the pubspec.yaml and press save, that flutter pub get gets executed. I excepted the same for Zapp! when I added a package in pubspec.yaml.

Screen.Recording.2022-06-23.at.00.36.03.mov

`.zapp/main.js` is visible as changed file

Should changes in this file be visible to users?

Support code snippets for `StatelessWidget`, `StatefulWidget` and maybe `StatefulWidget` with `AnimationController`.

In VS Code, I'm using a lot the code snippets of the Flutter extension. It would be helpful to have them also in Zapp!.

Code snippets from the Flutter extension: https://github.com/Dart-Code/Dart-Code/blob/master/snippets/flutter.json

A demo from VS Code:

Screen.Recording.2022-06-23.at.00.27.05.mov

Support moving files

I'd like to be able to move files from one directory to another. It would be great if imports get updated.
The same goes for directories, but that's maybe not as important as moving files.

It's unclear to me what the save button does exactly

When using Zapp! it is unclear to me what happens when I press the save button. I asked me the following questions:

• Where will it be saved?
• Saves this the project locally?
• Saves this the project in my GitHub profile?

I would expect maybe a one sentence explanation as tooltip when hovering with the mouse over the save button.

Add support for dart-only projects

Is your feature request related to a problem? Please describe.
Zapp always thinks you are building a Flutter app, even if you remove the flutter dependency and import e.g. dart:html.

Describe the solution you'd like
A separate mode or project setup for Dart-only apps without the dependency on Flutter. Something in the direction of how in DartPad you can choose between Dart vs Flutter when creating a new project.

Describe alternatives you've considered
I tried around with just going with it and importing dart:html and other dart-only packages. This kinda works but is really unstable, there are always flutter-bits popping up in the console and analyzer.

Additional context
My main use-case is to use jaspr together with Zapp. In the future I might host examples and demos of this web framework on Zapp, but this requires better support for Dart-only web apps.

Support creating a project from a directory in a GitHub repo

Is your feature request related to a problem? Please describe.
Many projects have an example directory. It would be great if you could just point to it and have a Zapp project be populated with the files.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Always starting in line 2 instead of line 1 when creating a new file

Project ID (e.g. flutter-123456): flutter-z8006cm810
Operating System & Version (e.g. macOS Monterey 12.1): 12.2.1 (21D62)
Browser & Version (e.g. Chome 102.0.5005.115): Chrome 102.0.5005.115 (Official Build) (arm64)

### Demo

Screen.Recording.2022-06-22.at.17.49.41.mov

Steps to reproduce

1. Create a new file

What I would expect

I would expect to start in line 1.

Support hosted preview urls (e.g. share a preview only url)

Is your feature request related to a problem? Please describe.
I would like to share an app with my friends without code i.e share the app preview.

Describe the solution you'd like
A public link can be used by anyone without a Zapp account and renders the project's output without the source code tab. Just like a web app.

Additional context
As discussed here
I do not have access to Zapp yet so I am not sure if this is already possible. If it is already possible can't wait to try it out.

Regardless this feature is there or not I am super excited to try Zapp 🚀

Support copy/paste for files/directories

Please add the ability to copy/paste files/directories in the side panel. So files/directories can be duplicated too.

• Copy and paste in the same folder should create a copy with an updated filename.
  • home.dart
    copy and pasted
  • home_copy.dart
• Ability to copy and paste files in different folders.
• Can use shortcuts to copy/paste files.

Related to:
#10
#48

Weird overflow issue

Operating System & Version (e.g. macOS Ventura 13.0):
Browser & Version (e.g. Safari 16.0 (18614.1.19.1.5)):

Description

Screen.Recording.2022-07-14.at.4.50.23.PM.mov

Give a better visual indication for running commands

I would like to see a clear indication when running commands like run or pub get.
Currently, I see a small circular indicator and it's too fast, appears/disappears very quickly and it looks the same when running the app or executing pub get. If I've hidden the preview panel and run the app, I don't have any clear indication if I ran the app.

• I would like to see some text status or colored indication.
• Add a little delay so you can user notice the command is processing.
  When no making changes to the YAML file in VSC and executing pub get still shows status for a second. In Zapp, it is like microseconds of the tiny circular indicator, very easy to miss and not notice so I end up hitting the pub get button multiple times.

Something like this with a minimum delay

Circular indicator running the app
Circular indicator running pub get

Here is a demo

Screen.Recording.2022-07-19.at.13.16.55.mov

Add option to change the main entry-point (supporting monorepos)

Imagine you have a folder structure like the FlutterFire repo. It would be nice to set the main entry-point so you are able to run code from monorepos (like specifying the -t argument for the flutter run command).

At the moment, it's forced to the lib/main.dart

Widget test fails: `Timer is still pending even after the widget tree was disposed.`

Project ID (e.g. flutter-123456): flutter-zp006nsp106
Operating System & Version (e.g. macOS Monterey 12.1): macOS 12
Browser & Version (e.g. Chome 102.0.5005.115): Chrome

Description

My widget test is passing locally but in Zapp it's failing:

GitHub repository to test it locally: https://github.com/nilsreichardt/clipboard-test

Embedding a Zapp

Once out of EAP, we'll enable a single Zapp project to be embedded onto any website via an iframe with customisable options:

• Control the theme
• Lazy load (blocked loading until the user interacts with the iframe)
• ....?

Menus not closing on Safari

Operating System & Version: iPad 11" with iOS 15.5
Browser & Version: Safari and Chrome on iPad

Description

Currently it's not possible to close the three dot context menu with the GitHub, Twitter and other social links. A second tap on the three dots does nothing.

Add shortcuts to hide/show panels

Please add shortcuts to hide/show side panel, logs, output, preview panel etc.

Similar to VSC display shortcuts

Enable Ctrl+S

Is your feature request related to a problem? Please describe.
I often press Ctrl+S while developing, but in Zapp I just get a native popup to save the html file.

Describe the solution you'd like
It would be great to have Ctrl+S do what "Save" button does.

Describe alternatives you've considered
/

Additional context
/

Menu doesn't close in Safari

When we press something and the menu items pop up, they are not closing upon clicking outside in Safari. But, works fine when checked in Chrome browser.

Project ID: flutter-z9k066s9l06
Operating System & Version: macOS Monterey 12.4
Browser & Version: Safari 15.5

Description

I can give 2 scenarios that I faced:

1. Click on 3dots on top right. It doesn't close when pressed any links.
2. Right click to delete a file, menu pops up. It doesn't show that it's deleted which is already (checked in chrome that it was deleted) and the menu is still visible.3.

When I try to press the main.dart in the right top, I am still unable view the menu to change the run to test.

Screenshot:

Support semantic colors/highlighting

Project ID (e.g. flutter-123456): flutter-z8006cm810
Operating System & Version (e.g. macOS Monterey 12.1): 12.2.1
Browser & Version (e.g. Chome 102.0.5005.115): 102.0.5005.115 (Official Build) (arm64)

### Description

See my Zapp projects

In an early version of Zapp it was possible to access all its Zapp projects. As temporary solution for #4 the last has been removed. However, it would be nice to get a list Zapp projects back :)

Minimap setting does not reflect current state

The minimap toggle initially does not reflect the actual visibility of the minimap.
After toggling between on and off it works correctly.

Please add Vi key-binding

Is your feature request related to a problem? Please describe.
For many of us vi key-binding is mandatory for working effectively in an IDE.

Describe the solution you'd like
Please add vi-binding for the basic writing/editing functions.

Describe alternatives you've considered
IDK, are there any alternatives? :)

Downloaded code zip/folder name does not reflect the project name

Download code zip/folder name does not reflect the project name which is there on Editor. It take always a long alphanumeric string.

Open Git repository directly into zapp

Is your feature request related to a problem? Please describe.
Adding a clone feature so that one can directly open their repositories and work directly into it.
Maybe having a URL to open it which can be further used to create buttons in readme

Provide visual code default code formatting settings

Is your feature request related to a problem? Please describe.
There is no way to formate the code lines equivalent VC code, code formate settings. Providing an option on editor like a button or settings where users can formate the code lines, will be more useful.

Describe the solution you'd like

Additional context
Basically user should be able to format code using shortcuts or a button pressing on the editor.

Support organize imports

In VS Code I can organize my imports by running "Organize Imports"

Screen.Recording.2022-06-23.at.00.39.33.mov

Would be nice to have the same option in Zapp.

Add new files and directories in directory which currently has focus

When clicking on one of the buttons to add a file or directory at the top of the explorer, the new file is always added at the root.
From VS Code, I'm used to the new file being created in the directory which currently has focus or which contains the file which has focus. More often than not, this is what I want.

Can't Delete a file

Project ID ( flutter-zx6067nx706):
Operating System & Version (Windows 10):
Browser & Version ( Chrome Version 103.0.5060.114 (Official Build) (64-bit)):

Description

Allow selecting a Flutter version

Is your feature request related to a problem? Please describe.
Imagine you need to use a feature of a new Flutter version. At the moment, it's not possible because it looked to the Flutter version 3.1.0.

Describe the solution you'd like
Clicking at the Flutter version at the right bottom corner. A menu opens which allows me to select a different Flutter version.

Additional context

Maybe something like this (screenshot from DartPad). The best case would be to allow selecting everything Flutter version that is available.

Support custom dart lints and `analysis_options.yaml`

I added analysis_options.yaml and have the flutter_lints package in the dependencies. But the Dart linter does not work.

My Zapp: https://dart-zapp.web.app/edit/flutter-zd006htd10

How it should like with lints:

How it looks in Zapp:

Simplify flow to set up Firebase

I have set up Firebase in this project to see how Firebase Auth works with Zapp. Sign in with E-Mail and Google works great.

The only slightly inconvenient step was pulling together the FirebaseOptions for Firebase.initializeApp.

I'd like to be able to select one of my Firebase projects from within Zapp and have the FirebaseOptions generated into a file, similar to how the flutterfire CLI does it.

Dependency Overrides is not supported on pubspec.yaml

Is your feature request related to a problem? Please describe.
When users use dependency overrides for pubspec.yaml with git references, it does not seem to be working.

Describe the solution you'd like
One should be able to use pubspec.yaml in the same way they use it on the IDE.

Describe alternatives you've considered
N/A

Additional context
N/A

Does not resolve pub package

Hi
I just tested the zap and want to use a package, the analyzer working but I can't run the app.

Error: Couldn't resolve the package 'upstash_redis' in 'package:upstash_redis/upstash_redis.dart'.
file:///zapp/project/lib/my_app.dart:2:8: Error: Not found: 'package:upstash_redis/upstash_redis.dart'
[00:51:59] import 'package:upstash_redis/upstash_redis.dart';
file:///zapp/project/lib/my_app.dart:31:25: Error: The method 'Redis' isn't defined for the class 'MyHomePage'.
'MyHomePage' is from 'file:///zapp/project/lib/my_app.dart'.
Try correcting the name to the name of an existing method, or defining a method named 'Redis'.
final redis = Redis(

Project ID: flutter-zps06a9pt06
Operating System & Version: MacOS 10.15.4 (19E287)
Browser & Version: Chrome 103.0.5060.114

Files remain "unsaved" after Run

Project ID: flutter-zc406k9c506
Operating System & Version: Ubuntu 20.04.4 LTS
Browser & Version: Chrome 101.0.4951.54

Description

This may be intended, but to me was unexpected.

After changing some source file and running, everything runs fine, but "Save" remains clickable and "M" tag stays on the source file, although latest changes were saved and built.

Reproduction Steps

• Edit a source file
• Don't press "Save"
• Press "Run"

In the image below, I changed "Flutter app" title into "Flutter a" and pressed "Run" button.
Observe that "M" tag on the file is still present and "Save" button enabled, after a successful build of changes.

Enable semantic highlighting

Dart Analysis Server provides us with Semantic Token data, however the results don't match up with the editor we have.

I think the line/columns numbers are offset differently than what Monaco Editor expects.

Support git for pubspec packages

Great work team! You can find the related information below.

Project ID (e.g. flutter-123456): flutter-z6406tg6506
Operating System & Version (e.g. macOS Monterey 12.1): macOS Monterey 12.4
Browser & Version (e.g. Chome 102.0.5005.115): Chrome Version 103.0.5060.114 (Official Build) (arm64)

Description

When I try to fetch some library references with git, it waits to fetch them around 120 seconds and fails. I assume it causes a time out.

hot reload on save

Is your feature request related to a problem? Please describe.
It'd be useful if the app is reloaded when we save it as in VS Code.

Describe the solution you'd like
Hot reload on save like in vs code.

Pinching over editor zooms it

Screen.Recording.2022-06-28.at.17.53.10.mov

Pinching on the trackpad of my MacBook over the editor zooms it, and it's quite hard to control. I'm not sure if it's necessary for the zoom of the editor to be modifiable at all.

Give editor more space in default layout

This is what the layout looks like when I open Zapp on a 14-inch MacBook:

I'd prefer it If the default width of the code editor would fit 80 characters, and the panel was collapsed:

Support for Assets

Zapp project

This looks specific to Zapp since I could not find any other reports of this type of error. It originates in the flutterfire_ui SignInScreen. While parsing the Google icon SVG, there is some kind of problem.

Here are the logs when this error was thrown (upside down):

[23:04:41] SvgTheme(currentColor: null, fontSize: 14, xHeight: 7))
[23:04:41] "packages/flutterfire_ui/assets/icons/google.svg", colorFilter: null, theme:
[23:04:41] Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#afa7f(), name:
[23:04:41] null, colorFilter: null)
[23:04:41] Picture provider: ExactAssetPicture(name: "packages/flutterfire_ui/assets/icons/google.svg", bundle:
[23:04:41] 
[00:00:00] at <fn> async_patch.dart:166:15<dart_sdk> 
[00:00:00] at _startMicrotaskLoop schedule_microtask.dart:49:5<dart_sdk> 
[00:00:00] at _microtaskLoop schedule_microtask.dart:40:11<dart_sdk> 
[00:00:00] at callback zone.dart:1276:23<dart_sdk> 
[00:00:00] at runGuarded zone.dart:1236:7<dart_sdk> 
[00:00:00] at run zone.dart:1328:19<dart_sdk> 
[00:00:00] at _rootRun zone.dart:1426:13<dart_sdk> 
[00:00:00] at <fn> future_impl.dart:430:9<dart_sdk> 
[00:00:00] at _propagateToListeners future_impl.dart:795:13<dart_sdk> 
[00:00:00] at handleValueCallback future_impl.dart:766:44<dart_sdk> 
[00:00:00] at handleValue future_impl.dart:147:18<dart_sdk> 
[00:00:00] at runUnary zone.dart:1335:19<dart_sdk> 
[00:00:00] at _rootRunUnary zone.dart:1434:47<dart_sdk> 
[00:00:00] at <fn> async_patch.dart:45:50<dart_sdk> 
[00:00:00] at parse parser_state.dart:888:13<project> 
[00:00:00] at [_discardSubtree] parser_state.dart:819:27<project> 
[00:00:00] at moveNext iterator.dart:42:9<project> 
[00:00:00] at throw_ errors.dart:251:49<dart_sdk> 
[23:04:41] When the exception was thrown, this was the stack:
[23:04:41] 
[23:04:41] ">" expected at 26:27
[23:04:41] The following XmlParserException was thrown resolving a single-frame picture stream:

Support deleting directories

It's already possible to delete files, but not directories. Especially when importing files (#2) as a starting point, it might be useful to be able to delete whole directories.

Support opening app full-screen in another tab

This would give the editor and the app more space when multiple screens are available, and would be useful when the app layout does not work well in the space next to the editor.

The app should reload in the other tab when clicking "Build".

Clicking on the Embed button does not show the files of my Zapp

Project ID (e.g. flutter-123456): flutter-z8006cm810
Operating System & Version (e.g. macOS Monterey 12.1): 12.2.1 (21D62)
Browser & Version (e.g. Chome 102.0.5005.115): Chrome 102.0.5005.115 (Official Build) (arm64)

Description

Screen.Recording.2022-06-22.at.18.23.13.mov

You can see in the video that in the menu for the embed button the default files are shown.

I would expect to see in the embed menu my file from my Zapp project.

Support adding packages via VS Code Command

In VS Code I have the option to run the following commands:

• Dart: Add Dependency
• Dart: Add Dev Dependency

Screen.Recording.2022-06-23.at.00.31.40.mov

This just runs:

flutter pub add PACKAGE_NAME

Marking text in the logs tab is a bit buggy

Project ID (e.g. flutter-123456): flutter-zp006nsp106
Operating System & Version (e.g. macOS Monterey 12.1): macOS 12
Browser & Version (e.g. Chome 102.0.5005.115): Chrome

Description

Screen.Recording.2022-07-06.at.22.10.13.mov

My goal is to select the whole text.

Support suggesting imports

Project ID (e.g. flutter-123456): flutter-z8006cm810
Operating System & Version (e.g. macOS Monterey 12.1): 12.2.1 (21D62)
Browser & Version (e.g. Chome 102.0.5005.115): Chrome 102.0.5005.115 (Official Build) (arm64)

Problem

Screen.Recording.2022-06-22.at.18.59.23.mov

When I press Command and . I would expect to get a menu with suggested imports, like in VS Code.

Screen.Recording.2022-06-22.at.18.59.54.mov

Can't save anymore when I deleted `lib/my_app.dart`

Project ID (e.g. flutter-123456): flutter-z8006cm810
Operating System & Version (e.g. macOS Monterey 12.1): 12.2.1 (21D62)
Browser & Version (e.g. Chome 102.0.5005.115): Chrome 102.0.5005.115 (Official Build) (arm64)

### Description

Screen.Recording.2022-06-22.at.18.14.12.mov

Logs

From the Chrome Console:

index.07ca92b9.js:187 NotFoundError: Could not find lib/my_app.dart.
    at fs.2f906194.js:89:7989
    at Generator.next (<anonymous>)
    at Y (fs.2f906194.js:89:6848)
    at S (fs.2f906194.js:89:7053)

It was not clear to me what kind of projects are listed in the GitHub tab.

My initial thought was that I see my GitHub projects in the GitHub tab. But as you can see in the screenshot, there was no project. So I thought it's a bug or planed feature. Later I realized that there are my saved projects listed (related to #3).

Maybe use "Your Zapp! projects" instead "Your projects"?