How to Change the Color of a Flutter TextButton in showAboutDialog

You can change the color of TextButtons in showAboutDialog by wrapping the call in a local Theme widget that overrides TextButtonThemeData, or by creating a custom dialog implementation that supplies explicit ButtonStyle properties to each button.

The showAboutDialog function displays a standard AboutDialog with "View Licenses" and "Close" action buttons, but the framework does not expose direct styling parameters for these actions. Since the dialog's TextButtons are hard-coded in the Flutter source, you must leverage theme inheritance or custom widget composition to modify their appearance.

Why the Default Dialog Lacks Color Parameters

In packages/flutter/lib/src/material/about.dart, the AboutDialog builds its action buttons using hard-coded TextButton widgets without explicit style parameters (lines 447–473). The buttons rely entirely on the ambient Theme to resolve their colors:

actions: <Widget>[
  TextButton(
    child: Text(...),
    onPressed: () { /* showLicensePage */ },
  ),
  TextButton(
    child: Text(...),
    onPressed: () { Navigator.pop(context); },
  ),
],

Because the constructor does not accept a buttonStyle or similar parameter, you cannot pass color values directly to showAboutDialog. Instead, you must influence the buttons through the widget tree's theme data.

Method 1: Wrap in a Local Theme for Quick Color Changes

The fastest way to change the button color is to wrap the dialog invocation in a temporary Theme that overrides textButtonTheme. This approach preserves the default dialog layout while forcing both buttons to adopt your custom foreground color.

import 'package:flutter/material.dart';

void showColoredAboutDialog(BuildContext context) {
  showDialog<void>(
    context: context,
    builder: (BuildContext dialogContext) {
      return Theme(
        data: Theme.of(dialogContext).copyWith(
          textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(
              foregroundColor: Colors.deepOrange, // Target color
            ),
          ),
        ),
        child: Builder(
          builder: (BuildContext themedContext) {
            return showAboutDialog(
              context: themedContext,
              applicationName: 'My App',
              applicationVersion: '1.0.0',
            );
          },
        ),
      );
    },
  );
}

Key implementation details:

• Use Theme.of(dialogContext).copyWith() to inherit existing theme properties while overriding only textButtonTheme.
• The Builder widget creates a new context that inherits the overridden theme before calling showAboutDialog.
• Both "VIEW LICENSES" and "CLOSE" buttons inherit the same foregroundColor because they both read from TextButtonThemeData.

Method 2: Create a Custom Dialog for Full Control

When you need different colors for each button—or want to modify the layout, icons, or button text—build a custom dialog using showDialog instead of showAboutDialog. Copy the relevant implementation details from about.dart and supply explicit ButtonStyle objects to each TextButton.

import 'package:flutter/material.dart';

void showCustomAboutDialog(BuildContext context) {
  showDialog<void>(
    context: context,
    builder: (BuildContext dialogContext) {
      final ThemeData theme = Theme.of(dialogContext);
      final MaterialLocalizations loc = MaterialLocalizations.of(dialogContext);
      const String appName = 'My App';
      const String appVersion = '1.0.0';

      return AlertDialog(
        title: Text(appName),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Version $appVersion'),
            const SizedBox(height: 16),
          ],
        ),
        actions: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              foregroundColor: Colors.green, // Individual color
            ),
            onPressed: () {
              showLicensePage(context: dialogContext);
            },
            child: Text(
              theme.useMaterial3
                  ? loc.viewLicensesButtonLabel
                  : loc.viewLicensesButtonLabel.toUpperCase(),
            ),
          ),
          TextButton(
            style: TextButton.styleFrom(
              foregroundColor: Colors.red, // Individual color
            ),
            onPressed: () => Navigator.pop(dialogContext),
            child: Text(
              theme.useMaterial3
                  ? loc.closeButtonLabel
                  : loc.closeButtonLabel.toUpperCase(),
            ),
          ),
        ],
      );
    },
  );
}

This approach gives you direct access to every widget in the dialog, allowing you to set unique colors for the "View Licenses" and "Close" actions independently.

Method 3: Styling showAdaptiveAboutDialog

If your application uses showAdaptiveAboutDialog to automatically switch between Material and Cupertino styles, the same theme override technique applies. The adaptive variant internally constructs an AboutDialog (or its Cupertino equivalent) that still respects the textButtonTheme from the context. Wrap the adaptive call in the local Theme widget shown in Method 1 to maintain consistent button colors across platforms.

Summary

• The showAboutDialog buttons are defined in packages/flutter/lib/src/material/about.dart without exposed style parameters, requiring indirect customization.
• Use a local Theme wrapper with a custom TextButtonThemeData to change both button colors simultaneously while keeping the default dialog layout.
• Build a custom AlertDialog with explicit TextButton widgets when you need individual button styling, different colors per action, or layout modifications.
• These techniques work for both standard Material dialogs and showAdaptiveAboutDialog implementations.

Frequently Asked Questions

Can I change the color of just one button in the default showAboutDialog?

No. Because the default AboutDialog hard-codes both buttons without style parameters and both inherit from the same TextButtonThemeData, you cannot target individual buttons through theming alone. You must build a custom dialog (Method 2) to assign unique colors to each button.

Does this work with Material 3?

Yes. Both the theme override and custom dialog approaches respect the useMaterial3 flag. When using the custom dialog approach, check Theme.of(context).useMaterial3 to determine whether button labels should use sentence case (Material 3) or uppercase (Material 2), as shown in the code examples.

Can I set the color globally in my app's ThemeData instead of wrapping the dialog?

Yes, setting textButtonTheme in your root MaterialApp theme will affect all TextButtons throughout your app, including those in showAboutDialog. However, this changes the appearance of every TextButton in your application. Use the local Theme wrapper (Method 1) if you only want to modify the AboutDialog buttons without affecting the rest of your UI.

Will this approach work for Cupertino-style dialogs?

For Cupertino-style dialogs (iOS-style), use showAdaptiveAboutDialog or build a custom CupertinoAlertDialog. The TextButton theme override applies to Material dialogs only. For true Cupertino dialogs, you must build a custom implementation using CupertinoDialogAction widgets, as the adaptive dialog uses different widget types on iOS/macOS platforms.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}