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. For some context, 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.
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!
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
.*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!
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!
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!
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.