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

preferences

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())

GitHub

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