Подвижная анимация смены экрана

Я новичок в разработке флаттера, и я хочу создать такую ​​анимацию при смене экранов (первая страница также скользит вверх). Я искал учебные пособия и сообщения об этом, но не нашел ни одного. Есть ли способ сделать это?

введите здесь описание изображения


person karl123    schedule 30.07.2019    source источник
comment
Это должно быть возможно; Flutter очень ориентирован на UI. Взгляните на ссылка   -  person Sven    schedule 30.07.2019


Ответы (1)


Вот рабочий код. Вы можете попробовать изменить продолжительность и значение from для обратной анимации. Но пока вроде все работает нормально.

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {

  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 2000)); // you can try to set another duration
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _animationController.reverse(from: 0.2); // you can try to set another value for from
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset.zero,
        end: const Offset(0.0, -1.0),
      ).animate(_animationController),
      child: Scaffold(
        appBar: AppBar(
          title: Text('MyWidget'),
        ),
        body: _createBody(),
      ));
  }

  Widget _createBody() {
    // create body here
    // perform this action on click:
    Navigator.of(context).push(getRoute());
  }

  PageRoute getRoute() {
    _animationController.forward(from: 0.0);
    return PageRouteBuilder(
      pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        return MySecondScreen();
      },
      transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0.0, 1.0),
            end: Offset.zero,
          ).animate(animation),
          child: SlideTransition(
            position: Tween<Offset>(
              begin: Offset.zero,
              end: const Offset(0.0, 1.0),
            ).animate(secondaryAnimation),
            child: child,
          ),
        );
      },
    );
  }

  dispose() {
    super.dispose();
    _animationController.dispose();
  }
}
person Andrey Turkovsky    schedule 30.07.2019
comment
Это сработало! Я только что добавил CurvedAnimation для плавного перехода. Отлично - person karl123; 31.07.2019