Smooth Transitions in Flutter with AnimatedSwitcher

Ok here comes a quick one about adding transitions to your app widgets.

Most engineers waste a lot of time with complicated custom animated widgets for transitions or don’t even think about adding transitions to their apps.

One of the main reasons not to add transitions to our Flutter apps is that we don’t want to waste time because, let’s be fair, we usually don’t have it.

Here is a quick way to add transitions without losing our precious time: AnimatedSwitcher.

Instead of swapping widgets and getting a hard jump, wrap them in AnimatedSwitcher and let it handle the transition when the child changes.

Here is a simple example of how it works:

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),
      child: _isLoading
          ? const CircularProgressIndicator(key: ValueKey('loading'))
          : const Text('Content loaded!', key: ValueKey('content')),
    );
  }
}

It’s great for things like:

• loading ➡️ content
• empty state ➡️ data
• toggles or state changes 🔘

A couple of practical notes:

• It fades by default, but you can plug in your own transition (slide, scale, etc.).
• If you’re switching between widgets of the same type (e.g. two Text), give them different keys (ValueKey) so Flutter doesn’t skip the animation.

Try it yourself on Zapp.run!