chipAnimationStyle property

Used to override the default chip animations durations.

If ChipAnimationStyle.enableAnimation with duration or reverse duration is provided, it will be used to override the chip enable and disable animation durations. If it is null, then default duration will be 75ms.

If ChipAnimationStyle.selectAnimation with duration or reverse duration is provided, it will be used to override the chip select and unselect animation durations. If it is null, then default duration will be 195ms.

If ChipAnimationStyle.avatarDrawerAnimation with duration or reverse duration is provided, it will be used to override the chip checkmark animation duration. If it is null, then default duration will be 150ms.

If ChipAnimationStyle.deleteDrawerAnimation with duration or reverse duration is provided, it will be used to override the chip delete icon animation duration. If it is null, then default duration will be 150ms.

This sample showcases how to override the chip animations durations using ChipAnimationStyle.

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

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [ChipAttributes.chipAnimationStyle].

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: ChipAnimationStyleExample())),
    );
  }
}

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

  @override
  State<ChipAnimationStyleExample> createState() =>
      _ChipAnimationStyleExampleState();
}

class _ChipAnimationStyleExampleState extends State<ChipAnimationStyleExample> {
  bool enabled = true;
  bool selected = false;
  bool showCheckmark = true;
  bool showDeleteIcon = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: .spaceEvenly,
      children: <Widget>[
        Row(
          mainAxisAlignment: .spaceEvenly,
          children: <Widget>[
            Column(
              mainAxisSize: .min,
              children: <Widget>[
                FilterChip.elevated(
                  chipAnimationStyle: ChipAnimationStyle(
                    enableAnimation: const AnimationStyle(
                      duration: Duration(seconds: 3),
                      reverseDuration: Duration(seconds: 1),
                    ),
                  ),
                  onSelected: !enabled ? null : (bool value) {},
                  disabledColor: Colors.red.withValues(alpha: 0.12),
                  backgroundColor: Colors.amber,
                  label: Text(enabled ? 'Enabled' : 'Disabled'),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      enabled = !enabled;
                    });
                  },
                  child: Text(enabled ? 'Disable' : 'Enable'),
                ),
              ],
            ),
            Column(
              mainAxisSize: .min,
              children: <Widget>[
                FilterChip.elevated(
                  chipAnimationStyle: ChipAnimationStyle(
                    selectAnimation: const AnimationStyle(
                      duration: Duration(seconds: 3),
                      reverseDuration: Duration(seconds: 1),
                    ),
                  ),
                  backgroundColor: Colors.amber,
                  selectedColor: Colors.blue,
                  selected: selected,
                  showCheckmark: false,
                  onSelected: (bool value) {},
                  label: Text(selected ? 'Selected' : 'Unselected'),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      selected = !selected;
                    });
                  },
                  child: Text(selected ? 'Unselect' : 'Select'),
                ),
              ],
            ),
          ],
        ),
        Row(
          mainAxisAlignment: .spaceEvenly,
          children: <Widget>[
            Column(
              mainAxisSize: .min,
              children: <Widget>[
                FilterChip.elevated(
                  chipAnimationStyle: ChipAnimationStyle(
                    avatarDrawerAnimation: const AnimationStyle(
                      duration: Duration(seconds: 2),
                      reverseDuration: Duration(seconds: 1),
                    ),
                  ),
                  selected: showCheckmark,
                  onSelected: (bool value) {},
                  label: Text(showCheckmark ? 'Checked' : 'Unchecked'),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      showCheckmark = !showCheckmark;
                    });
                  },
                  child: Text(
                    showCheckmark ? 'Hide checkmark' : 'Show checkmark',
                  ),
                ),
              ],
            ),
            Column(
              mainAxisSize: .min,
              children: <Widget>[
                FilterChip.elevated(
                  chipAnimationStyle: ChipAnimationStyle(
                    deleteDrawerAnimation: const AnimationStyle(
                      duration: Duration(seconds: 2),
                      reverseDuration: Duration(seconds: 1),
                    ),
                  ),
                  onDeleted: showDeleteIcon ? () {} : null,
                  onSelected: (bool value) {},
                  label: Text(showDeleteIcon ? 'Deletable' : 'Undeletable'),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      showDeleteIcon = !showDeleteIcon;
                    });
                  },
                  child: Text(
                    showDeleteIcon ? 'Hide delete icon' : 'Show delete icon',
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Implementation

ChoiceChip class