手把手教你用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

相关文章
|
Dart Linux API
Flutter 上使用 C/C++ 代码(上)
Flutter 上使用 C/C++ 代码(上)
2686 0
Flutter 上使用 C/C++ 代码(上)
|
2月前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧
|
2月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
【4月更文挑战第30天】Flutter旨在实现跨平台移动应用开发,但有时需针对iOS或Android编写特定代码。平台通道是关键机制,允许Dart代码与原生代码交互。通过`MethodChannel`等实现跨平台通信,然后在iOS和Android上响应调用。条件编译则在编译时决定特定平台代码。本文展示了如何在Flutter中处理平台特定功能,包括示例代码和总结。
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
|
2月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
|
11月前
|
前端开发 JavaScript Android开发
React Native 和 Flutter对比,包含代码实例
@[TOC](目录) React Native 和 Flutter 都是流行的跨平台移动应用开发框架。虽然它们在很多方面都有相似之处,但它们也有一些不同之处。在本文中,我们将详细比较这两个框架,讨论它们的优缺点、应用场景、性能以及包含的代码。 # 1. 框架概述 React Native 是由 Facebook 开发的一个开源框架,它允许开发者使用 JavaScript 和 React 来创建原生移动应用。React Native 可以用于开发 iOS、Android 和 Web 应用。它使用 JavaScript 的生态系统和工具,如 Babel、ESLint 和 React 工具链,使得开
121 0
|
2月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
140 1
|
9月前
|
存储 Dart 前端开发
原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!
原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!
65 0
|
11月前
|
开发框架 Dart Android开发
Flutter详解和代码实例
@[TOC](目录) Flutter 是一款由 Google 开发的跨平台移动应用开发框架,能够轻松构建高性能、美观的移动应用。Flutter 采用 Dart 语言作为主要编程语言,其核心理念是使用一套代码库来实现多个平台(iOS、Android、Web、桌面等)的应用开发。Flutter 框架包含了丰富的组件库和工具,如布局库、动画库、网络请求库、调试工具等,使得开发者能够快速构建复杂的移动应用。 本文将深入介绍 Flutter 框架的各方面,包括基础概念、核心架构、组件库、布局与渲染、网络请求、调试工具等。文章将包含多个代码示例和实践经验,帮助读者深入理解 Flutter 框架的使用和应用
|
开发框架 Dart 开发工具
使用Flutter开发一套可同时运行在Android和iOS平台的代码
Flutter是一种跨平台移动应用开发框架,它允许开发者使用单一代码库构建高性能、美观且可在多个平台上运行的应用程序。本文将介绍如何使用Flutter开发一套同时适用于Android和iOS平台的代码。