Site icon Flutter Packages | Pub dev Packages – Flutter Mobile App World

The Flutter dart code generator from zeplin

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

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

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

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

🚀The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, … – Save your time.
https://github.com/naver/zeplin-flutter-gen
6 forks.
53 stars.
4 open issues.

Recent commits:

Exit mobile version