手把手教你用Spuernova生成flutter代碼

時間 2020-01-15

標籤手把手 spuernova 生成 flutter 代碼简体版

原文原文鏈接

緣起

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

`sketch`準備

沒有vip不能下載，就本身照着預覽圖畫一個，醜莫怪~ git

`Spuernova` or `xd-to-flutter`

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

呵呵~markdown

好在Spuernova（這貨是收費的，哈哈哈）能夠同時支持XD和sketch，那麼話很少說，下載安裝，導入app

這裏直接選擇所有頁面工具

搞定~，so easy字體

生成的代碼能夠直接點擊右上角的處處圖標處處成項目或者單個文件，ui

這樣就完工啦~this

生成的項目結構大體以下：spa

運行

生成的代碼在安裝完成後能夠直接運行。用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;
  }
}

複製代碼