导航器或SlideTransition用于从下到上显示屏幕

Question

我想制作一个具有以下效果的测验屏幕：选择答案选项后，下一个带有选项的问题将从下而上出现。所做的更改仅适用于主体，而应用程序栏则不会更改。

要进入测验主屏幕，我使用导航器。对于问题导航，也首先要使用已嵌套的Navigator，但是在研究了该主题之后，我认为最好通过动画进行更改，即使用SlideTransition。我大致理解了如何使用SlideTransition在第一个选择答案后使出现问题的第二个屏幕出现，但是我对如何处理随后的问题完全不清楚。请给我建议，我应该使用Navigator或SlideTransition，如果使用SlideTransition，如何使连续的屏幕出现问题？

Answer 1

您可以使用自定义过渡来构建自己的路线。请检查样品。

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Goto Second Page'),
          onPressed: () {
            Navigator.of(context).push(SecondPageRoute());
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

class SecondPageRoute extends PageRouteBuilder {
  SecondPageRoute() : super(pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) => SecondPage());

  // OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return SlideTransition(
      position: Tween<Offset>(begin: Offset(0, 1), end: Offset(.0, .0))
          .animate(controller),
      child: SecondPage(),
    );
  }
}