How can I change the textbutton color in the flutter showAboutDialog?

Question

I'm using the showAboutDialog function from flutter to show used licences in my project. How ever I'm stuck with changing the text color of the VIEW LICENSES and CLOSE textbuttons. See this image for clarification:

This is my code:

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

What I tried so far is looking for a color field inside the showAboutDialog how ever I could not find anything. I'm assuming that I could change the color in my MaterialApp ThemeData. Unfortunately I was not able to find the specific theme to override the default styling of those textbuttons.

I tried the following in my MaterialApp ThemeData to change the color of VIEW LICENSES and CLOSE to green but that did not change anything:

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

Any ideas about this?

Answer 1

I was not satisfied with the answers here because all were showing only MaterialColor use-cases and I wanted a custom color. But I finally found something explaining it well on the following link.

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

Basically, what is confusing is that the new design uses the primary color instead of the textStyle property. You can still apply the other answers to change the overall theme using a MaterialColor, and you can override the existing color theme using any color by using primary under TextButton.styleFrom.

Example for anywhere in the app:

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

Example for the theme:

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

Answer 2

You can use this:

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

MaterialStateProperty.resolveWith takes a function, you can specify the color based on states, such as

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

More info on this.