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

DescriptionDefault valueExample
Color class name prefixZeplinclass ZeplinColors
Use color nametrueColor(0xffffffff) => ZeplinColors.white
Text class name prefixText => CustomText
TextStyle class name prefixZeplinclass ZeplinTextStyles
Use text style namefalseZeplinTextStyles.title
Skip Default valuetrueFontWeight.w400, FontStyle.normal
Skip width in ContainertrueContainer(width: 120)
Skip height in ContainerfalseContainer(height: 120)
Skip margin left & right in ContainerfalseContainer(margin: EdgeInsets.only(left: 20, right: 20)
Skip font family in TextStyleAppleSDGothicNeo,HelveticaNeue (* : All font)
Skip letterSpacing in TextStyletrueTextStyle(letterSpacing: 1.2)
Skip lineHeight in TextStyletrueTextStyle(height: 1.2)
Skip StrutStyle in TexttrueText('',strutStyle: StrutStyle())

GitHub

Download the full project for this post from the following button

This source is fully free for all time

Download as zip

Comments are closed.

You're Offline!

Top