Метод 1. Использование ведущего свойства в ListTile

List<Widget> chipsWithDeleteIcon(List<String> chipLabels) {
  return chipLabels.map((label) {
    return ListTile(
      leading: Icon(Icons.cancel),
      title: Text(label),
      onTap: () {
        // Remove the chip from the list
      },
    );
  }).toList();
}

Метод 2: настройка виджета «Чип»

List<Widget> chipsWithDeleteIcon(List<String> chipLabels) {
  return chipLabels.map((label) {
    return Chip(
      label: Text(label),
      deleteIcon: Icon(Icons.cancel),
      onDeleted: () {
        // Remove the chip from the list
      },
    );
  }).toList();
}

Метод 3. Создание пользовательского виджета «Чип»

class DeletableChip extends StatefulWidget {
  final String label;
  final VoidCallback onDelete;
  const DeletableChip({required this.label, required this.onDelete});
  @override
  _DeletableChipState createState() => _DeletableChipState();
}
class _DeletableChipState extends State<DeletableChip> {
  @override
  Widget build(BuildContext context) {
    return Chip(
      label: Text(widget.label),
      deleteIcon: Icon(Icons.cancel),
      onDeleted: widget.onDelete,
    );
  }
}
List<Widget> chipsWithDeleteIcon(List<String> chipLabels) {
  return chipLabels.map((label) {
    return DeletableChip(
      label: label,
      onDelete: () {
        // Remove the chip from the list
      },
    );
  }).toList();
}

Метод 4. Использование стороннего пакета (flutter_chips_input)

List<String> chipLabels = ['Tag 1', 'Tag 2', 'Tag 3'];
ChipsInput(
  initialValue: chipLabels.map((label) => ChipData(label: label)).toList(),
  findSuggestions: null, // Provide your own suggestion list
  onChanged: (data) {
    // Handle chip changes
  },
  chipBuilder: (context, state, ChipData data) {
    return InputChip(
      label: Text(data.label),
      onDeleted: () {
        // Remove the chip from the list
      },
    );
  },
)

В этой статье мы рассмотрели несколько способов добавления значка удаления в Flutter Chips. Мы рассмотрели использование свойства leadingв ListTile, настройку виджета Chip, создание собственного виджета Chip и использование стороннего пакета, такого как flutter_chips_input. Каждый метод предоставляет уникальный способ улучшить взаимодействие с пользователем и упростить удаление выбранных чипов. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните внедрять его в свои приложения Flutter.