CODEWITHSUNDEEP
flutter
LOLWTFasdasd asdad
LOLWTFasdasd asdad

Reputation: 2943

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

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?

Upvotes: 46

Views: 111807

Answers (5)

Hyung Tae Carapeto Figur
Hyung Tae Carapeto Figur

Reputation: 1533

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(),
      ),
    ),

Upvotes: 102

Maurice Raguse
Maurice Raguse

Reputation: 4577

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

Upvotes: 1

Riwen
Riwen

Reputation: 5210

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.

Upvotes: 18

Yuu Woods
Yuu Woods

Reputation: 1348

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

Upvotes: 5

Shirsh Shukla
Shirsh Shukla

Reputation: 5993

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

Upvotes: 3

Related Questions