How to know which button is tapped in Flutter?

Question

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;               
     });
  }

score 5 · Accepted Answer · answered Nov 05 '18 at 10:52

5

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),),
    ],
  );
}

answered Nov 05 '18 at 10:52

Rémi Rousselet

256,336
79
519
432

Pls check my updated. I know this way but any other way is available ? – Govaadiyo Nov 05 '18 at 10:54
No, that's the only way. – Rémi Rousselet Nov 05 '18 at 11:01
Why doesn't this work when the 0 and 1 comes from the index in a loop? – Yster Nov 10 '19 at 19:19

Pro · Answer 2 · 2019-05-02T18:28:14.590

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

score 0 · Answer 3 · answered Nov 07 '18 at 11:07

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);
        });
  }
}

How to know which button is tapped in Flutter?

3 Answers3

Linked