Convert the Sketch design to Flutter code

To create a mobile App, I think the difficult point is how to create the layout! And Flutter is a very nice framework for creating the cross-platform app, it can easier to handle the layout and create a beautiful app.

But if you want to convert a PSD or Sketch design to Flutter, it also not a simple task, you need to cut the image and write the code for creating the layout step by step, but now I will tell you another amazing tool for help to convert the design layout to Flutter code directly!

This is Supernova , and it’s a macOS app, it can easy to export the Flutter project from a Sketch design file, actually that not only Flutter but also native iOS, Android and React Native project, so this is a very amazing and powerful tool!

Sample Project

With Supernova, you can see the highlighted code for the selected element, so you can learn how to create a complex layout. But after I tried, I found that the auto-generate source code is not very well, it will add more useless codes, so I suggest just copy some layout code for your project, and you also need to modify it.

But anyway, this is very helpful for the developer and it will save a lot of time 😄