Solution button missing

[funwithflutter]

What happened?

I was attempting to embed DartPad along with a solution.dart, but no matter what I try I can't get the solution button to show up.

The embedding-guide indicates that this is possible. However, on the Dart/Flutter Codelabs and examples none of those DartPads show a solution button. Which makes me think this is no longer supported?

Here is an example of where I expected a solution, but none is showing on my browser (Tried chrome and safari): https://dartpad.dev/embed-dart.html?id=43f3db47b0632c557200270807696687

Here is a tutorial that I followed: https://medium.com/flutter/how-to-embed-a-flutter-application-in-a-website-using-dartpad-b8fd0ee8c4b9

I cloned the example given and tried to add a solution.dart. Code: https://github.com/funwithflutter/flutter_code/tree/master/lib/dartpad

DartPad: https://dartpad.dev/embed-flutter.html?gh_owner=funwithflutter&gh_repo=flutter_code&gh_path=lib/dartpad

Additionally, the documentation around dartpad_metadata.yaml is extremely scarce.

Any help will be appreciated.

Additional info

Browser

Browser: Safari and Chrome

Version: 14.0.3 and 91.0.4472.114 (Official Build) (x86_64)

Are you using any extensions/plugins that affect website behavior No ad blockers, just password managers

Are there any warnings or errors in your browser's JavaScript console? If so, paste them below:

Uncaught TypeError: Cannot read property 'gag' of null embed_flutter.dart.js:7447
    at hg.eb (embed_flutter.dart.js:12694)
    at embed_flutter.dart.js:12626
    at uz.a (embed_flutter.dart.js:1825)
    at uz.$2 (embed_flutter.dart.js:6660)
    at u7.$1 (embed_flutter.dart.js:6652)
    at m1.fR (embed_flutter.dart.js:7479)
    at ts.$0 (embed_flutter.dart.js:7056)
    at Object.fA (embed_flutter.dart.js:1929)
    at J.bX (embed_flutter.dart.js:6961)
    at ie.aM (embed_flutter.dart.js:6646)

Machine

Operating system: MacOs

Version: Big Sur 11.2.1

Your code

What code was in the editor, if any, when the failure occurred? You can paste it in below:

https://dartpad.dev/embed-flutter.html?gh_owner=funwithflutter&gh_repo=flutter_code&gh_path=lib/dartpad

DartPad's output

Did DartPad print anything to the console pane? If so, paste it below:

No

If you were running Flutter code, you can also paste an image of the Flutter output directly into this bug report.

[RedBrogdon]

Thanks for filing an issue!

Have you tried your link with an embedded layout that's in an iframe, rather than loaded directly into the browser? The code for that layout makes the assumption that it's surrounded by a containing page, and doesn't always perform correctly when loaded directly.

It's definitely possible to display a solution file, though, as you can see in our embedded example page: https://dartpad.dev/example/embed.html

Additionally, the documentation around dartpad_metadata.yaml is extremely scarce.

This is true, mostly because few people outside our team have used that particular method for loading code with DartPad. If you have specific suggestions for improving the docs, please feel free to file additional issues (or comment here).

Also, do you mind talking a bit about what you're putting together? I'm guessing you're the same Fun With Flutter from YouTube -- are you working on resources to go with your videos, for example?

[funwithflutter]

Thanks for the quick reply!

An embedded layout is where I initially tried - though at some point I only tried directly loaded into the browser without embedding (thanks for that tip).

That said, on https://dartpad.dev/example/embed.html only the HTML example is showing a solution for me.

Not getting solutions for any of the Flutter/Dart embeds.

The one in the screenshot is loading https://github.com/RedBrogdon/dartpad_exercises/tree/master/embeddings_demo/flutter_all_files which has a solution.dart.

Same for https://dartpad.dev/example/inject.html

<p>mode-dart</p>
<pre>
    <code class="language-run-dartpad:mode-dart">
        {$ begin main.dart $}
        String message = 'Hello, World!';
        {$ end main.dart $}

        {$ begin solution.dart $}
        String message = 'delete your code';
        {$ end solution.dart $}

        {$ begin test.dart $}
        main() => print(message);
        {$ end test.dart $}
    </code>
</pre>

With regards to the docs, definitely add the embedding example you gave. I didn't see any links to that but maybe I missed it. And it's also unclear to me if a git repo with a dartpad_metadata.yaml route is the only way to go to get solutions, testing, etc; or if you can simply point it to a gist with a main.dart, solution.dart, and whatever else.

And yeah I'm the FunWithFlutter from YouTube 📽 On the subject, thanks for all the videos/tutorials that you've made! They've been extremely helpful to me.

And also yes, I'm planning on using DartPad more in future tutorials and courses. It would be nice to have something easily usable for someone watching a tutorial to reinforce learning.

For the last year I've used DartPad in a course I have on Flutter animation. I'm in the process of revamping the course and would like to make the DartPad examples more engaging. So having hints, testing and solutions would be amazing! Also keen on the step-through examples. The course is on Teachable, which supports embedding HTML. So it may be that my issues are because of something clashing between the injected HTML and whatever Teachable is doing. But I'm also experiencing these issues on the links given above.

I also encountered a GitHub rate limit. Is this something I should be worried about from a tutorial/course perspective? Or should I scrap embedding and go the injection route (once that starts working for me😂).

Sorry for the essay and thanks for the help.

[funwithflutter]

Any updates @RedBrogdon

Also what would be the approach to get something like this going: https://dartpad.dev/workshops.html?webserver=https://dartpad-workshops-io2021.web.app/inherited_widget&utm_source=google-io21&utm_medium=referral&utm_campaign=io21-resources

[johnpryan]

@funwithflutter the Workshop Authoring Guide might be what you're looking for.

[parlough]

As part of the new, simplified version of the DartPad frontend, the exercise functionality this was related to was removed.

If anyone would like to see similar functionality brought back, please check out https://github.com/dart-lang/dart-pad/issues/2702 or open a new issue. Thanks so much!