How to Change TextButton Text Color in Flutter: 3 Methods Explained

Set the foregroundColor property in a ButtonStyle using TextButton.styleFrom(), a custom ButtonStyle, or a global TextButtonTheme to override the default primary color.

The TextButton widget in the flutter/flutter repository controls text color through its ButtonStyle.foregroundColor property rather than direct Text widget styling. By default, the button pulls its color from the app's color scheme, but you can override this at the button, theme, or state-specific level using MaterialStateProperty.

Understanding the Foreground Color Architecture

In packages/flutter/lib/src/material/text_button.dart, the TextButton widget applies color to its label via the foreground color defined in its style. When no style is provided, TextButton.defaultStyleOf falls back to colorScheme.primary as the foreground color (lines 784–787). To change the text color, you must provide a ButtonStyle that specifies a different foregroundColor.

Method 1: Use TextButton.styleFrom() (Most Common)

The styleFrom factory constructor creates a complete ButtonStyle while exposing a direct foregroundColor parameter. This is the most concise way to style individual buttons.

According to the source code in text_button.dart (lines 184–188), styleFrom accepts a foregroundColor that sets the text and icon color:

TextButton(
  style: TextButton.styleFrom(
    foregroundColor: Colors.green,
  ),
  onPressed: () {},
  child: const Text('Green Button'),
);

Method 2: Create a Custom ButtonStyle

For granular control, instantiate ButtonStyle directly and pass it to the style argument. This approach overrides the default foregroundColor completely.

TextButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all<Color>(Colors.deepPurple),
  ),
  onPressed: () {},
  child: const Text('Deep Purple'),
);

Method 3: Apply a Global TextButtonTheme

To change the text color for every TextButton in a subtree, use TextButtonTheme. The theme lookup is performed in TextButton.themeStyleOf (lines 328–332):

MaterialApp(
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        foregroundColor: Colors.orange,
      ),
    ),
  ),
  home: Scaffold(
    body: Center(
      child: TextButton(
        onPressed: () {},
        child: const Text('Orange Themed Button'),
      ),
    ),
  ),
);

Advanced: State-Aware Text Colors

For interactive color changes based on hover or press states, use MaterialStateProperty.resolveWith. This is defined in packages/flutter/lib/src/material/button_style.dart:

TextButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith<Color>((states) {
      if (states.contains(WidgetState.pressed)) return Colors.red;
      if (states.contains(WidgetState.hovered)) return Colors.blue;
      return Colors.black;
    }),
  ),
  onPressed: () {},
  child: const Text('State-aware Colors'),
);

Summary

• TextButton text color is controlled by the foregroundColor property within a ButtonStyle, not by styling the child Text widget directly.
• Quick styling uses TextButton.styleFrom(foregroundColor: Colors.yourColor) for individual buttons.
• Direct control requires creating a ButtonStyle with MaterialStateProperty.all<Color>().
• Global changes utilize TextButtonTheme in your ThemeData to apply consistent colors across your app.
• Interactive states require MaterialStateProperty.resolveWith to define hover and pressed colors.

Frequently Asked Questions

How do I change the text color of just one TextButton in Flutter?

Pass a ButtonStyle to the style parameter using either TextButton.styleFrom(foregroundColor: Colors.red) or ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.red)). The foregroundColor property affects both text and icon colors for that specific button.

What is the difference between foregroundColor and backgroundColor in TextButton?

foregroundColor controls the color of the button's text and icon, while backgroundColor controls the fill color behind the content. TextButton is designed to have no background by default, so foregroundColor is the primary property for text styling.

Why is my TextButton text color not changing when I specify a color?

Ensure you are setting foregroundColor inside a ButtonStyle, not trying to style the Text widget's color directly. Also, check that no parent TextButtonTheme is overriding your local style. If using MaterialStateProperty, verify that your condition logic returns the expected color for the default state.

How do I set different text colors for different button states like hover and pressed?

Use MaterialStateProperty.resolveWith<Color>() to inspect the Set<WidgetState> passed to the callback. Check for WidgetState.pressed, WidgetState.hovered, or WidgetState.disabled and return appropriate colors for each state, as implemented in packages/flutter/lib/src/material/button_style.dart.

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