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

緣起

周末得空，逛了dribbble，發(fā)現(xiàn)了好多好看的設(shè)計(jì)，饞的不行。相信每個前端都有這樣一個夢想：能把設(shè)計(jì)稿直接生成代碼該多好，忽而想起了Flutter Interact上大佬們演示的插件，感覺有得搞??

sketch準(zhǔn)備

沒有vip不能下載，就自己照著預(yù)覽圖畫一個，丑莫怪~

Spuernova or xd-to-flutter

xd-to-flutter 在我準(zhǔn)備安裝的時候，得到了這樣的提示：

呵呵~

好在Spuernova（這貨是收費(fèi)的，哈哈哈）可以同時支持XD和sketch，那么話不多說，下載安裝，導(dǎo)入

這里直接選擇全部頁面

搞定~，so easy

生成的代碼可以直接點(diǎn)擊右上角的到處圖標(biāo)到處成項(xiàng)目或者單個文件，

這樣就完工啦~

生成的項(xiàng)目結(jié)構(gòu)大致如下：

運(yùn)行

生成的代碼在安裝完成后可以直接運(yùn)行。用VSCode打開剛剛生成的項(xiàng)目，flutter pub get一波沒有問題，

flutter run起來看看

海星，感覺哪里不對？字體圖標(biāo)和字體怎么都這樣樣子的？？

Spuernova中點(diǎn)擊字體圖標(biāo)看看，

原來這里的字體圖標(biāo)被轉(zhuǎn)成了圖片，但是字體并沒有問題，看來字體陰影的識別還是有一定問題。

不過 Spuernova提供了修改工具，并且可以實(shí)現(xiàn)hot-reload(但是無論怎樣都不能hot-reload...)

代碼品讀

簡單來看看生成的list組件：

整個頁面全部是stack，額~，又不是不能用。

雖然做成這樣不太智能，但是我們可以手動改生成組件的類型，點(diǎn)擊選中要更改類型的組件，右鍵選擇Convert to Component -> Text Field，我們嘗試將它轉(zhuǎn)換成一個輸入框。

/// 更改前的代碼
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雖然生成的代碼不能直接使用，但是到小組件級別還是可是省不少氣力的。

個人認(rèn)為最好用的其實(shí)是幫我們把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),
    ],
  );
}

實(shí)際項(xiàng)目中我們可能不止一套主題，那么將上面的生成的樣式稍加組織，就可以生成符合項(xiàng)目需求的主題：

// 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;
  }
}

到這里我們基本就結(jié)束了，都學(xué)會了嗎??????

總結(jié)

• UI直接生成UI代碼可行，但離完美還有很長一段路
• Spuernova是目前唯一可用的工具，缺點(diǎn)是收費(fèi)
• 圖標(biāo)字體會直接生成圖片，并引入
• 帶陰影的字體陰影想過不理想
• 生成的代碼不能直接用在項(xiàng)目中，只有個別組件可以直接應(yīng)用
• 生成的樣式可利用價值比較高