Embed Flutter CodePen projects everywhere! 🤯

WAIT! Did you knew this?! Did anyone knew this?! Did CodePen.IO knew about this?!

Ok… lets backtrack a little bit. You can now make Flutter Web projects using CodePen

Announcing CodePen support for Flutter

that’s so cool! and I can use it to create amazing clone app like this WhatsApp one

That’s amazing! But then I noticed something. CodePen has different “View Modes”… Ok, we have “Pen” (regular view, code side by side), “Full” (full screen with CodePen bar on top) and “Debug” (full screen)… Why is this relevant? We’ll get back with this in a second.

Embedded CodePen projects

At the bottom right of your CodePen project you have this magic button called “Embed”

Once you get there, you have different “embed” modes:

• WordPress Shortcodes
• Perfil Embed
• iframe
• HTML

Not only that… you can directly embed CodePen projects like here by posting the link directly

Ok… we’re getting somewhere. My first test was trying to embed a Flutter CodePen project inside a Website.

Flutter CodePen Embedded

that’s not bad at all… but I want a full screen design, I don’t want any of those CodePen logos… Don’t get me wrong, but I want to show my examples like if it was an actual app running on web.

So, I came out with this solution, using that iframe with the “Debug” preview URL (yep, this is where that preview goes handy). The result? The following:

I can use my Flutter CodePen project embedded on ANY WEBSITE, literally! That means you can live showcase your projects on your WordPress blogs, Blogger or even your own hand made ones.

But then… something tick on me! What if I can embed a Flutter CodePen project on Flutter CodePen project?! 😳

You know, like a Flutter Inception 🤯🤯🤯

But, how to do it?! 🤷‍♂️

What you’re looking for is called “platformViewRegistry” this method is part of dart:ui library and part of the main library AKA you can use is on CodePen

With this following snippet, you can use it with a HtmlElementView part of dart:html library

// ignore: camel_case_types
class platformViewRegistry {
  static registerViewFactory(String viewId, dynamic cb) {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(viewId, cb);
  }
}

My solution came really simple, all you need to do is pass a few parameters around and you’re fine:

final IFrameElement _iFrameElement = IFrameElement();
Widget _iFrameWidget;
void loadIframe() {
  _iFrameElement.height = '100%';
  _iFrameElement.width = '100%';
  _iFrameElement.src = 'https://codepen.io/mkiisoft/debug/BaoWVrQ';
  _iFrameElement.style.border = 'none';
  _iFrameWidget = HtmlElementView(key: UniqueKey(), viewType: 'iframeElement');
  platformViewRegistry.registerViewFactory('iframeElement', (int viewId) => _iFrameElement);
}

Then, you use “_iFrameWidget” like any other widget! You can place it inside a SizedBox or similar to have constrained sizes (if you need it) and that it!

But wait! You can do something really cool, you can use a PNG image of a Phone, place your iframe with your Flutter CodePen project inside and make it looks like a real (and usable) mockup. Something like this:

and you can actually try it yourself here! 🤓💻

Embed Flutter CodePen

This is something amazing! I haven’t had this much fun making apps in my life! Flutter takes your imagination into a whole different and new way.

Why don’t you give it a try? Here’s how to start your own CodePen project

Flutter on CodePen

More Examples?! Here’s a Mega Post

Try Flutter Online now! Mega Post: UI, State Management, Animations, Designs and more

Social Media

Twitter

Mariano Zorrilla 💙

Github

MkiiSoft - Overview

CodePen

Mariano Zorrilla on CodePen