Gesture detector for custom widget in flutter-CodePudding

I defined a custom widget that has a button:

import 'dart:collection';
import 'dart:convert';
import 'dart:developer';

import 'package:flutter/material.dart';

class tagRetrievePreview extends StatelessWidget {
  var tag;

  tagRetrievePreview(this.tag, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Card(
          color: const Color.fromARGB(255, 224, 223, 223),
          shape: RoundedRectangleBorder(
            side: const BorderSide(
              color: Color.fromARGB(255, 83, 83, 83),
            ),
            borderRadius: BorderRadius.circular(50),
          ),
          child: Padding(
            padding: const EdgeInsets.all(3.0),
            child: Row(
              children: [
                Text(
                  tag,
                  style: TextStyle(color: Colors.grey.shade800),
                  textAlign: TextAlign.center,
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: GestureDetector(
                    onTap: () {
                      print('Delete tag button tapped');
                    },
                    child: const CircleAvatar(
                        radius: 8,
                        backgroundColor: Color.fromARGB(255, 117, 112, 112),
                        child: Icon(
                          Icons.close,
                          size: 13,
                          color: Color.fromARGB(255, 255, 255, 255),
                        )),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

I am using this widget in another screen, in that screen I have a textfield and every time I click on a add button the text inside the textfield shows in the tagPreview. tagPreview has a button for removing the tag. My question is about defining on tap function. On tap function should remove one element of a list, but the list is in another page. Here is the code in that other page:

Flexible(
                        fit: FlexFit.loose,
                        child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: tags.length,
                          itemBuilder: (_, index) {
                            print(tags);
                            return Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 5.0, vertical: 3.0),
                              child: tagRetrievePreview(tags[index]),
                            );
                          },
                        ),
                      ),

How can I implement that? any suggestions?

CodePudding user response：

You can do that

import 'dart:collection';
import 'dart:convert';
import 'dart:developer';

import 'package:flutter/material.dart';

class tagRetrievePreview extends StatelessWidget {
  var tag;
  void Function(dynamic tag) onTapDelete;

  tagRetrievePreview(this.tag, {Key? key, required this.onTapDelete}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Card(
          color: const Color.fromARGB(255, 224, 223, 223),
          shape: RoundedRectangleBorder(
            side: const BorderSide(
              color: Color.fromARGB(255, 83, 83, 83),
            ),
            borderRadius: BorderRadius.circular(50),
          ),
          child: Padding(
            padding: const EdgeInsets.all(3.0),
            child: Row(
              children: [
                Text(
                  tag,
                  style: TextStyle(color: Colors.grey.shade800),
                  textAlign: TextAlign.center,
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: GestureDetector(
                    onTap: () => onTapDelete(tag),
                    child: const CircleAvatar(
                        radius: 8,
                        backgroundColor: Color.fromARGB(255, 117, 112, 112),
                        child: Icon(
                          Icons.close,
                          size: 13,
                          color: Color.fromARGB(255, 255, 255, 255),
                        )),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}