手把手教你用Spuernova生成flutter代码

作者：Keriy
链接：https://juejin.im/post/5e1c5d7ef265da3df860f9bf
来源：掘金

缘起

周末得空，逛了dribbble，发现了好多好看的设计，馋的不行。相信每个前端都有这样一个梦想：能把设计稿直接生成代码该多好，忽而想起了Flutter Interact上大佬们演示的插件，感觉有得搞🙃

sketch准备

没有vip不能下载，就自己照着预览图画一个，丑莫怪~

Spuernova or xd-to-flutter

xd-to-flutter 在我准备安装的时候，得到了这样的提示：

呵呵~

好在Spuernova（这货是收费的，哈哈哈）可以同时支持XD和sketch，那么话不多说，下载安装，导入

这里直接选择全部页面

搞定~，so easy

生成的代码可以直接点击右上角的到处图标到处成项目或者单个文件，

这样就完工啦~

生成的项目结构大致如下：

运行

生成的代码在安装完成后可以直接运行。用VSCode打开刚刚生成的项目，flutter pub get一波没有问题，

flutter run起来看看

海星，感觉哪里不对？字体图标和字体怎么都这样样子的？？

Spuernova中点击字体图标看看，

原来这里的字体图标被转成了图片，但是字体并没有问题，看来字体阴影的识别还是有一定问题。

不过 Spuernova提供了修改工具，并且可以实现hot-reload(但是无论怎样都不能hot-reload...)

代码品读

简单来看看生成的list组件：

整个页面全部是stack，额~，又不是不能用。

虽然做成这样不太智能，但是我们可以手动改生成组件的类型，点击选中要更改类型的组件，右键选择Convert to Component -> Text Field，我们尝试将它转换成一个输入框。

/// 更改前的代码
Container(
  width: 57,
  height: 57,
  decoration: BoxDecoration(
    color: Color.fromARGB(255, 111, 124, 132),
    boxShadow: [
      BoxShadow(
        color: Color.fromARGB(44, 29, 30, 32),
        offset: Offset(2, 2),
        blurRadius: 3,
      ),
    ],
    borderRadius: BorderRadius.all(Radius.circular(8)),
  ),
  child: Container(),
)

/// 更改后的代码
Container(
  width: 57,
  height: 57,
  decoration: BoxDecoration(
    color: Color.fromARGB(255, 111, 124, 132),
    boxShadow: [
      BoxShadow(
        color: Color.fromARGB(44, 29, 30, 32),
        offset: Offset(2, 2),
        blurRadius: 3,
      ),
    ],
    borderRadius: BorderRadius.all(Radius.circular(8)),
  ),
  child: TextField(
    style: TextStyle(
      color: Color.fromARGB(255, 0, 0, 0),
      fontWeight: FontWeight.w400,
      fontSize: 12,
    ),
    maxLines: 1,
    autocorrect: false,
  ),
)

还是可以的，只要稍加修改就可以使用。

从上面的代码来看，Spuernova虽然生成的代码不能直接使用，但是到小组件级别还是可是省不少气力的。

个人认为最好用的其实是帮我们把UI里面的样式全部提取了出来，放在values目录下：

// colors.dart
import 'dart:ui';

class AppColors {
  static const Color primaryBackground = Color.fromARGB(255, 38, 173, 211);
  static const Color secondaryBackground = Color.fromARGB(255, 36, 38, 44);
  static const Color ternaryBackground = Color.fromARGB(255, 74, 78, 122);
  static const Color primaryElement = Color.fromARGB(255, 38, 43, 47);
  static const Color secondaryElement = Color.fromARGB(255, 243, 64, 61);
  static const Color accentElement = Color.fromARGB(255, 47, 52, 57);
  static const Color primaryText = Color.fromARGB(255, 93, 99, 106);
  static const Color secondaryText = Color.fromARGB(255, 183, 190, 199);
  static const Color accentText = Color.fromARGB(255, 137, 145, 152);
}

// gradients.dart

import 'package:flutter/rendering.dart';

