Search code examples
flutterdartflutter-animationflutter-navigationflutter-android

Flutter Outdated stateful widget is shown in transition when navigating


I'm trying to transition to navigate from a stateful widget (MyStatefulWidget) to a stateless one (SettingsScreen) while animating both screens. But the old screen/route shows an outdated version when it is moving.

I suspect the problem is in the createMoveRoute function that is being passed outChild which is the stateful widget. But it doesn't seem to work.

How can I show the most recent stateful widget for the transition?

enter image description here

It has two tabs: the home that doesn't navigate anywhere and the settings tab that navigates to a different page.

main.dart

import 'package:flutter/material.dart';

Route createMoveRoute(Widget outChild, Widget destination) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => destination,
    transitionDuration: const Duration(seconds: 2),
    transitionsBuilder: (context, animation, secondaryAnimation, newChild) {
      const curve = Curves.easeInOut;
      var outTween = Tween(begin: Offset.zero, end: const Offset(-1.0, 0.0))
          .chain(CurveTween(curve: curve));
      var newTween = Tween(begin: const Offset(1.0, 0.0), end: Offset.zero)
          .chain(CurveTween(curve: curve));
      return Stack(
        children: [
          SlideTransition(
            position: animation.drive(outTween),
            child: outChild,
          ),
          SlideTransition(
            position: animation.drive(newTween),
            child: newChild,
          ),
        ],
      );
    },
  );
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _widgetOptions = <Widget>[
      const Text(
        'Press settings at the bottom',
        style: optionStyle,
      ),
      ElevatedButton(
        onPressed: () {
          Navigator.of(context).push(
            createMoveRoute(widget, const SettingsScreen()),
          );
        },
        child: const Text('Go to settings'),
      ),
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("Settings"),
      ),
    );
  }
}

Solution

  • This is how to animate a transition with a stateful widget that moves both the old and new routes/widgets.

    The solution is to apply the transitions to both widgets when they are loaded. This can be done with page routes. So, when a route leaves, it doesn't listen to the new animation, it listens to its own secondaryAnimation.

    Background: I was browsing this issue for Flutter and found this solution. I adapted the solution to fit my needs below.

    main.dart

    import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(primaryColor: Colors.white),
          initialRoute: '/',
          onGenerateInitialRoutes: (initialRoute) =>
              [createCustomTransition(HomeScreen())],
          onGenerateRoute: (settings) {
            if (settings.name == '1') {
              return createCustomTransition(const SettingsScreen());
            }
          },
          debugShowCheckedModeBanner: false,
        );
      }
    }
    
    PageRouteBuilder createCustomTransition(Widget screen) {
      return PageRouteBuilder(
        transitionDuration: const Duration(milliseconds: 700),
        reverseTransitionDuration: const Duration(milliseconds: 700),
        pageBuilder: (context, animation, secondaryAnimation) => screen,
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          final slideAnimation = Tween(
            begin: const Offset(1.0, 0.0),
            end: Offset.zero,
          ).animate(CurvedAnimation(
            curve: Curves.easeInOut,
            reverseCurve: Curves.easeInOut,
            parent: animation,
          ));
    
          final slideOutAnimation = Tween(
            begin: Offset.zero,
            end: const Offset(-1.0, 0.0),
          ).animate(CurvedAnimation(
            curve: Curves.easeInOut,
            reverseCurve: Curves.easeInOut,
            parent: secondaryAnimation,
          ));
    
          return SlideTransition(
            position: slideAnimation,
            child: SlideTransition(
              position: slideOutAnimation,
              child: child,
            ),
          );
        },
      );
    }
    
    class HomeScreen extends StatefulWidget {
      HomeScreen({Key? key}) : super(key: key);
    
      @override
      State<HomeScreen> createState() => _HomeScreenState();
    }
    
    class _HomeScreenState extends State<HomeScreen> {
      final List<int> list = List.generate(1000, (index) => index);
    
      int _selectedIndex = 0;
      static const TextStyle optionStyle =
          TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
    
      void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        List<Widget> _widgetOptions = <Widget>[
          const Text(
            'Press settings at the bottom',
            style: optionStyle,
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed("1");
            },
            child: const Text('Go to settings'),
          ),
        ];
        return Scaffold(
          appBar: AppBar(
            title: const Text('BottomNavigationBar Sample'),
          ),
          body: Center(
            child: _widgetOptions.elementAt(_selectedIndex),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.settings),
                label: 'Settings',
              ),
            ],
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
          ),
        );
      }
    }
    
    class SettingsScreen extends StatelessWidget {
      const SettingsScreen({Key? key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.green.shade100,
          body: Center(child: Text('Settings')),
        );
      }
    }
    

    the visuals:

    enter image description here