原文
https://medium.com/@sheikhg1900/using-flutter-theming-tools-generated-dart-material-theme-in-your-application-f190f3919e88
参考
正文
在你的 android 手机上打开 Flutter 主题工具应用程序 。按照指南为你的应用程序准备一个很棒的 Dart 主题。
将生成的 Dart 主题代码复制到剪贴板中。
要在您的计算机上获取主题,请在 IDE 中,(例如 Visual Studio Code)。将其粘贴到您手机上的 slack 聊天中,以便您可以从计算机上的 slack 获取代码。在移动设备 slack 上,输入 ```。将出现一个框。将剪贴板内容粘贴到该框中。
可选:按照相同的步骤为黑暗模式生成另一个 Dart 主题。
打开您现有的 flutter 项目。使用以下内容创建 generated_theme.dart
文件。
1 2 3 4 5
| import 'package:flutter/material.dart';ThemeData get mylightTheme { return theme; }ThemeData get myDarkTheme { return theme; }
|
用生成的代码替换 TODO 注释。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
| ThemeData get mylightTheme {
var theme = ThemeData( primarySwatch: Colors.blue, brightness: Brightness.light, ); theme = theme.copyWith( colorScheme: theme.colorScheme.copyWith( onPrimary: const Color(0xffffffff), secondary: Colors.deepOrange, ), ); 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), ), ), ), ), ), ); 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), ), ), ), ), ), ); 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
属性。
1 2 3 4 5 6
| MaterialApp( title: 'Flutter Demo', theme: mylightTheme, ---- ---- )
|
所需的包.
google_fonts
© 猫哥
往期
开源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新闻客户端
https://github.com/ducafecat/flutter_learn_news
strapi 手册译文
https://getstrapi.cn
微信讨论群 ducafecat
系列集合
译文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
开源项目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 编程语言基础
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基础入门
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 组件开发
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
邮箱 ducafecat@gmail.com / 微信 ducafecat / 留言板 disqus