How to know which button is tapped in Flutter?

2019-08-29 03:07发布

问题:

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

回答1:

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


回答2:

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


回答3:

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



标签: dart flutter