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