How to crossfade widgets runtime calculated in Flutter?

44 Views Asked by At

I'm developing a Flutter app. In a screen I have a switch that assigns a Widget based on a controller value and then this widget gets rendered.

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

  @override
  Widget build(BuildContext context) {
    return GetX<NavigationController>(
      builder: (nc) {
        final Widget screen;

        switch (nc.currentHomeScreen.value) {
          case HomeScreen.device:
            {
              screen = const DeviceContent();
              break;
            }
          case HomeScreen.maps:
            {
              screen = const MapsContent();
              break;
            }
          case HomeScreen.realTime:
            {
              screen = const RealtimeContent();
              break;
            }
          default:
            {
              screen = const HomeContent();
              break;
            }
        }

        return Column(
          children: [
            const TestModeIndicator(),
            // TODO: Crossfade
            screen,
          ],
        );
      },
    );
  }
}

This works perfectly, however the screen is changed a little harshly. How can I let the screen change with a crossfade? AnimatedCrossfade is not an option, since I have to provide a first and a second child, but since it changes dynamically.

Any idea?

0

There are 0 best solutions below