onDeleted property

Called when the user taps the deleteIcon to delete the chip.

If null, the delete button will not appear on the chip.

The chip will not automatically remove itself: this just tells the app that the user tapped the delete button. In order to delete the chip, you have to do something similar to the following sample:

This sample shows how to use onDeleted to remove an entry when the delete button is tapped.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [DeletableChipAttributes.onDeleted].

void main() => runApp(const OnDeletedExampleApp());

class OnDeletedExampleApp extends StatelessWidget {
  const OnDeletedExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('DeletableChipAttributes.onDeleted Sample'),
        ),
        body: const Center(child: OnDeletedExample()),
      ),
    );
  }
}

class Actor {
  const Actor(this.name, this.initials);
  final String name;
  final String initials;
}

class CastList extends StatefulWidget {
  const CastList({super.key});

  @override
  State createState() => CastListState();
}

class CastListState extends State<CastList> {
  final List<Actor> _cast = <Actor>[
    const Actor('Aaron Burr', 'AB'),
    const Actor('Alexander Hamilton', 'AH'),
    const Actor('Eliza Hamilton', 'EH'),
    const Actor('James Madison', 'JM'),
  ];

  Iterable<Widget> get actorWidgets {
    return _cast.map((Actor actor) {
      return Padding(
        padding: const .all(4.0),
        child: Chip(
          avatar: CircleAvatar(child: Text(actor.initials)),
          label: Text(actor.name),
          onDeleted: () {
            setState(() {
              _cast.removeWhere((Actor entry) {
                return entry.name == actor.name;
              });
            });
          },
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(children: actorWidgets.toList());
  }
}

class OnDeletedExample extends StatefulWidget {
  const OnDeletedExample({super.key});

  @override
  State<OnDeletedExample> createState() => _OnDeletedExampleState();
}

class _OnDeletedExampleState extends State<OnDeletedExample> {
  @override
  Widget build(BuildContext context) {
    return const CastList();
  }
}

Implementation

InputChip class