108

Almost a year ago, someone made a feature request to add support for Flutter/Dart code snippets, but as far as I can tell, nothing came of it. I'd like to make the argument that the ability to reproduce and debug Flutter layouts here on Stack Overflow would be incredibly beneficial for many users, and would take very little overhead to implement.

For those who don't know, Flutter is a declarative UI framework maintained by Google that lets developers maintain a single app codebase and target multiple platforms (iOS/Android, Linux/Windows/macOS) natively. It has gained popularity in recent years, especially on Stack Overflow:

Flutter and Dart tag trends.

And just yesterday, the Flutter and Canonical teams announced that they would be working together to optimize the technology for building and distributing Linux applications. Given the traction Flutter has been gaining, I expect we'll see more questions related to this framework over the coming years.

However, in my experience, Flutter questions are typically harder to answer because they frequently pertain to stateful UI issues, and not something that can be easily resolved by just looking at a snippet of code - thankfully, in December 2020, DartPad began offering Flutter support, enabling people to build and reproduce layouts in the browser. This is extremely useful, and the majority of Flutter questions I come across begin with me asking the OP to reproduce it on DartPad: Here is a real question from this morning where this was necessary, and quickly after adding the snippet, the question was answered.

What's interesting is that DartPad offers embed endpoints (see the Embedding Guide), and could be easily wired up to the existing Stack Snippets UI. The main kicker is that snippets would need to be saved as GitHub gists in order to be automatically loaded by the embedded iframe, but that seems to be the only caveat.

Using that real-world question as a template, I created these previews of how this would look:


In a post

Display in .post-text .snippet .snippet-code with width: 100%; min-height: 400px. (Consider how much easier it is to answer this question with an interactive example as opposed to a block of source code.)

Post preview.


In the minimized editor

Displayed in #post-form #wmd-preview with width: 100%; min-height: 400px; margin-top:8px.

Snippet preview.


In the full-page editor

Displayed inside .snippet-holder .d-flex.h100 with width: 100%.

Full snippet editor.

The DartPad license seems to be MIT-like, so there should be no issues on that front:

https://github.com/dart-lang/dart-pad/blob/master/LICENSE

I am curious whether or not there is interest in this.

2
  • What panel of the Stack Snippet would this type of code be placed in? The HTML, CSS, or JS panel? Or are you saying add an entirely new runnable code sandbox function to the editor post just for this language?
    – TylerH
    Commented Aug 3, 2020 at 21:53
  • 4
    Specifically I'm curious if you think this would be integrated to the Stack Snippet featureset, how it would relate/blend with front-end languages which are currently available for any kind of programming. Alternatively, if you think SO should create an entirely new feature sitting side-by-side with Stack Snippets, why should such a limited-use language such as Flutter get such special treatment? Just because it is the flavor of the week? Why not make some broad UI sandbox that can then import Flutter and other UI mockup/wireframe technologies for when Flutter enters Google's graveyard.
    – TylerH
    Commented Aug 4, 2020 at 2:48

1 Answer 1

45

I'm one of the maintainers for DartPad. I was really stoked to see this question, and I thought I'd respond with a little more info from our end.

First, we'd love to see an integration like this. DartPad is intended to be a flexible learning tool that people can drop into their existing stuff. If the Stack Exchange folks want to use DartPad that way, it should work out of the box, and we'd be happy to help with any feature requests.

I believe questions like this have come up before for other editors (jsFiddle, for instance), and there's a concern about keeping the code on Stack Overflow itself, so this site can be the source of truth. DartPad can theoretically load a snippet from any server that can serve it with proper CORS headers, so it's possible an approach that kept the source code in the post and added a link to open it in DartPad might be a more ideal solution.

Also, it's possible to use DartPad's analysis and compilation backend on its own and build a completely new front-end just for SO. That's the strategy CodePen.io took when adding their new Flutter editor, and so far it's working out well.

While I'm a regular SO user, I don't venture into Meta very often, so if this should have been a comment rather than an answer, forgive me. I wanted to say something, though, since y'all were talking about one of my favorite projects. :)

4
  • What would you guys think about a queryString param for URL-encoded source code, i.e. &code=import%20'package%3Aflutter%2Fmaterial.dart'%3B... to populate editor onload? I think the reliance on gist is the only real speed bump here.
    – Lewis
    Commented Jul 10, 2020 at 21:07
  • 1
    We've thought about it, but URLs have length limits, which would in turn restrict the length of code snippets that could be loaded that way.
    – RedBrogdon
    Commented Jul 10, 2020 at 23:33
  • 2
    Could we set up some sort of postMessage based API? I think that works cross-domain Commented Jul 10, 2020 at 23:56
  • 4
    That's how the dropdown on the front page of flutter.dev works, so it's definitely possible. I think the larger concern, though, is that the Stack Exchange devs probably want more control over their UI/UX than they'd have with someone else's iframe embedded in the page. If I were an SO admin, I'd want to know things like uptime guarantees, how to test new features and UI changes before they went live, and a bunch of other stuff before I went dropping third-party iframes into the site I'd been building for more than a decade. :)
    – RedBrogdon
    Commented Jul 12, 2020 at 5:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .