DEV Community

Cover image for Hacktoberfest: Parabeac - Open-source design to Flutter code
Ivan Huerta for Parabeac

Posted on

Hacktoberfest: Parabeac - Open-source design to Flutter code

Hacktoberfest 2020!

Parabeac is so excited to be participating in Hacktoberfest. We created this small post to share what we're working on & we'd love to have anyone interested to join us on our Discord community.

We'll also be hosting a meetup for anyone interested to help get started with Parabeac-Core!

Along with #Hacktoberfest offering it's own swag, Parabeac is giving 100 first contributor shirts to our top contributors for the month!
Parabeac Shirt

What is Parabeac-Core?

Parabeac-Core is an open-source repository that converts design files into Flutter code.


It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Parabeac-Core Getting Started

Unique Features

There are a couple of unique features that make this tool powerful. This is clearly an early project but there are some really neat things going on. We'd love your help to make these features AWESOME!

Parabeac Eggs

Eggs are probably the most exciting & creative things you can contribute to for Parabeac-Core. Eggs are able to override the basic interpretation of a design file & inject direct Flutter implementations into the conversion. For example, we use this to support AppBar & BottomNavigationBar. You can do this through the use of naming semantics where you name a Sketch element with .*appbar or .*tabbar & following their protocol. You could theoretically do things like create a Google Sign up button, which have logic baked into it. You're also able to inject instance variables into the state of the Stateful widget. We have plenty of egg ideas if you want to create them or if you have ideas, we'd love to hear them!

Reusable Code

Wouldn't you hate to see a designer use the same element over & over again, & your code does exactly that? Yeah, that's lame. It so happens to be that designers have very similar logic that developers have when creating reusable items. When designers create 'Symbols' they're actually creating reusable design elements. Parabeac-Core can interpret this & create functions that the developer can reuse. We currently need help supporting parameters as we began the implementation but haven't finished, let us know if you want to pick up where we left it!

Dynamic Sizing

When writing Flutter code, it is common to use tools like MediaQuery so that your UI can scale on different screen sizes. Luckily, Parabeac-Core supports this as well as flex-based layouts with Rows & Columns. We have some contributors who are working on improving this so that it scales from a mobile application to a web or desktop app as well. You're welcome to join the party!

Navigation / Prototyping

In tools like Sketch, you can prototype your application where you click a button and it takes you to a new screen. We interpret this automatically & inject Navigator()s into the code. However, we have some ideas on how to improve this in case you'd like to contribute to this.

Happy Hacking!!!

Top comments (2)

changjoopark profile image
ChangJoo Park(박창주)

Parabeac has an Awesome approach about design resource to Flutter code. It does not give a not code perfect at this time. but This project is Notable in flutter scene.

siliconivan profile image
Ivan Huerta

Thanks @ChangJoo, we appreciate it, & you've been an amazing contributor!