flutter theme 主題樣式生成工具

會煮咖啡的貓發表於2021-10-15
Flutter

原文

https://medium.com/@sheikhg19...

參考

正文

在你的 android 手機上開啟 Flutter 主題工具應用程式 。按照指南為你的應用程式準備一個很棒的 Dart 主題。

將生成的 Dart 主題程式碼複製到剪貼簿中。

要在您的計算機上獲取主題，請在 IDE 中，_(例如 Visual Studio Code)。將其貼上到您手機上的 _slack 聊天中，以便您可以從計算機上的 slack 獲取程式碼。在移動裝置 slack 上，輸入 \`\`\`。將出現一個框。將剪貼簿內容貼上到該框中。

可選：按照相同的步驟為黑暗模式生成另一個 Dart 主題。

開啟您現有的 flutter 專案。使用以下內容建立 generated_theme.dart 檔案。

import 'package:flutter/material.dart';ThemeData get mylightTheme {// TODO: Copy Generated Light Theme Here.
return theme;
}ThemeData get myDarkTheme {// TODO: Copy Generated Dark Theme Here.
return theme;
}

用生成的程式碼替換 TODO 註釋。

ThemeData get mylightTheme {
// Flutter Theming Tool 1.0.0+10, developed by Tamata Soft
// Initialize ThemeData.
  var theme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  );// Main Setting.
  theme = theme.copyWith(
    colorScheme: theme.colorScheme.copyWith(
      onPrimary: const Color(0xffffffff),
      secondary: Colors.deepOrange,
    ),
  );// ElevatedButton Setting.
  theme = theme.copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.0),
              topRight: Radius.circular(16.0),
            ),
          ),
        ),
      ),
    ),
  );// OutlinedButton Setting.
  theme = theme.copyWith(
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.0),
              topRight: Radius.circular(16.0),
            ),
          ),
        ),
      ),
    ),
  );// Chip Setting.
  theme = theme.copyWith(
    chipTheme: theme.chipTheme.copyWith(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16.0),
          bottomRight: Radius.circular(16.0),
        ),
      ),
      labelStyle: (theme.chipTheme.labelStyle).copyWith(
        color: Colors.deepOrange,
        shadows: [
          const Shadow(
            blurRadius: 2.0,
            color: Colors.grey,
          )
        ],
      ),
      secondaryLabelStyle: (theme.chipTheme.labelStyle).copyWith(
        shadows: [
          const Shadow(
            blurRadius: 2.0,
          )
        ],
      ),
    ),
  );
  return theme;
}

開啟 main.dart 檔案。在 MaterialApp 小部件中新增 theme 屬性。

MaterialApp(
 title: 'Flutter Demo',
 theme: mylightTheme,
 ----
 ----
)

所需的包.

google_fonts

© 貓哥

往期

開源

GetX Quick Start

https://github.com/ducafecat/...

新聞客戶端

https://github.com/ducafecat/...

strapi 手冊譯文

https://getstrapi.cn

微信討論群 ducafecat

系列集合

譯文

https://ducafecat.tech/catego...

開源專案

https://ducafecat.tech/catego...

Dart 程式語言基礎

https://space.bilibili.com/40...

Flutter 零基礎入門

https://space.bilibili.com/40...

Flutter 實戰從零開始 新聞客戶端

https://space.bilibili.com/40...

Flutter 元件開發

https://space.bilibili.com/40...

Flutter Bloc

https://space.bilibili.com/40...

Flutter Getx4

https://space.bilibili.com/40...

Docker Yapi

https://space.bilibili.com/40...

相關文章