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

user_4440133 0
Viewed 61090

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:

about dialog

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?

flutter
5 Answers

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(
        foregroundColor: 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(),
      ),
    ),
user_72516240

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.

user_43172970

How about this one?

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

sample

user_124584420

i run this code. after some research i find out this way to change colour.

for this you need to set application main theme colour change, like this

  @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(),
    );
  }

after this its work,

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

enter image description here

user_130984170

If you want to change the colors only for the dialog and not for the whole app, you have to create a new context. Surround the Button that showing the dialog with a Theme and a Builder

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,
                          ...) 
        );
      },
    ),
  )
user_3769670
Related