Flutter and Zeplin: Speed up the Development Process from your Design
Almost over a year ago, Zeplin provided a new door for developers to build their extensions to generate and display code snippets from different design resources. Since this great initiative, several extensions have been added to Zeplin, extensions for HTML, CSS, React Native, Xamarin Forms and many more.
I am a Flutter Developer and I lost a lot of time coding basic widgets from the design or getting the information about different properties like colors, shadows, borders, gradients and so on. So I decided to build my extension to generate the DART code with only select one layer from design.
After reading all the documentation provided by Zeplin and invest time to develop the extension, I finished and published it to the Zeplin repository… After two days, I am so excited to announce to you my extension called Flutter Extended is now published, so you can add it to your Zeplin projects and get started to use it. https://extensions.zeplin.io/roberto_juarez/zeplin-flutter-extended
How to install the extension?
The first step is to go to your Zeplin project and then click on Extensions -> Explore Extensions
You will see the world of all extensions in Zeplin, as I mentioned before, all kinds of these; for HTML, CSS, SCSS, Less, React Native, Swift and many more. Extensions are a powerful tool to spread up your development process so I invite you to research more about them. The extensions are open source.
Back to the topic, you will need to search the Flutter Extended extension, so you need to go at the bottom of the page or use CMD+F to search with the name.
Then, click on Add to Zeplin, and select the project you want to use this extension.
Ready, you have added the extension to your project and you will be able to use it. So go back to your Zeplin project and get started.
How to use the Extension?
Open a Zeplin project and you can test different elements from the design. I have opened one of my projects and I will give you some examples of the implemented features. Let’s get started!
Container with BoxDecoration
For this scenario, there is an element on the design with different features, the element has a Linear Gradient, Shadows, and a Border Radius… When I click on it, I have in the right window all properties about the Container. Let’s see:
Well, after this I need to test if this code is giving me all properties correctly, so I will open a Flutter project with Android Studio and I will test it. Let’s go ahead!
…We open a new Flutter project and paste the Container widget as a child of the column.
I copied exactly the snippet code (you can check it out) from Zeplin extension and then I pasted into the Flutter project. You can see the results with all the features for the Container, without invest time to code the Widget.
For this second scenario, we will continue with the same element from the design, so now I will add the child text to the container, let’s go ahead!
Then copy the code and paste it into the Flutter project, you will need to add a child to the Container and wrap with Center Widget. These are the results:
You will note the font family is different, the reason is we have not added the Montserrat font to assets elements. (I let you this part as a homework for you).
I hope this tool can be useful for you, and help you to speed up your development process from design. Please give me your comments and feedback to go improving the extension. Keep stay to know everything about new updates. Different features are coming soon, buttons, components, radial and sweep gradients, and much more.