手把手教你用Spuernova生成flutter程式碼

Keriy發表於2020-01-13
Flutter

緣起

週末得空，逛了dribbble，發現了好多好看的設計，饞的不行。相信每個前端都有這樣一個夢想：能把設計稿直接生成程式碼該多好，忽而想起了Flutter Interact上大佬們演示的外掛，感覺有得搞?

sketch準備

沒有vip不能下載，就自己照著預覽圖畫一個，醜莫怪~

lHNEss.jpg

Spuernova or xd-to-flutter

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

lHNtdx.png
lHNaFK.png

呵呵~

好在Spuernova（這貨是收費的，哈哈哈）可以同時支援XD和sketch，那麼話不多說，下載安裝，匯入

lHNWY8.png

lHNoOs.png

這裡直接選擇全部頁面

lHNz6J.jpg

搞定~，so easy

生成的程式碼可以直接點選右上角的到處圖示到處成專案或者單個檔案，

lHUC01.png

這樣就完工啦~

生成的專案結構大致如下：

lHB3QO.png

執行

生成的程式碼在安裝完成後可以直接執行。用VSCode開啟剛剛生成的專案，flutter pub get一波沒有問題，

lHdiRO.png

flutter run起來看看

lHafMQ.png

海星，感覺哪裡不對？字型圖示和字型怎麼都這樣樣子的？？

Spuernova中點選字型圖示看看，

lHykN9.png

lHyWbF.png

原來這裡的字型圖示被轉成了圖片，但是字型並沒有問題，看來字型陰影的識別還是有一定問題。

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

lHw1tx.png

程式碼品讀

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

lH0mPP.png

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

雖然做成這樣不太智慧，但是我們可以手動改生成元件的型別，點選選中要更改型別的元件，右鍵選擇Convert to Component -> Text Field，我們嘗試將它轉換成一個輸入框。

lH0vLQ.png

/// 更改前的程式碼
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目錄下：

lHB3QO.png

// 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是目前唯一可用的工具，缺點是收費
  • 圖示字型會直接生成圖片，並引入
  • 帶陰影的字型陰影想過不理想
  • 生成的程式碼不能直接用在專案中，只有個別元件可以直接應用
  • 生成的樣式可利用價值比較高

（其實沒的水的，辣雞200~）

生成的程式碼在這裡

相關文章