flutter - 如何在颤动中弹出动画

Question

我正在做 Navigator.pop 操作，我想淡出到页面的过渡。我已经尝试过 Fluro 但没有兴趣实施它。

我在做什么：-

 Widget build(BuildContext context) {
return Scaffold(
  appBar: new AppBar(
    title: new Text("Cart"),
    leading: Hero(
      tag: "cartIcon",
      child: Icon(Icons.shopping_cart, color: Colors.yellow),
    ),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            Navigator.pop(context);
          })
    ],
  ),
);

}

Answer 1

没有人回答，但我找到了解决方案，您可以使用 MaterialPageRoute 类这样做

班级：-

import 'package:flutter/material.dart';
class CustomNavRoute<T> extends MaterialPageRoute<T> {
  CustomNavRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    if (settings.isInitialRoute) return child;

    return new FadeTransition(opacity: animation, child: child);
  }
}

并像这样打电话给班级：-

 Navigator.pushReplacement(context,CustomNavRoute(builder: (context) => IntroScreen()));

也在推

Navigator.push(context, CustomNavRoute(builder: (context) => LoginSignup()));

这会将 PUSH 和 POP 上的淡入淡出转换应用到页面！

Answer 2

pop 方法使用了与 push 方法相同的 Route，因此您可以将所需的动画放入 push 方法中，只需确保添加reverseTransitionDuration到 route 以使其动画更明显。

//push to page2
Navigator.of(context).push(
  PageRouteBuilder(
    transitionDuration: Duration(seconds: 1),
    reverseTransitionDuration: Duration(seconds: 1),
    pageBuilder: (context, animation, secondaryAnimation) => page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final tween = Tween(begin: 0.0, end: 1.0);
      final fadeAnimation = animation.drive(tween);
      return FadeTransition(
        opacity: fadeAnimation,
        child: child,
      );
    },
  ),
);


//pop from page2
Navigator.of(context).pop();

Answer 3

如果您对数据结构有任何了解，那么您就会了解堆栈。如果你对堆栈有基本的了解，那么你就会知道 push 和 pop。

ElevatedButton(
       onPressed:(){
       Navigator.of(context).pushNamed('/screen2');
    },
       child: new Text("Push to Screen 2"),
    ),

您可以通过此行导航回上一页。

Navigator.of(context).pop();