I came across this question : How to identify which button is clicked in flutter
But Is there any better way to detect which button is tapped?
Ex.
I created 100 button via for loop then how to know? In iOS we are using tag property so If there is this kind of option then it will really handy to detect.
EDITED:
Below are my code
List<Widget> pageCurrentPageIndicator(int currentIndex, int totoalCount) {
List<Widget> tempWidget = new List<Widget>();
for (var i = 0; i < totoalCount; i++) {
Container container = Container(
width: 47.0,
height: 30.0,
child: FlatButton(
child: Image.asset(
(i == currentIndex
? 'lib/assets/radioBtnActive.png'
: 'lib/assets/radioBtn.png'),
fit: BoxFit.contain), onPressed: () {
whichButtonistaped(i);
},
)
);
tempWidget.add(container);
}
return tempWidget;
}
void whichButtonistaped(int btnTag){
print(btnTag);
setState(() {
currentBannerIndex = btnTag;
});
}
Assign to each button a different callback
void onPress(int id) {
print('pressed $id');
}
Widget build(BuildContext context) {
return Row(
children: [
RaisedButton(onPressed: () => onPress(0),),
RaisedButton(onPressed: () => onPress(1),),
],
);
}
I would suggest using the key
property of the widget.
Here is a solution:
Widget build(BuildContext context) {
return Row(
children: [
TagButton(onPressed: (k) => onPress(k)),
TagButton(onPressed: (k) => onPress(k)),
],
);
}
void onPress(Key id) {
print('pressed $id');
}
With the following custom Widget:
typedef TagButtonPressedCallBack = void Function(Key key);
class TagButton extends StatelessWidget {
final TagButtonPressedCallBack onPressed;
agButton({
this.onPressed,
}) : super(key: UniqueKey());
@override
Widget build(BuildContext context) {
return RaisedButton(onPressed: () {
if (onPressed != null) onPressed(key);
});
}
}
output:
I/flutter ( 6371): pressed [#2ca50]
I/flutter ( 6371): pressed [#2180d]
I/flutter ( 6371): pressed [#2ca50]
That solution gives you the unique identifier of the TagButton
widget.
If you want the id of the RaisedButton
inside the TagButton
, you can generate a Key
in the build
method and pass it to the RaisedButton
like so :
typedef TagButtonPressedCallBack = void Function(Key key);
class TagButton extends StatelessWidget {
final TagButtonPressedCallBack onPressed;
TagButton({
Key key,
this.onPressed,
}) : super(key: key);
@override
Widget build(BuildContext context) {
var k = UniqueKey();
return RaisedButton(
key: k,
onPressed: () {
if (onPressed != null) onPressed(k);
});
}
}
There aren't many solutions available for this and the ones that are available are for static buttons which didn't work for me. Here's what i did for multiple dynamic FloatingActionButtons in my project that worked,
Custom button class which assigns dynamic id to each button:
class FAB extends StatelessWidget {
final int id;
final Function(int) onPressed;
final String buttonText;
const FAB({this.id, this.onPressed, this.buttonText});
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: () {onPressed(this.id);},
backgroundColor: Colors.blue,
child: new Text(this.buttonText,
style: new TextStyle(fontSize: 25.0))
);
}
}
Create button using the class above:
new FAB(
id: id,
onPressed: buttonFunction,
buttonText: 'Button Text'
)
Button function:
buttonFunction(id) {
print('Button id: $id');
}
Reference: https://stackoverflow.com/a/54728693/4930378