Flutter Zeplin 代码生成器扩展？

Zeplin 的 Flutter dart 代码生成器。例如：Container、Text、Color、TextStyle 等 - 节省您的时间。⬇ 1.1k

入门

从 extensions.zeplin.io 将扩展添加到您的项目中。

特点

✅ Text 组件

✅ RichText 组件

✅ Container 组件

✅ BoxDecoration

✅ BoxShadow

✅ Border

✅ TextStyle

✅ StrutStyle

✅ Material 颜色名称

• [ ] LinearGradient
• [ ] RadialGradient

关键点

dartfmt (dart_style)

生成的代码格式尽可能设置为 dartfmt(dart_style)。
您无需重新格式化生成的代码。

选项

您可以通过 许多选项 以您想要的格式进行设置。

例如：选项：使用颜色名称 ✅

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

示例输出

Colors (项目)

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 - 带阴影的图层

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('Type something',
   style: TextStyle(
      color: ZeplinColors.black,
      fontSize: 20,
      fontFamily: 'SFProText',
   ),
),

RichText - 具有多种样式的文本图层

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',
            ),
         ),
      ],
   ),
),

选项

GitHub

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