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: () {},
),
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 created a simple bottom navigation bar, (my code below)...
bottomNavigationBar: BottomNavigationBar(
backgroundColor: COLOR_WHITE,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.account_circle_rounded),
label: 'Profile',
),
BottomNavigationBarItem(
label: 'something', icon: Icon(Icons.star)),
],
)
...but then I really wanted to click on the icons, so I tried adding an Icon Button for its onPressed() method.
bottomNavigationBar: BottomNavigationBar(
backgroundColor: COLOR_WHITE,
items: [
BottomNavigationBarItem(
icon: IconButton(
icon: const Icon(Icons.account_circle_rounded),
onPressed: () {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => ProfileScreen(userID :widget.userID)),
);
},
),
label: "Profile"
),
BottomNavigationBarItem(
label: 'something', icon: Icon(Icons.star)),
],
),
It gets all ugly, and I wanted the paddings and size all around to remain the same, but since I didn't add code to change those features, I don't get why it happened in the first place. Can someone help me solve it? Thanks!!
BottomNavigationBar has an onTap method you can use to trigger your callbacks so you don't need an IconButton. onTap gives you the index of the item tapped so you can map it to the appropriate page. You can also update the currentIndex property on the BottomNavigatorBar to highlight the appropriate item.
See this documentation for BottomNavigationBar for a good example: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
the mistake you have made was in the first BottomNavigationBarItem you have IconButton Widget and in second Icon widget... both having different styles by default(flutter developers gave default values for padding size etc)... so below code will work. i implemented locally and checked as well..
BottomNavigationBar(
backgroundColor: Colors.white,
items: [
BottomNavigationBarItem(
icon: IconButton(
icon: const Icon(Icons.account_circle_rounded),
onPressed: () {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) =>
ProfileScreen(userID:widget.userID)),
);
},[enter image description here][1]
),
label: "Profile"
),
BottomNavigationBarItem(
label: 'something', icon: IconButton(
icon: const Icon(Icons.star),
onPressed: () {
},
),),
],
)
enter image description here
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 have a Text widget on pressing which another Route has to be shown. But I could not see any onPressed() method for the Text widget. Please Help.
In your case there are multiple routes where you can go.
Using material TextButton:
TextButton(onPressed: () {}, child: Text('Your child'))
Using InkWell Widget, which covers your widget with 'as button' properties, splashes etc, which allows you to have more customisable buttons taps:
InkWell(onTap: () {}, onDoubleTap: () {}, onLongPress: () {}, onHover: () {}, ..etc , child: Text('Your child widget'))
Using GestureDetector, is the most customisable solution for any gestures you can provide (from its name), can handle taps, long presses, double taps, drags etc.
Syntax is similar:
GestureDetector(onTap: () {}, child: Text('Your child widget'))
Try using TextButton widget:
TextButton(
onPressed: () {},
child: Text('Simple Button'),
),
The best way to make any widget tappable is to use GestrureDetector you just put it outside of the widget/widgets you want and you can use dozen of properties.
For example
GestureDetector(child:
onPressed: () {},
Text('Your text')
)
How to remove the toast displayed on the Action bar in a flutter on Long hold on back arrow.
In your appBar you can replace the leading parameter by what you want.
Try replacing it with :
AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.of(context).pop();
},
),
),
It should remove the tooltip. If you want to customize it, see the tooltip parameter of IconButton
Use an IconButton as leading widget of your AppBar like,
Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back),
// tooltip: 'Back', // this cause the overlay
),
),
);