Flutter Gen Zeplin Extension 

The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, … – Save your time. ⬇ 1.1k

Getting started

Add the extension to your project from extensions.zeplin.io.

Features

 Text Widget
 RichText Widget
 Container Widget
 BoxDecoration
 BoxShadow
 Border
 TextStyle
 StrutStyle
 Material Color names

•  LinearGradient
•  RadialGradient

Key points

dartfmt (dart_style)

The generated code format is set to dartfmt(dart_style) as much as possible.
You don’t need to reformat genrated code.

Options

Many options are available in the format you want.

ex) Option: Use color name 

Color(0xffffffff) /// ❌
Colors.white /// ⭕️

Sample Output

Colors (Project)

class ZeplinColors {
   static const Color red = Color(0xffff0000);
   static const Color green = Color(0xff00ff00);
   static const Color yellow = Color(0xffffff00);
   static const Color white = Color(0xffffffff);
}

Container – Layer with shadow:

Container(
   height: 100,
   margin: EdgeInsets.only(
      left: 50,
      right: 50,
   ),
   decoration: BoxDecoration(
      boxShadow: [
         BoxShadow(
            color: ZeplinColors.black50,
            offset: Offset(0, 2),
            blurRadius: 4,
            spreadRadius: 6,
         ),
      ],
   ),
),

Text – Text layer

Text('Type something',
   style: TextStyle(
      color: ZeplinColors.black,
      fontSize: 20,
      fontFamily: 'SFProText',
   ),
),

RichText – Text layer with multiple styles

RichText(
   text: TextSpan(
      children: [
         TextSpan(
            text: 'Type',
            style: TextStyle(
               color: ZeplinColors.black,
               fontSize: 20,
               fontFamily: 'SFProText',
               fontWeight: FontWeight.w500,
            ),
         ),
         TextSpan(
            text: 'something',
            style: TextStyle(
               color: ZeplinColors.black,
               fontSize: 20,
               fontFamily: 'SFProText',
            ),
         ),
         TextSpan(
            text: 'red',
            style: TextStyle(
               color: ZeplinColors.red,
               fontSize: 20,
               fontFamily: 'SFProText',
            ),
         ),
      ],
   ),
),

Options

Description	Default value	Example
Color class name prefix	Zeplin	class ZeplinColors
Use color name	true	Color(0xffffffff) => ZeplinColors.white
Text class name prefix		Text => CustomText
TextStyle class name prefix	Zeplin	class ZeplinTextStyles
Use text style name	false	ZeplinTextStyles.title
Skip Default value	true	FontWeight.w400, FontStyle.normal
Skip width in Container	true	Container(width: 120)
Skip height in Container	false	Container(height: 120)
Skip margin left & right in Container	false	Container(margin: EdgeInsets.only(left: 20, right: 20)
Skip font family in TextStyle		AppleSDGothicNeo,HelveticaNeue (* : All font)
Skip letterSpacing in TextStyle	true	TextStyle(letterSpacing: 1.2)
Skip lineHeight in TextStyle	true	TextStyle(height: 1.2)
Skip StrutStyle in Text	true	Text('', strutStyle: StrutStyle())

Contributing

Welcome to contribute. Thank you very much for your supporting!

Development

This extension is developed using zem, Zeplin Extension Manager. zem is a command line tool that lets you quickly create, test and publish extensions.

To learn more about creating Zeplin extensions, see documentation.

Download Flutter Gen Zeplin Extension source code on GitHub

https://github.com/naver/zeplin-flutter-gen