Flutter中FloatingActionButton无法实现普通与扩展状态间平滑动画切换的问题咨询

The issue here is that you're replacing two entirely different FAB widgets (a standard FloatingActionButton and a FloatingActionButton.extended) when isFABOpen changes. Flutter's built-in FAB animators only work when you modify properties of the same widget instance—not when you swap out the widget entirely.

Fix: Use a Single FloatingActionButton.extended with the isExtended Property #

Instead of switching between two separate FABs, use one FloatingActionButton.extended component and toggle its isExtended attribute to control the expanded/collapsed state. This lets the floatingActionButtonAnimator handle the smooth transition automatically.

Here's your updated code:

return Scaffold(
  appBar: appBar,
  body: Center(
    // Your existing body code
  ),
  floatingActionButton: FloatingActionButton.extended(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => AddQuote()),
      );
    },
    label: const Text('Add Quote'),
    icon: const Icon(Icons.add_rounded),
    // Toggle this property to switch between states
    isExtended: isFABOpen,
  ),
  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
);

Why This Works #

• The isExtended property is designed specifically to trigger the built-in expansion/collapse animation for extended FABs.
• By keeping the same widget instance and only changing its properties, Flutter recognizes the state change and applies the animator you specified.
• You also eliminate duplicate code for the onPressed handler, which makes your code cleaner.

If you need the collapsed state to look exactly like a standard circular FAB, this approach still works—when isExtended is false, the extended FAB will shrink down to match the size and shape of a regular FAB while animating smoothly.

内容的提问来源于stack exchange，提问作者Alexander Roumeliotis