原文

https://medium.com/@sheikhg19…

参考

• 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

© 猫哥

• https://ducafecat.tech/
• https://github.com/ducafecat
• 微信群 ducafecat
• b 站 https://space.bilibili.com/40…

往期

开源

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…