Navigator or SlideTransition for appear screen from bottom to top

user_13512578 0
Viewed 1291

I want to make a quiz screen with such an effect that after selecting an answer option, the next question with options appears from the bottom up. The changes would only apply to the body, and the appbar would not change.

To go to the quiz home screen, I use Navigator. For navigation on issues, too, first wanted to use already nested Navigator, but after studying the topic, I thought that it would be better to make changes through animation, namely using SlideTransition. I roughly understood how to make the second screen with questions appear after selecting the answer in the first using SlideTransition, but how to do with the subsequent ones is completely unclear to me. Please give me advice that I should use Navigator or SlideTransition, and if SlideTransition, how do I make consecutive screens appear with questions?

img1 img2

flutter-animation flutter-layout flutter
1 Answers

You can build your own Route with custom transitions. Please check sample. enter image description here

    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(),
    );
  }
}
user_51642520
Related