如何在Flutter中设置主主题的颜色?

izkcnapc  于 2023-11-21  发布在  Flutter
关注(0)|答案(3)|浏览(177)

我想在我的主题中设置一个颜色为原色。当原色改变时,其他颜色也应该改变。
我知道如何为主题中的任何颜色指定一个硬编码的颜色,但我不知道如何动态地引用原色。
我是这么做的:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        textTheme: const TextTheme(titleLarge: TextStyle(color: Colors.black)),
      ),
      home: const MyHomePage(),
    ));

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('ok', style: Theme.of(context).textTheme.titleLarge),
    );
  }
}

字符串
是否可以参考原色而不是设置黑色?

lf5gs5x2

lf5gs5x21#

您可以创建自己的ThemeData子类,并覆盖相应颜色的getter,以返回原色。

class CustomThemeData extends ThemeData
{
  // Implement appropriate constructor or factory
  // ...

  // Then override getter to return the primary color
  @override
  Color get cardColor => this.primaryColor;
}

字符串
并在运行应用程序时使用它

void main() => runApp(MaterialApp(
  theme: CustomThemeData(
    useMaterial3: true,
    textTheme: const TextTheme(titleLarge: TextStyle(color: Colors.black)),
  ),
  home: const MyHomePage(),
));

au9on6nz

au9on6nz2#

我发现改变文本颜色的唯一方法如下:

import 'package:flutter/material.dart';

void main() {
  var themeData = ThemeData(
    useMaterial3: true,
  );
  runApp(MaterialApp(
    theme: themeData.copyWith(
        textTheme: themeData.textTheme.copyWith(
            titleLarge: themeData.textTheme.titleLarge
                ?.copyWith(color: themeData.primaryColor))),
    home: const MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('ok', style: Theme.of(context).textTheme.titleLarge),
    );
  }
}

字符串

oknwwptz

oknwwptz3#

文档:https://docs.flutter.dev/cookbook/design/themes

Theme(
  // Create a unique theme with `ThemeData`.
  data: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.pink,
    ),
  ),
);

字符串
请记住:* 从Flutter 3.16版本开始,Material 3是Flutter的默认主题。

相关问题