如何更改flutter showAboutDialog中的文本按钮颜色?

时间:2020-11-11 11:41:22

标签: flutter

我正在使用showAboutDialog功能来在我的项目中显示使用过的许可证。我如何改变VIEW LICENSESCLOSE文本按钮的文本颜色。对此图片进行说明:

about dialog

这是我的代码:

...
onTap: () {
  showAboutDialog(
    context: context,
    applicationName: 'bla',
    applicationLegalese: 'November 2023',
 );
},

到目前为止,我一直试图在showAboutDialog内寻找一个色域,但是我什么都找不到。我假设我可以更改MaterialApp ThemeData中的颜色。不幸的是,我找不到特定的主题来覆盖这些文本按钮的默认样式。

我在MaterialApp ThemeData中尝试了以下操作,将VIEW LICENSESCLOSE的颜色更改为绿色,但没有任何改变:

textButtonTheme: TextButtonThemeData(style: ButtonStyle(foregroundColor: MaterialStateProperty.all<Color>(Colors.green))

对此有什么想法吗?

4 个答案:

答案 0 :(得分:21)

我对这里的答案并不满意,因为所有答案都只显示了 MaterialColor 用例,而我想要自定义颜色。但我终于在以下链接上找到了一些解释得很好的东西。

https://blog.logrocket.com/new-material-buttons-in-flutter/

基本上,令人困惑的是新设计使用原色而不是 textStyle 属性。您仍然可以应用其他答案来使用 MaterialColor 更改整体主题,并且您可以通过使用 TextButton.styleFrom 下的主要颜色使用任何颜色覆盖现有颜色主题。

应用中任意位置的示例:

TextButton(
      onPressed: () {},
      style: TextButton.styleFrom(
        primary: Colors.pink,
      ),
      child: Text(
        'TextButton (New)',
        style: TextStyle(fontSize: 30),
      ),
    )

主题示例:

textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        primary: kDarkColor, // This is a custom color variable
        textStyle: GoogleFonts.fredokaOne(),
      ),
    ),

答案 1 :(得分:1)

我运行此代码。 经过一些研究,我发现了这种改变颜色的方法。

为此,您需要像这样设置应用程序主主题的颜色

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.brown,//i am set brown colour,you can set your colour here 
      ),
      debugShowCheckedModeBanner: false,
      home: YourScreen(),
    );
  }

工作结束后

showAboutDialog(
                  context: context,
                  applicationName: 'bla',
                  applicationLegalese: 'November 2023',
                );

enter image description here

答案 2 :(得分:1)

这个怎么样?

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
      colorScheme: ColorScheme.fromSwatch(
        primarySwatch: Colors.green,
      ).copyWith(),      
    ),
    debugShowCheckedModeBanner: false,
    home: YourScreen(),
  );
}

sample

答案 3 :(得分:1)

您可以使用此:

return MaterialApp(
      theme: ThemeData.dark().copyWith(
          textButtonTheme: TextButtonThemeData(
              style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.resolveWith(
                      (state) => Colors.orange)))),
      home: MyWidget(),
    );

MaterialStateProperty.resolveWith具有一个功能,您可以根据状态指定颜色,例如

MaterialState.pressed,
MaterialState.hovered,
MaterialState.focused,

More info on this