手把手教你用Spuernova生成flutter代码-阿里云开发者社区

开发者社区> 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

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

相关文章
手把手教你生成对抗网络 GAN,50 行代码玩转 GAN 模型!
本文为大家介绍了生成对抗网络(Generate Adversarial Network,GAN),以最直白的语言来讲解它,最后实现一个简单的 GAN 程序来帮助大家加深理解。
1635 0
用后台代码创建Storyboard
            string storyboardName = "MyStoryBoard";             string myXamlElement = "MyXamlElement";             int newLeftPosition = 120;             Storyboard sb = XamlReader.
621 0
AST 代码扫描实战:如何保障代码质量
2020 年 618 大促已经过去,作为淘系每年重要的大促活动,淘系前端在其中扮演着什么样的角色,如何保证大促的平稳进行?又在其中应用了哪些新技术?淘系前端团队特此推出「618 系列|淘系前端技术分享」,为大家介绍 618 中的前端身影。 本篇来自于频道与D2C智能团队的菉竹,为大家介绍本次 618 大促中是如何用代码扫描做资损防控的。
1778 0
Intellij idea使用postgresql 反向生成实例, 'Basic' attribute type should not be 'Object'
mapped type不能Object? 本人使用 intellij idea 15 , postgresql 9.4,在开发java ee 。 在用 Hibernate时, 需要用数据库表反向生成实例,数据库中部分字段,是Int4,在反转的时候会爆出错误,下面是我的测试图,有木有大牛了解,可不可给给点解决方法,【生成后手动一个个修改回来除外】,各种google过……唉,求教....   下拉框中并没有String或Integer 的选项,只有Object和序列化两种。
1135 0
检查HTTP 的 Basic认证代码示例-JSP
检查HTTP 的 Basic认证. since http1.0 代码如下所示: R U OK? R U OK? . Your Password is 请参考代码中的注释,具体信息,还可以参考《图解HTTP》。
725 0
Couchdb装好,却无法使用Futon,或者无法生成View
昨天装好了Couchdb-1.0.2,用couchdb -b启动正常,用curl http://127.0.0.1:5984/也能收到欢迎信息,却打不开网页客户端Futon。 想起之前也碰到这样的问题,第二天自己好了,就把Linux重启了一下,解决了!应该是某个依赖的进程需要重启,猜测是js spidemokey。
922 0
利用setLayoutParams在代码中调整布局(Margin和居中)
MainActivity如下: package cn.testfixmargin; import android.os.Bundle; import android.
720 0
+关注
Android进阶开发
从事Android开发6年,是一名为自己而活的码农!
125
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载