Navigator или SlideTransition для отображения экрана снизу вверх

Я хочу сделать экран викторины с таким эффектом, чтобы после выбора варианта ответа снизу вверх появлялся следующий вопрос с параметрами. Изменения коснутся только тела, а панель приложений не изменится.

Чтобы перейти на главный экран викторины, я использую навигатор. Для навигации по вопросам тоже сначала хотел использовать уже вложенный навигатор, но после изучения темы подумал, что лучше будет вносить изменения через анимацию, а именно с помощью SlideTransition. Я примерно понял, как сделать так, чтобы второй экран с вопросами появлялся после выбора ответа в первом с помощью SlideTransition, но как это сделать с последующими, мне совершенно непонятно. Пожалуйста, посоветуйте мне использовать Navigator или SlideTransition, а если SlideTransition, как мне сделать так, чтобы последовательные экраны появлялись с вопросами?

img1img2


flutter flutter-layout flutter-animation
person djonz    schedule 10.05.2020    source источник
comment
Я прав, что вам нужна настраиваемая анимация навигации?   -  person Yauhen Sampir    schedule 10.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете построить свой собственный Маршрут с настраиваемыми переходами. Пожалуйста, проверьте образец. введите здесь описание изображения

    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(),
    );
  }
}
person Yauhen Sampir    schedule 10.05.2020
comment
Спасибо. Но как мне сделать AppBar статическим и изменить только Body, когда новый поднимается снизу вверх? - person djonz; 10.05.2020
comment
Вам необходимо использовать виджет Navigator, поэтому у вас есть RootScreen с панелью приложений и виджетом Navigator в качестве тела, а для навигации вы должны использовать NavigatorKey этого виджета Navigator. Тогда у вас будет статическая панель приложений. Другими словами, вам нужно использовать внутреннюю навигацию. - person Yauhen Sampir; 11.05.2020
comment
Спасибо! Я нашел способ попроще, сделал это с помощью PageView и PageController - person djonz; 11.05.2020