I'd like to make IconButton bigger, but this doesn't work.
How to make the size of the button bigger?
SizedBox(
height: 100,
width: 100,
child: IconButton(
tooltip: 'Refresh',
icon: const Icon(Icons.refresh),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => Check()),
);
},
),
),
You can set the property iconSize.
Here is the official documentation.
Solution:
IconButton(
iconSize: 100,
tooltip: 'Refresh',
icon: const Icon(Icons.refresh),
onPressed: () {
//Your code goes here....
}
),
You can use the iconSize property...You dont need to use SizedBox when using iconSize
IconButton(
iconSize: 100,
icon: const Icon(Icons.refresh),
onPressed: () {}
),
You can use iconSize property of IconButton() widget, it will help to increase the size. This property increases the size of icon inside it too. So, put the size of Icon() as well so that you can have the desired size of IconButton and Icon both.
IconButton(
iconSize: 100,
tooltip: 'Refresh',
icon: const Icon(Icons.refresh, size:20),
onPressed: () {
},)
IconButton sets height and width internally, with nothing to do with any parent Widget.
IconButton(
iconSize: 100,
internally, IconButton sets the height and width of the icon as 100, and default iconSize is this.iconSize = 24.0,. That's important to make look icons good.
Related
I want to add a filter option button without adding a search bar.
ScreenShot
You can do like this
InkWell(
onTap: () =>
child: const Icon(
Icons.tune,
color: Colors.grey,
),
),
Make use of IconButton like below
IconButton(
icon: Icon(Icons.tune),
onPressed: () {},
)
I want to reduce the Width and not hardcode the value by specifying minWidth and minHeight, I want it to look same across all the devices.
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.arrow_forward_ios_sharp),
label: Text('Plus One'),
)
Use Media Query to use width wisely for your solution which will run the same for small and large screen
Container(
width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
child: RaisedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
You can apply a similar solution to SizeBox also.
I can't seem to find a parameter that lets the widgets TextButton.icon and ElevatedButton.icon place the label first then the icon. Is there a way or do I have to make a custom widget for this?
Example:
ElevatedButton.icon(
onPressed: () { /* code */ },
icon: Icon(Icons.arrow_forward),
label: Text('Some text'),
)
Both icon & label accepts a Widget. So you could do this:
ElevatedButton.icon(
icon: Text('A'),
label: Icon(Icons.add),
onPressed: () {},
),
I have made a flatbutton icon, but it seems this is depreciated in the current flutter version. I have tried to upgrade it to a text button, but it does not show the text next to the icon.
This is the original code that has to be adapted to become a text button. Should I have to define a class or function to make it so?
Row(
children: [
FlatButton.icon(
onPressed: () => print('Live'),
icon: const Icon(
icons.videocam,
color: Colors.red,
),
label: Text('Live'),
),
],
)
Thx! :)
you can use TextButton.icon() widget. here an example:
TextButton.icon(
onPressed: () => print('Live'),
icon: Icon(Icons.videocam_rounded),
label: Text('Live'),
),
and here the result:
You can use an IconButton widget:
Row(
children: [
IconButton(
onPressed: () => print('Live'),
icon: const Icon(icons.videocam, color: Colors.red),
),
Text('Live'),
]
)
I want to disable an IconButton inside a State<T> class based on a condition. The official documentation states that in order to disable a button, the onPressed callback should be null. This makes the icon greyed-out.
This is however NOT true for icons with a custom asset. E.g. when having the following two icons
IconButton(
icon: Image.asset(somePath),
iconSize: 24,
onPressed: condition?()=>{someCallback();}:null),
IconButton(
icon: Icon(
Icons.settings,
),
iconSize: 24,
onPressed: condition?()=>{someCallback();}:null)
Then the first is grayed out but the latter is not. So how could I disable an IconButton with an Image.asset as image provider?
Simply because IconThemeData can be applied on Text and Icon as their color can be changed but not on asset image, which does not have a color property.
Still, you can alter it like this
IconButton(
icon: Image.asset(somePath, color: condition ? null : Colors.grey,),
iconSize: 24,
onPressed: condition ? () {
someCallback();
} : null,
),
IconButton(
icon: Icon(
Icons.settings,
),
iconSize: iconSize,
onPressed: condition ? () {
someCallback();
} : null,
),