开发者社区> Android进阶开发> 正文

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

简介: Flutter 学习资料 视频
+关注继续查看

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

缘起

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

sketch准备

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

Spuernova or xd-to-flutter

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

呵呵~

好在Spuernova(这货是收费的,哈哈哈)可以同时支持XDsketch,那么话不多说,下载安装,导入

这里直接选择全部页面

搞定~,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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MyBatis Generator (MBG) 代码生成器简介
MyBatis Generator(MBG)是MyBatis MyBatis和iBATIS的代码生成器。它将生成所有版本的MyBatis的代码,以及版本2.2.0之后的iBATIS版本。它将内省数据库表(或许多表),并将生成可用于访问表的工件。
1414 0
【约束布局】ConstraintLayout 之 Chains 链式约束 ( Chains 简介 | 代码 及 布局分析 | 链头设置 | 间距设置 | 风格设置 | 权重设置 )(三)
【约束布局】ConstraintLayout 之 Chains 链式约束 ( Chains 简介 | 代码 及 布局分析 | 链头设置 | 间距设置 | 风格设置 | 权重设置 )(三)
27 0
用后台代码创建Storyboard
            string storyboardName = "MyStoryBoard";             string myXamlElement = "MyXamlElement";             int newLeftPosition = 120;             Storyboard sb = XamlReader.
634 0
手把手教你生成对抗网络 GAN,50 行代码玩转 GAN 模型!
本文为大家介绍了生成对抗网络(Generate Adversarial Network,GAN),以最直白的语言来讲解它,最后实现一个简单的 GAN 程序来帮助大家加深理解。
1710 0
检查HTTP 的 Basic认证代码示例-JSP
检查HTTP 的 Basic认证. since http1.0 代码如下所示: R U OK? R U OK? . Your Password is 请参考代码中的注释,具体信息,还可以参考《图解HTTP》。
789 0
+关注
Android进阶开发
从事Android开发6年,是一名为自己而活的码农!
125
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载