Saied Rahimi
Saied Rahimi

Reputation: 169

How to change color in TextButton.icon

I want to have an icon with text, so I used TextButton.icon but I can not change the color of the text or icon! Please suggest if anyone has a solution this is my code:

SizedBox(height: 8,),
        TextButton.icon(
          icon: Icon(Icons.delete),
          label: Text('delete'),

          onPressed: (){},
        ),

Upvotes: 2

Views: 7034

Answers (3)

Emmanuel Ashitey
Emmanuel Ashitey

Reputation: 151

You can use the TextButton.stylefrom on the style of the TextButton. In this method, you can use "foregroundColor" to set the colors of both the icon and label. If you want to set another color for the icon, you can set the icon color in Icon.

TextButton.icon(
   onPressed:(){},
   style: TextButton.styleFrom(
      foregroundColor: Colors.blue,
   ),
   icon: Icon(Icons.ac_unit, color: Colors.red),
   label: Text("label"),
 )

Upvotes: 9

noakfield
noakfield

Reputation: 11

Building on Emmanuel Ashitey's answer, the "primary" method has been deprecated as of v3.1.0 (per VSCode tooltips) and should be replaced with "foregroundColor":

TextButton.icon(
    onPressed: () {},
    icon: const Icon(Icons.delete),
    label: const Text('Delete'),
    style: TextButton.styleFrom(
        foregroundColor: Theme.of(context).errorColor,
    ),
),

Obviously Theme.of(context).errorColor can be replaced with Colors.red for this scenario.

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

Try below code hope its helpful to you.
Refer TextButton here

TextButton.icon(
  icon: Icon(
    Icons.delete,
    color: Colors.red,//for icon color
  ),
  label: Text(
    'Delete',
    style: TextStyle(
      color: Colors.red,//for text color
    ),
  ),
  onPressed: () {},
),

Result Screen-> image

Upvotes: -1

Related Questions