How do you add an onClick or onTap event to the different widget icons in the situation below?

 child: RightPanel(
    likes: "${widget.likes}",
    comments: "${widget.comments}",
    shares: "${widget.shares}",
    views: "${widget.popularity}",
    popularity: "${widget.popularity}",
 ),

I have attempted to wrap each icon e.g.

Inkwell(
     child: RightPanel(
     onTap: (){
        like: "${widget.likes}",
     },
        comments: "${widget.comments}",
        shares: "${widget.shares}",
        views: "${widget.popularity}",
        popularity: "${widget.popularity}",
     ),

But I get a compile error

Below I have included the RightPanel class which the code snippet above references.

class RightPanel extends StatelessWidget {
  final String likes;
  final String comments;
  final String shares;
  final String views;
  final String popularity;
  const RightPanel({
    Key ?key,
    required this.likes,
    required this.comments,
    required this.shares,
    required this.views,
    required this.popularity,
  }) : super(key: key);

  final Size size;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        height: size.height,
        child: Column(
          children: <Widget>[
            Container(
              height: size.height * 0.25,
            ),
            Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    getIcons(Icons.heart, likes, 35.0),
                    getIcons(Icons.chat_bubble, comments, 35.0),
                    getIcons(Icons.reply, shares, 25.0),
                    getIcons(Icons.views, popularity, 30.0),
                  ],
                ))
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

child: RightPanel(
  likeOnTap: (){},
  commentOnTap: (){},
  shareOnTap: (){},
  viewOnTap: (){},

    likes: "${widget.likes}",
    comments: "${widget.comments}",
    shares: "${widget.shares}",
    views: "${widget.popularity}",
    popularity: "${widget.popularity}",
 ),






class RightPanel extends StatelessWidget {
  final String likes;
  final String comments;
  final String shares;
  final String views;
  final String popularity;
  final VoidCallback likeOnTap;
  final VoidCallback commentOnTap;
  final VoidCallback shareOnTap;
  final VoidCallback viewOnTap;
  const RightPanel({
    Key? key,
    required this.likes,
    required this.comments,
    required this.shares,
    required this.views,
    required this.popularity, required this.likeOnTap, required this.commentOnTap, required this.shareOnTap, required this.viewOnTap, required this.size,
  }) : super(key: key);

  final Size size;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        height: size.height,
        child: Column(
          children: <Widget>[
            Container(
              height: size.height * 0.25,
            ),
            Expanded(
                child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                InkWell(onTap: likeOnTap,child:  getIcons(Icons.heart, likes, 35.0),),
                InkWell(onTap: commentOnTap,child:  getIcons(Icons.chat_bubble, comments, 35.0),),
                InkWell(onTap: shareOnTap,child:  getIcons(Icons.reply, shares, 25.0),),
                InkWell(onTap: viewOnTap,child:  getIcons(Icons.views, popularity, 30.0),),
               
               
               
               
              ],
            ))
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You can add InkWell in your RightPanel class, like this:

Expanded(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        InkWell(
          onTap : onClick,
          child: getIcons(Icons.heart, likes, 35.0),
        ),
        getIcons(Icons.chat_bubble, comments, 35.0),
        getIcons(Icons.reply, shares, 25.0),
        getIcons(Icons.views, popularity, 30.0),
      ],
    ),
  )

and pass onClick through constructor like this:

class RightPanel extends StatelessWidget {
  final String likes;
  final String comments;
  final String shares;
  final String views;
  final String popularity;
  final Function onClick;
  const RightPanel({
    Key ?key,
    required this.likes,
    required this.comments,
    required this.shares,
    required this.views,
    required this.popularity,
    required this.onClick,
  }) : super(key: key);

and use it like this:

child: RightPanel(
    onClick:(){
       print("click");
    }
    likes: "${widget.likes}",
    comments: "${widget.comments}",
    shares: "${widget.shares}",
    views: "${widget.popularity}",
    popularity: "${widget.popularity}",
 ),