Hacktoberfest: Parabeac - Open-source design to Flutter code
Ivan Huerta
Posted on October 1, 2020
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!
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.
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!!!
Posted on October 1, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.