问候，开发人员！进入Flutter 3.10的迷人领域，其中主题是创建沉浸式和用户友好的应用程序的中心阶段。在此博客中，我们将踏上激动人心的旅程，以实现动态主题自定义。当我们获得对颜色无与伦比的控制时，拥抱ThemeExtension的强大功能。
让我们深入研究并将动态主题与自定义颜色扩展扩展到Flutter应用程序中！示例Github Repo您可以在这里找到
默认主题
默认情况下，Flutter提供了一个浅色和深色主题。这些主题带有针对应用程序栏，背景，文本，按钮等元素的预定义配色方案。在探索动态主题之前，让我们简要介绍一下浅色和深色模式的默认调色板。
步骤1：为应用程序创建主题。
// Theme
class AppTheme {
static ThemeData themeData(
{Color seedColor = Colors.green, bool isDark = false}) {
ColorScheme colorScheme = isDark
? ColorScheme.fromSeed(seedColor: seedColor).copyWith(brightness: Brightness.dark)
: ColorScheme.fromSeed(seedColor: seedColor).copyWith( brightness: Brightness.light);
return ThemeData(colorScheme: colorScheme);
}
}
步骤2：在您的 main.dart 文件中，使用您的浅色主题。
// ..
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "'Flutter Theme Example',"
theme: AppTheme.themeData(isDark: false),
darkTheme: AppTheme.themeData(isDark: true),
home: MyHomePage(),
);
}
}
使其动态
在本节中，我们将探讨如何在Flutter应用中动态更改主题颜色。使用此用户可以个性化他们的应用程序的外观。为了实现这一目标，我们将利用Flutter的ChangeNotifier在整个应用程序中更新主题。
步骤1.我们将首先创建一个appthemeprovider类，该类扩展了ChangeNotifier类，该类都在主题更改时通知听众。
class AppThemeProvider extends ChangeNotifier {
late Color _seedColor;
Color get seedColor => _seedColor;
set seedColor(value) {
_seedColor = value;
notifyListeners();
}
AppThemeProvider({required Color defaultColor}) {
_seedColor = Color.lerp(defaultColor, Colors.black, 0.1) ?? defaultColor;
}
void updateTheme(Color currentColor) {
seedColor = currentColor;
}
}
步骤2。现在更改您的main.dart文件添加changeNotifierProvider。
void main() {
runApp(
ChangeNotifierProvider<AppThemeProvider>(
create: (context) => AppThemeProvider(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final appThemeProvider = Provider.of<AppThemeProvider>(context);
return MaterialApp(
title: 'Flutter Theme Example',
theme: AppTheme.themeData(seedColor: appThemeProvider.seedColor),
darkTheme: AppTheme.themeData(seedColor: appThemeProvider.seedColor, isDark: true),
home: MyHomePage(),
);
}
}
步骤3：在您的任何页面中。
class MyHomePage extends StatelessWidget {
// ..
// call this for color change
void _toggleTheme(BuildContext context, Color seedColor) {
context.read<AppThemeProvider>().updateTheme(currentColor);
}
}
挑选颜色，您可以使用flutter_colorpicker。
使用thewexension自定义颜色
假设您需要对应用程序的调色板进行更多控制。例如，文本和背景的不同灰色。
Flutter提供了themexexensions，这是为应用程序主题添加自定义颜色的强大方法。使用theSexexensions，您可以定义诸如“表面”，“ onsurface”，“ primaly -high”等颜色。这些自定义颜色可让您对各种UI元素的外观进行颗粒状的控制，从而实现真正的个性化和凝聚力的应用程序设计。让我们这样做：
步骤1：创建一个名为app_theme_colors.dart的新飞镖文件。
@immutable
class AppThemeColors extends ThemeExtension<AppThemeColors> {
final Color onSurfaceHigh;
const AppThemeColors({
required this.onSurfaceHigh,
});
@override
ThemeExtension<AppThemeColors> copyWith({
Color? onSurfaceHigh,
}) {
return AppThemeColors(
onSurfaceHigh: onSurfaceHigh ?? this.onSurfaceHigh,
);
}
@override
ThemeExtension<AppThemeColors> lerp(
ThemeExtension<AppThemeColors>? other, double t) {
if (other is! AppThemeColors) {
return this;
}
return AppThemeColors(
onSurfaceHigh: Color.lerp(onSurfaceHigh, other.onSurfaceHigh, t) ??
other.onSurfaceHigh,
// isDark: true,
);
}
@override
String toString() {
return 'AppThemeColors(seed: $onSurfaceHigh)';
}
factory AppThemeColors.seedColor({
Color seedColor = Colors.red,
bool isDark = false,
}) {
print("isDark: $isDark $seedColor");
var surfaceBasedColor = isDark
? Color.alphaBlend(Colors.white.withOpacity(0.1), Colors.black)
: Colors.white;
var onSurfaceBasedColor = isDark ? Colors.white : Colors.black;
var onSurfaceHigh = Color.alphaBlend(
onSurfaceBasedColor.withOpacity(0.7), surfaceBasedColor);
return AppThemeColors(onSurfaceHigh: onSurfaceHigh);
}
}
步骤2：更新您的Main.dart以使用主题扩展。
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final appThemeProvider = Provider.of<AppThemeProvider>(context);
return MaterialApp(
title: 'Flutter Theme Example',
theme: AppTheme.themeData(seedColor: appThemeProvider.seedColor).copyWith(
extensions: <ThemeExtension<dynamic>>[
AppThemeColors.create(
isDark: false)
]),
darkTheme: AppTheme.themeData(seedColor: appThemeProvider.seedColor, isDark: true).copyWith(
extensions: <ThemeExtension<dynamic>>[
AppThemeColors.create(
isDark: true)
]),
home: MyHomePage(),
);
}
}
步骤3：更新页面以使用主题扩展
class MyPage extends StatelessWidget {
late AppThemeColors themeColors;
@override
Widget build(BuildContext context) {
themeColors = Theme.of(context).extension<AppThemeColors>() ??
AppThemeColors.create(); // if null
// ..
return Scaffold(
body: Container(
child: Text(
"By continuing, you agree to our",
style: TextStyle(color: themeColors.onSurfaceHigh),
),
),
);
}
}
通过设置app_theme_colors.dart，您现在可以轻松地在一个地方自定义浅色和黑暗主题，使您的代码更清洁，更可维护。
结论：
恭喜！您已经完成了动态主题和theeextensions的设置。
不要忘记尝试我们的example app
在您未来的项目中释放了颤音主题和theSextensions的全部潜力。
我们已经在App Hundi：唱片书之一中实现了这一点。
play.google.com