CodePen With Flutter

Awais Ur Rehman
2 min readMay 3, 2020

Codepen is an online platform that allows us to write a code on different platform and save it on web. Even we can share our work on Web or we can keep it as private.

  • How to Start development on codepen ?

First, go to the Codepen website:

Then sign up with your details and then you can open the Flutter app. If you are not able to find then you can open this direct link that will open the Flutter project on Codepen. Just click on the below link and it will open Flutter project on Codepen.

Now you can see there is two option one is Open Flutter Editor and another is Try a Template.

  • Open Flutter Editor: If you click on Open Flutter Editor then it will open by default code. You can check the demo:

Now you can start your Flutter coding here and keep try an experiment and build awesome Flutter UI and share with anyone. Now you don’t require a highly configured system to run and test your Flutter app.

  • Try a Template: If you are new and want to try with the existing code test how does it work then click on Try a Template button and it will open UI Template on that you can keep changing in code and do an experiment on that. To try open Template you can click on below link:

Now you can choose any template and start playing with that and save to your project. To do that just click on any project and it will open in your codepen project.

Now you can play with this code. Just save in your project and start experimenting with that and build some awesome Flutter project and share with everyone.

Now, If you don’t have highly configure system and you were wondering how should i learn app development or Flutter App Development then Codepen Flutter is here to help you out.



Awais Ur Rehman

I am flutter/dart developer trying to learn new things .