Figma to Flutter: Parabeac 4.0 Updates to Components
Parabeac: An Overview
Parabeac Converts Figma designs to Flutter code. In our Components project type, you can convert reusable UI elements to Flutter code. For more information on how we do this, check out our docs.
Flutter Components: An Overview
UI components (as seen above) are pieces of UI that are reusable to build the entire front end of an application (as below). Flutter allows developers to create high-quality, natively compiled applications for mobile, web, and desktop from a single codebase. In Flutter, widgets are the building blocks of any Flutter application — the central idea is that you build your UI out of widgets. Because the word component is more universal and specific to UI, we’ve chosen to use the term component — even if the terms are used interchangeably in some spheres.
Old Component Referencing + Breakages
In the pre-Parabeac 4.0, layout builder was required to reference a component. If you have existing applications that reference components this way and make an update, this may cause breakages. All that is required to resolve this is delete layout builder and reference the component in the new, simplified way (shown below).
Parabeac 4.0+ Component Referencing
To use a component in Parabeac 4.0 or later, simply wrap your component in a size box that describes the desired dimensions of your component and reference the component as a child.
Hope this is useful and helps you to speed up and improve your UI coding process. Head to Parabeac Cloud to test it out!
Happy Coding!
