2

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: (){},
        ),
Saied Rahimi
  • 170
  • 2
  • 8
  • 1
    ``icon: Icon(Icons.delete, color: Colors.red)`` and ``label: Text('delete', style: TextStyle(color: Colors.red))`` – OMi Shah Feb 07 '22 at 08:05

3 Answers3

7

You can use the TextButton.stylefrom on the style of the TextButton. In this method, you can use primary 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(
      primary: Colors.blue,
   ),
   icon: Icon(Icons.ac_unit, color: Colors.red),
   label: Text("label"),
 )
Emmanuel Ashitey
  • 131
  • 4
1

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.

noakfield
  • 11
  • 2
-1

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

Ravindra S. Patil
  • 11,757
  • 3
  • 13
  • 40