I am currently using the following code to create an IconButton() in Flutter:
IconButton(
hoverColor: Colors.transparent,
color: _tweenButton.value,
icon: Icon(Icons.send),
onPressed: () => _isComposing ? _handleSubmitted(_textController.text) : null,
)
Whenever I click on the icon button, there is a splash/click effect as depicted in this screenshot. This widget is running inside MaterialApp() and Scaffold().
How can I deactivate this visual effect?
Use this code:
IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
color: _tweenButton.value,
icon: Icon(Icons.send),
onPressed: () => _isComposing ? _handleSubmitted(_textController.text) : null,
)
Related
I have this custom widget:
Widget ButtonsFunction(String text , IconData icon,Function action){
return Column(
children: [
ElevatedButton(
onPressed: () => action,
style: ElevatedButton.styleFrom(
padding: EdgeInsets.all(27.0),
primary: Colors.grey[300],
side: BorderSide(color: Colors.grey , width: 0.5),
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
),
child: Icon(icon , color: Colors.indigo,),
),
SizedBox(height: 8.0,),
Text(text, style: TextStyle(fontWeight: FontWeight.bold),),
],
);
}
and this call:
ButtonsFunction('Corporate', Icons.wallet,() => Navigator.pushNamed(context,'/CorporateMatters')),
But nothing happen when i click on the button, i've tried to write the button code without the function and it works normally but with this function i cant navigate
Call it directly, change this:
onPressed: () => action,
to this:
onPressed: action,
Inside your custom widget you should trigger the function you are passing.
Like this:
onPressed: () => action(),
or this:
onPressed: () => action.call(),
Remove () => and call directly action and I advise you also to use named parameters for clearer code.
onPressed: action,
I prefer using VoidCallback in this case,
Widget ButtonsFunction(String text, IconData icon, VoidCallback action) {
return Column(
children: [
ElevatedButton(
onPressed: action,
Also note that I am using onPressed: action, instead of creating anonymous function like onPressed: () => action. If you like to do this way, you need to use () to call the method like onPressed: () => action().
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 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'),
]
)
class _CreateRoomButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
// ignore: deprecated_member_use
return OutlineButton(
onPressed: () => print('Create Room'),
color: Colors.white,
borderSide: BorderSide(width: 3.0, color: Colors.blueAccent[100]),
textColor: Palette.facebookBlue,
child: Row(
children: [
Icon(
Icons.video_call,
size: 35.0,
color: Colors.white,
)
],
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
);
}
}
I have used an Outline Button in which I wanna set the border color to blueAccent[100]. On trying to do so the following error comes up :
The argument type 'Color?' can't be assigned to the parameter type 'Color'.
Also I wanna shift the outline button into the new Outlined Button but I am unable to style that acc to the app.
If you see Colors.blueAccent[100] actually gets a value from map. So if your version of flutter is bellow 2.0 you would get this error since it may return a null value.
Now why did this happen: This is because if you are using flutter 2.2 which is by default null-safe. You will get many errors.
Solution : Colors.blueAccent[100]! or Colors.blueAccent.shade100;
For OutlinedButton:
OutlinedButton.icon(
label: Text('MY BUTTON'),
icon: Icon(Icons.video_call),
onPressed: () {
print('Pressed');
},
style: OutlinedButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.teal,
shape: const RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(30))),
),
)
You can tap into more properties : From here or you can see this Material Guidelines or this blog This Blog
you have updated flutter sdk i think and using null safety feature. just add ! after color.
color: Colors.blueAccent[100]!,
Note : Outlinebutton is deprecated use outlinedbutton instead.
Flutter Outlinedbutton
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,
),