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

下載下傳位址：