Flutter Outdated 有状态小部件在导航时显示在转换中

Question

我正在尝试从有状态小部件 (MyStatefulWidget) 导航到无状态小部件 (SettingsScreen)，同时为两个屏幕设置动画。但是旧的screen/route在移动的时候显示的是过时的版本

我怀疑问题出在正在传递的 createMoveRoute 函数中 outChild，它是有状态的小部件。但是好像不行。

如何为转换显示最新的有状态小部件？

它有两个选项卡：不导航到任何地方的主页和导航到不同页面的设置选项卡。

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"),
      ),
    );
  }
}

Answer 1

这是如何使用同时移动旧版和新版的有状态小部件制作动画过渡 routes/widgets。

解决方案是在加载时将转换应用到两个小部件。这可以通过页面路由来完成。所以，当路由离开时，它不会监听新的动画，它会监听自己的 secondaryAnimation。

背景：我正在浏览this issue for Flutter and found 。我在下面调整了解决方案以满足我的需求。

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')),
    );
  }
}

视觉效果：

Flutter Outdated 有状态小部件在导航时显示在转换中

Flutter Outdated stateful widget is shown in transition when navigating

dart

flutter

flutter-animation

flutter-navigation

flutter-android