如何在Flutter的showAboutDialog中更改TextButton的颜色?

40

我正在使用Flutter中的showAboutDialog函数来显示项目中使用的许可证。然而,我无法改变VIEW LICENSESCLOSE文本按钮的文本颜色。请参见此图片以了解详情:

about dialog

这是我的代码:

...
onTap: () {
  showAboutDialog(
    context: context,
    applicationName: 'bla',
    applicationLegalese: 'November 2023',
 );
},
我尝试过的是在 showAboutDialog 中寻找颜色字段,但无法找到任何东西。我假设我可以在我的 MaterialAppThemeData 中更改颜色。不幸的是,我无法找到要覆盖默认文本按钮样式的特定主题。
我尝试在我的 MaterialAppThemeData 中做出以下更改,将 VIEW LICENSESCLOSE 的颜色更改为绿色,但没有产生任何变化:
textButtonTheme: TextButtonThemeData(style: ButtonStyle(foregroundColor: MaterialStateProperty.all<Color>(Colors.green))

对此有什么想法吗?

5个回答

88

我对这里的答案不满意,因为所有的答案都只展示了MaterialColor的用例,而我想要一个自定义的颜色。但是我最终在下面的链接中找到了很好地解释它的东西。

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

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

应用程序中的任何位置的示例:

TextButton(
      onPressed: () {},
      style: TextButton.styleFrom(
        foregroundColor: 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(),
      ),
    ),

添加一个简单的“颜色”键选项会更容易。 - MrBens

16
您可以使用这个:
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,

了解更多信息


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

sample


如果我已经有了一个themeData,但是我想为这个实例/屏幕使用不同的主题数据,该怎么办? - lordvidex
@lordvidex 我不确定,但我认为 "showAboutDialog" 不符合那种情况。 - Yuu Woods
https://dev59.com/8FIG5IYBdhLWcg3whAMW#69811508 - Maurice Raguse

3

我运行了这段代码。 经过一些研究,我找到了一种改变颜色的方法。

为此,您需要更改应用程序主题颜色,就像这样:

  @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


1

如果您只想更改对话框的颜色而不是整个应用程序的颜色,则需要创建一个新的上下文。使用ThemeBuilder包围显示对话框的按钮。

Theme(
    data: Theme.of(context).copyWith(
      colorScheme: colorScheme.copyWith(primary: Colors.green),
    ),
    child: Builder(
      builder: (context) {
        return ListTile(
          title: Text('show dialog'),               
          onTap: () => showAboutDialog(
                          context: context,
                          ...) 
        );
      },
    ),
  )

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接