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: (){},
),
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"),
)
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.
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->
Related
I'm trying to change the background color only of the icon that is on the leading of the native AppBar of flutter, but I don't know how, does anyone know if it's possible?
If you are using flutter 3.3, you could do like:
Material(
color: Colors.redAccent,
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
),
),
This apparently solves my initial problem
leading: IconButton(
onPressed: () {...},
icon: Container(
color: Colors.white,
child: const Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
I'm having trouble when I want to remove the border on the OutlineButton
OutlinedButton(
onPressed: () {},
child: const Text('Pext Page'),
)
please help me!!
Try below code hope its help to you.
OutlinedButton(
onPressed: () {},
child: Text('Outlined button'),
style: OutlinedButton.styleFrom(
side: BorderSide(
color: Colors.transparent,
),
),
),
Your result screen->
Or you can used TextButton also
TextButton(
onPressed: () {},
child: Text('Text button'),
),
Your result screen using TextButton->
With this sample code TextButton widget can be rendered with icon on the left side.
TextButton.icon(
onPressed: onPressed,
icon: Icon(
Icons.arrowOpen,
color: companySelectionColor,
),
label: text,
),
However I want to use exact same widget but render the icon on the right side. Is there any way to render this icon on the right side?
Here is an example of the desired output:
You can wrap the widget with Directionality widget. This widget can apply the given text direction to child widgets. With text button one can do following:
Directionality(
textDirection: TextDirection.rtl,
child: TextButton.icon(
onPressed: onPressed,
icon: Icon(
Icons.arrowOpen,
color: companySelectionColor,
),
label: text,
),
);
Edit: You need to wrap your text with TextDirection.ltr as well. Which is a lot in a second thought. Just create your custom text button by implementing row/inkwell with text and icon
I think as per documentation here and as per my knowledge Icon is not right side position but you use using Directionality() widget its solved Just you use ElevetedBtton.icon instead of TextButton.icon and its working correctly and you use Directionality() widget refer below code hope its help to you.
Use ElevetedBtton.icon using Directionality() widget
Directionality(
textDirection: TextDirection.rtl,
child: ElevatedButton.icon(
onPressed: () {},
icon: Icon(
Icons.add,
color: Colors.white,
),
label: Text(
"Pressed",
style: TextStyle(color: Colors.white),
),
),
),
Use TextButton.icon
TextButton.icon(
onPressed: () {},
label: Text('Pressed'),
icon: Icon(
Icons.add,
color: Colors.red,
),
),
Use TextButton.icon using Directionality() widget
Directionality(
textDirection: TextDirection.rtl,
child: TextButton.icon(
onPressed: null,
icon: Icon(
Icons.add,
color: Colors.red,
),
label: Text(
'Pressed',
style: TextStyle(
letterSpacing: .5,
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
),
Your screen using ElevetedBtton.icon Widget like ->
Your screen using TextButton.icon Widget like ->
Your screen using TextButton.icon Widget using Directionality() like ->
TextButton.icon(
onPressed:null,
icon: Text('2022-01-27'),
label: Icon(Icons.arrow_drop_down_sharp),
)
You can try using IconButton and add Text widget as a child alternatively.
IconButton(
icon: Icon(Icons.arrowOpen),
iconSize: 12,
onPressed: () {},
),
I'm using the Flutter Speed Dial plugin within a container. I need to toggle the visibility of just one of its children (SpeedDialChild);
child: Container(
width: 165,
height:400,
child:
SpeedDial(
overlayOpacity: 0.4,
icon: Icons.add,
activeIcon: Icons.expand_less,
buttonSize: 60.0,
backgroundColor: Color(0x00000000),
overlayColor: Color(0x00000000),
foregroundColor: Colors.white,
children: [
SpeedDialChild(
child: Icon(Icons.block),
backgroundColor: Colors.brown,
labelBackgroundColor: Colors.white,
label: 'abuse',
labelStyle: TextStyle(fontSize: 14.0),
onTap: () => print('rude'),
),
SpeedDialChild(
child: Icon(TriangleAll.edit_3),
backgroundColor: Colors.deepPurple[200],
labelBackgroundColor: Colors.white,
label: 'edit',
labelStyle: TextStyle(fontSize: 14.0),
onTap: () {},
onLongPress: () {},
),
],
),
),
I tried wrapping the Visibility widget on the icon but then I get a blank white icon where there should be an empty space.
The SpeedDialChild itself can't be wrapped with the Visibility Widget. So I need another option.
Anyone know another way to accomplish this?
Here's the answer from the issues queue at Github;
if (thisid==thatid) SpeedDialChild(...)
Consider the following code that specifies disabledTextColor for a FlatButton:
FlatButton.icon(
icon: const Icon(Icons.check_box),
label: const Text('Foo'),
disabledTextColor: Colors.black,
onPressed: null,
),
How can I translate the disabledTextColor to the equivalent for TextButton?
I figure I need to override style, but I can't seem to get TextButton.styleFrom to work, and Theme.of(context).textButtonTheme.style is null.
The following are equivalent:
FlatButton.icon(
icon: const Icon(Icons.check_box),
label: const Text('FlatButton'),
disabledTextColor: Colors.black,
onPressed: null,
),
TextButton.icon(
icon: const Icon(Icons.check_box),
label: const Text('TextButton'),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.black),
),
onPressed: null,
),
In this case, since onPressed is null, the button will always be disabled, so the foregroundColor can simply be black in all cases. However, if you have a different scenario, the style can do something like:
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) => states.contains(MaterialState.disabled) ? Colors.black : null,
),
),
Migrating to the New Material Buttons and their Themes - Migrating buttons with custom disabled colors provides more details.