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->
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(...)
I want to center the button in the CircleAvatar, but for smaller radius, it doesn't seem to be centering correctly.
CircleAvatar(
backgroundColor: Colors.blue,
radius: 16,
child: IconButton(
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {
}
}),
),
This is what it looks like:
The IconButton has some default padding, fix the issue by removing the default padding.
Check the code below, it works perfectly.
CircleAvatar(
backgroundColor: Colors.blue,
radius: 16,
child: IconButton(
// remove default padding here
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
Output of the code:
You can use floatingActionButton to achieve that
Container(
child: floatingActionButton(
child: Icon(Icons.add),
),
),
Hope it helps..!
CircleAvatar generally we used for displaying image, we can have some better option like material button
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.add,
size: 16,
),
shape: CircleBorder(),
)
Output:
How can I reduce spacing between button ?
You can see four buttons on app bar takes so much space, I have tried Rows. but not worked
Below is my code --
AppBar(
backgroundColor: Colors.deepOrange,
iconTheme: new IconThemeData(color: Colors.white),
title: Text(
titleString,
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.white,
),
// iconSize: 20,
onPressed: null,
),
//Add more icon here
],
);
You can use VisualDensity and padding arguments together to reduce things:
actions: <Widget>[
IconButton(
visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
padding: EdgeInsets.zero,
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
//Add more icon here
],
This worked in my app at least. Hope it's helpful!
The problem is with the IconButton Widget. by default IconButton has a size of 48x48 pixels size and you can read about it in the top answer of this question.
A workaround would be to use the GestureDetector widget to handle your onPressed() method. Below is an example.
actions: <Widget>[
GestureDetector(
onTap: (){
//your code
},
child: Icon(Icons.search)
),
GestureDetector(
onTap: (){},
child: Icon(Icons.notifications)
)
//Add more icon here
],
Try using sizedbox
Example
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox.fromSize(
size: Size(25, 20), // button width and height
child: InkWell(
splashColor: Colors.white, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.search), // icon
],
),
),
),
),
I want to apply background color for icon button but I don't see an explicit backgroundColor property for it. I want to achieve this:
Currently I was able to achieve till here:
Below is the code so far:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF13212C),
appBar: AppBar(
title: Text('Demo'),
),
drawer: appDrawer(),
body: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
// new Flexible(
new TextField(
style: new TextStyle(
color: Colors.white,
fontSize: 16.0),
cursorColor: Colors.green,
decoration: new InputDecoration(
suffixIcon: new IconButton(
icon: new Image.asset('assets/search_icon_ivory.png'),onPressed: null),
fillColor: Colors.black,
contentPadding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
filled: true,
hintText: 'What Do You Need Help With?',
hintStyle: new TextStyle(
color: Colors.white
)
)
)
// )
]
),
You can use a Circular Avatar with the radius = text field's height/2 or whatever height you prefer.
To figure out text field specs you can visit material.io
So the chunk of code is going to be like the following:
CircleAvatar(
radius: 30,
backgroundColor: Color(0xff94d500),
child: IconButton(
icon: Icon(
Icons.search,
color: Colors.black,
),
onPressed: () {
...
},
),
),
This way you get an Icon button with background color.
I hope this can help you guys.
you can wrap your IconButton with Container and use color property to achieve desire output.
May Following Example help You.
suffixIcon: Container(
color: Colors.green,
child: new IconButton(
icon: new Icon(Icons.search,color: Colors.white,),onPressed: null),
),
You can achieve it with TextButton
TextButton(
style: TextButton.styleFrom(
backgroundColor: colorScheme.primary,
shape: CircleBorder(),
),
child: Icon(
MdiIcons.send,
color: colorScheme.onPrimary,
),
onPressed: () {},
),
The output will look like this:
From the official Flutter docs:
Adding a filled background
Icon buttons don't support specifying a
background color or other background decoration because typically the
icon is just displayed on top of the parent widget's background. Icon
buttons that appear in AppBar.actions are an example of this.
It's easy enough to create an icon button with a filled background
using the Ink widget. The Ink widget renders a decoration on the
underlying Material along with the splash and highlight InkResponse
contributed by descendant widgets.
Tl;dr: IconButton doesn't support background color out-of-the-box. Use this workaround to add the background color and the splash effect when clicking the button:
Ink(
decoration: ShapeDecoration(
color: Colors.blue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
Live Demo
This is now the officially recommended way to set background color on an IconButton, and the flutter docs have been updated to reflect this.
Hope, this will satisfied you
Ink(
decoration: ShapeDecoration(
color: Colors.red,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.delivery_dining),
onPressed: () {
print('pressed');
},
),
),
You can not do that with IconButton widget yet. Good news is that you may replace it with FlatButton like that:
suffixIcon: new FlatButton(
color: Colors.green,
disabledColor: Colors.green[100],
child: Icon(Icons.search)),
color will be used in case onPressed handler is defined, otherwise it will be rendered with disabledColor background.
IconButton does not support that, and RaisedButton recently is deprecated in favour of ElevatedButton, which supports changing background colours as well as shapes, but you cannot easily make it a perfect circle.
So to think out of the box, why not use a FloatingActionButton? They are just widgets too, so they can appear anywhere on the screen. For example, I'm using a FAB in a video chat demo app to toggle cameras.
Example code:
FloatingActionButton(
child: Icon(
Icons.flip_camera_ios_outlined,
color: Colors.white,
),
onPressed: () {
// do your thing here
},
)
And if you aren't happy about its default size, you can always wrap it with a SizedBox to change the width however you see fit.
With latest flutter and material-3 design system, this is just a piece a cake.
IconButton(
onPressed: () { ... },
icon: const Icon(Icons.search),
style: IconButton.styleFrom(backgroundColor: Colors.redAccent),
),
Add a Material
Material(
color:Colors.green
child:IconButton(
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
));
Official solution:
Depends on official documentation of flutter about IconButton Class:
Adding a filled background
Icon buttons don't support specifying a background color or other
background decoration because typically the icon is just displayed on
top of the parent widget's background. Icon buttons that appear in
[AppBar.actions] are an example of this.
It's easy enough to create an icon button with a filled background
using the [Ink] widget. The [Ink] widget renders a decoration on the
underlying [Material] along with the splash and highlight
[InkResponse] contributed by descendant widgets.
So the code will be like this:
Material(
color: Colors.transparent,
child: Ink(
decoration: ShapeDecoration(
color: Colors.white,
shape: CircleBorder(),
),
child: IconButton(
tooltip: "Some Text...",
icon: Icon(Icons.flash_off),
color: Colors.black,
onPressed: () {},
),
),
);
See official example code from flutter, click here ...
Note: Reason to wrap it with Material widget because Ink is drawn
on the underlying Material widget, if you remove it decoration will not appear.
I've used multiple colors to demonstrate You can do as you want. And I say that You put your IconButton into Material widget. This will also solve your Splash Color (which is slightly grey color with some transparency).
If you want it raised, you can use RaisedButton like this:
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 50),
child: RaisedButton(
color: kColorLightGrey,
padding: EdgeInsets.symmetric(
vertical: 12,
),
shape: StadiumBorder(),
child: Icon(Icons.refresh),
onPressed: () {
},
),
),
SizedBox(
height: 38,
width: 38,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.grey,
onPrimary: Colors.red,
padding: EdgeInsets.zero,
shape: const CircleBorder(),
),
onPressed: () {},
child: const Icon(Icons.refresh),
);
You can use FloatingActionButton for such case But you cannot use FAB in a widget for multi use, it shows error. In such case use this code. It will work on images also.
Card(
color: Colors.blue,
shape: CircleBorder(),
child: IconButton(
icon: const Icon(
Icons.edit,
size: 20,
color: Colors.white,
),
onPressed: () {
print('tapped');
},
));
You can solve this with a GestureDetector and a container. I like using this solution because of the variety of controls it gives you from the combination.
Additionally, GestureDetector opens up more interaction events if you want to incorporate those across devices.
GestureDetector(
onTap: () {},
child: ClipOval(
child: Container(
//add extra margin to visual center icon if icon isn't balanced
color: backgroundColor,
width: size,
height: size,
child: Icon(
Icons.question_mark_sharp,
size: size * 0.6, //size to your preference
color: iconColor,
),
),
),
);
Alternatively you can do this from another question circle icon button
RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
ElevatedButton with Theme.
ElevatedButton(
style: ButtonThemes.iconButton,
child: Icon(
icon,
color: color,
),
onPressed: () {},
)
static ButtonStyle get iconButton=> ButtonStyle(
backgroundColor: MaterialStateProperty.all(
backgroundColor,
),
...
);