Search code examples
flutterdartflutter-layout

(Flutter) How to add ontap to widget children?


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

Solution

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