[FIX ISSUE #264] Approach for Open In Dart-Pad Feature

[rish07]

Is your feature request related to a problem? Please describe.
Issue #264 mentions the feature that I am referring to.

Describe the solution you'd like
If you check the contributing.md file on Dart pad's repo, the way you create a new sample is by creating a github gist of the code and then passing it like https://dartpad.dev/{gistID} . This way you can open the sample code that is present in the gallery on dart pad with Open In Dart-Pad button. I have implemented this feature on my local fork the only problem that I have is creating Gists.

To create a public gist I need to authenticate. And since this has to be general, I can not use my own account to generate all the gists and hardcode it. So even though I can generate a gist with dart code and get a gist id, authentication still needs to be done. How do I overcome this problem?

Describe alternatives you've considered
An alternative could be to make users sign in with GitHub using OAuth with gists in scope in the begging of the website or while using this feature so we have access to the access tokens and make gists in their accounts itself.

Additional context
Add any other context or screenshots about the feature request here.

[rish07]

@pennzht @guidezpl @rami-a @shihaohong

[rish07]

For example, a sample gist I made is https://gist.github.com/rish07/fd7c3bbd704a11b1976fe6ae224834ea, so to open in dart pad I just have to open https://dartpad.dev/fd7c3bbd704a11b1976fe6ae224834ea. So for all the examples in the gallery, we just need to create a gist of the sample code and then open a browser tab with the above-mentioned link.

[shihaohong]

cc/ @RedBrogdon do you happen to know who integrated Dartpad into Flutter's API docs? Could a similar approach be taken in the Flutter gallery?

[guidezpl]

cc @pennzht You may have some thoughts on this

[rish07]

Got a reply from @domesticmouse on dart-lang repo, It also mentions that we need a gist ID for the code, which brings back us to the problem I am facing in the first comment and my solution would be to let user's do an OAuth.

[RedBrogdon]

DartPad's full-screen UI can load code solely from gists. It's embedded UI, however, can load from four different sources:

• A GitHub gist
• The containing page (in the case of an embedded DartPad)
• The Flutter API Doc server
• A GitHub repo

We don't really publicize the last two, because the API doc server is a very specific use case, and the ability to load from a repo never really caught on. It does work, though.

If necessary, we (or someone from this project) could bring one of those loading pathways from the embedded page's script into the full-screen DartPad page (the "playground," as it's referred to in the codebase).

[rish07]

What do you suggest I do next? @RedBrogdon

[RedBrogdon]

I'll defer to what the Material team wants to do with the gallery. If they'd like to generate code in this repo (or another) similar to what you see here:

https://github.com/RedBrogdon/dartpad_exercises/tree/master/embeddings_demo/flutter_just_main

That's something DartPad can currently load into its embedded UI and would likely not be difficult to have the playground UI load as well.

[rish07]

So for all the demo code that flutter gallery has, we create something like the repo you mentioned and open these pages when they click on Open in dart pad button? @RedBrogdon

[rish07]

and why wouldn't https://dartpad.dev/example/embed-flutter.html?gh_owner=rish07&gh_repo=dartpad_gallery&gh_path=flutter_allfiles this work @RedBrogdon?

https://github.com/rish07/dartpad_gallery/tree/master/flutter_allfiles

[RedBrogdon]

and why wouldn't https://dartpad.dev/example/embed-flutter.html?gh_owner=rish07&gh_repo=dartpad_gallery&gh_path=flutter_allfiles this work @RedBrogdon?

It does! You just need to remove "example" from the URL:

https://dartpad.dev/embed-flutter.html?gh_owner=rish07&gh_repo=dartpad_gallery&gh_path=flutter_allfiles

[rish07]

Ah my bad @RedBrogdon! I'll try to implement this feature today then. @shihaohong @guidezpl

[rish07]

@RedBrogdon
https://dartpad.dev/embed-flutter.html?gh_owner=rish07&gh_repo=gallery&gh_path=lib/demos/material/app_bar_demo&gh_ref=test&theme=dark&run=true&mode=flutter,

I was just testing it on Material's App Bar demo and everything is working fine. Only problem is, it's opening in Dart mode and not flutter. So when I run it, I don't see the UI output. How do I fix it?

Expecting something like this UI output

@guidezpl @shihaohong @pennzht

[rish07]

There are two issues in https://dartpad.dev/embed-flutter.html?gh_owner=rish07&gh_repo=gallery&gh_path=lib/demos/material/app_bar_demo&gh_ref=test&theme=dark&run=true&mode=flutter,

1) import 'package:flutter_gen/gen_l10n/gallery_localizations.dart'; this is not working
2) There is not main function like:

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AppBarDemo(),
    ),
  );
}

But again here, the white theme flutter example runs without the main function

@RedBrogdon

[rish07]

@shihaohong @guidezpl @pennzht Should I go ahead make changes and create a PR as I mentioned above?

[rish07]

Any suggestions @shihaohong @guidezpl @pennzht ?

[rish07]

There are two issues in https://dartpad.dev/embed-flutter.html?gh_owner=rish07&gh_repo=gallery&gh_path=lib/demos/material/app_bar_demo&gh_ref=test&theme=dark&run=true&mode=flutter,

1) import 'package:flutter_gen/gen_l10n/gallery_localizations.dart'; this is not working
2) There is not main function like:

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AppBarDemo(),
    ),
  );
}

But again here, the white theme flutter example runs without the main function

@RedBrogdon

I think having a feature to import packages in dart pad would fix one of these issues. @RedBrogdon @rami-a @guidezpl

[rish07]

@RedBrogdon Any idea when this can be implemented?

There are two issues in https://dartpad.dev/embed-flutter.html?gh_owner=rish07&gh_repo=gallery&gh_path=lib/demos/material/app_bar_demo&gh_ref=test&theme=dark&run=true&mode=flutter,
1) import 'package:flutter_gen/gen_l10n/gallery_localizations.dart'; this is not working
2) There is not main function like:

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AppBarDemo(),
    ),
  );
}

But again here, the white theme flutter example runs without the main function
@RedBrogdon

I think having a feature to import packages in dart pad would fix one of these issues. @RedBrogdon @rami-a @guidezpl

[parlough]

I'm going to close this issue the gallery is unlikely to support this functionality at this point, but anyone is free to fork the gallery and/or implement similar functionality. Thanks so much for all of the previous ideas and discussion here!

I've also raised a newer lightweight DartPad proposal that would potentially support "Open in DartPad". Consider checking that out and providing feedback or continuing the discussion around the idea.