How to have fade in and fade out between multi widgets

Question

I am using a bottom navigation bar with 5 items and for each widget I should load some data from server , I want to have fade in and fade out between items but I don't know how? , because I think items are not a new pages that I implement route fade transitions. also I defined a futureBuilder for each Items to load it's data It's possible to do sth in futureBuilder's ConnectionState.waiting but it doesn't have fade transition and the transition is jumping also i check interet connection with connectivity plugin

I get into trouble to handle them because I am almost new to flutter !

and i am wonder to know what is the most powerful way to handle it. Thanks

Answer 1

Maybe AnimatedSwitcher is what you are looking for, it adds an implicit animation to its child, so that whenever you call setState() to change its child, it automatically starts a fade-in/fade-out animation between them. Check out this video from the Widget of the Week series:

AnimatedSwitcher from Widget of the Week

Another possibility is AnimatedOpacity, that can achieve a similar behaviour by changing its child's opacity. Here is a reference to the documentation on AnimatedOpacity widget:

AnimatedOpacity from Flutter dev documentation

Answer 2

I know that's a really old question, but I solved using something like that:

  Widget dynWidget = CircularProgressIndicator();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: future,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            dynWidget = Text('Content loaded!');
          }
          return AnimatedSwitcher(
              duration: Duration(seconds: 1), child: dynWidget);
        });
  }