class Gradients {
  static const Gradient primaryGradient = LinearGradient(
    begin: Alignment(0.5, 0),
    end: Alignment(0.5, 1),
    stops: [
      0,
      1,
    ],
    colors: [
      Color.fromARGB(255, 41, 44, 49),
      Color.fromARGB(255, 49, 54, 59),
    ],
  );
  static const Gradient secondaryGradient = LinearGradient(
    begin: Alignment(0.5, 0),
    end: Alignment(0.5, 1),
    stops: [
      0,
      1,
    ],
    colors: [
      Color.fromARGB(255, 51, 54, 59),
      Color.fromARGB(255, 37, 40, 45),
    ],
  );
}

实际项目中我们可能不止一套主题，那么将上面的生成的样式稍加组织，就可以生成符合项目需求的主题：

// custom_theme.dart
// 蠢蠢的写法，大佬们勿笑

import 'package:flutter/material.dart';

class CustomTheme {
  CustomTheme({
    this.lightShadowColor,
    this.darkShadowColor,
    this.lightShadowBlur,
    this.weightShadowBlur,
    this.lightShadowOffset,
    this.weightShadowOffset,
  });

  Color lightShadowColor;
  Color darkShadowColor;

  double lightShadowBlur;
  double weightShadowBlur;

  Offset lightShadowOffset;
  Offset weightShadowOffset;

  factory CustomTheme.light() => CustomTheme(
    ...
      );

  factory CustomTheme.dark() => CustomTheme(
        lightShadowColor: Color.fromARGB(255, 46, 42, 53),
        darkShadowColor: Color.fromARGB(255, 85, 59, 60),
        lightShadowOffset: Offset.zero,
        weightShadowOffset: Offset.zero,
        lightShadowBlur: 3,
        weightShadowBlur: 3,
      );

  static ThemeData darkTheme = ThemeData(
    appBarTheme: AppBarTheme(elevation: 0),
    scaffoldBackgroundColor: Color(0xFF2E3439),
    primarySwatch: MaterialColor(
      0xFF2E3439,
      {
        50: Color(0xFF8293A1),
        100: Color(0xFF768693),
        200: Color(0xFF6D7B87),
        300: Color(0xFF606D78),
        400: Color(0xFF515C66),
        500: Color(0xFF48535C),
        600: Color(0xFF3F4850),
        700: Color(0xFF384046),
        800: Color(0xFF30383E),
        900: Color(0xFF2E3439),
      },
    ),
  );

  static ThemeData lightTheme = ThemeData(
    appBarTheme: AppBarTheme(elevation: 0),
    scaffoldBackgroundColor: Color(0xFF2E3439),

    ...,
  );

  static CustomTheme of(BuildContext context) {
    Brightness brightness = MediaQuery.of(context).platformBrightness;
    return brightness == Brightness.dark ? CustomTheme.dark() : CustomTheme.light();
  }

  static ThemeData systemTheme(BuildContext context, [Brightness brightness]) {
    Brightness _brightness = brightness ?? MediaQuery.of(context).platformBrightness;
    return _brightness == Brightness.dark ? darkTheme : lightTheme;
  }
}

到这里我们基本就结束了，都学会了吗😺😝😄

总结

• UI直接生成UI代码可行，但离完美还有很长一段路
• Spuernova是目前唯一可用的工具，缺点是收费
• 图标字体会直接生成图片，并引入
• 带阴影的字体阴影想过不理想
• 生成的代码不能直接用在项目中，只有个别组件可以直接应用
• 生成的样式可利用价值比较高

学习分享，共勉
题外话，毕竟我在三星小米工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心，但很多FLutter兴趣爱好者进阶学习确实资料，今天我把我搜集和整理的这份学习资料分享给有需要的人，若有关Flutter学习进阶可以与我在Flutter跨平台开发终极之选交流群一起讨论交流。下载地址：https://shimo.im/docs/yTD3t8Pjq3XJtGv8

下载地址：https://shimo.im/docs/yTD3t8Pjq3XJtGv8