Flutter and Zeplin: Speed up the Development Process from your Design

Roberto Juárez
Jul 9, 2019 · 4 min read
Image for post
Image for post

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?

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Then, click on Add to Zeplin, and select the project you want to use this extension.

Image for post
Image for post

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?

Container with BoxDecoration

Image for post
Image for post

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.

Image for post
Image for post

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.

Text Widget

Image for post
Image for post

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:

Image for post
Image for post

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.

Would you want to reach me out? Subscribe to my Youtube Channel and stay tuned to new features, or starred me on GitHub… Was it useful for you? Then smash the clap button 👏 many times as you want or you can share a coffee with me.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store