Flutter how to remove button after change route

Question

I'm stuck on this case. I have routing on the flutter app where is a gradient background. When a route is changed animations are run but the content of the previous page is still visible. How can I remove the content of the previous page?

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: <Color>[Colors.redAccent, Colors.blueAccent],
          ),
        ),
        child: const Screen1(),
      ),
    );
  }
}

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CupertinoButton(
        color: Colors.black12,
        child: const Text('Click'),
        onPressed: () {
          Navigator.push(
            context,
            _createRoute(this, const Screen2()),
          );
        },
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: CupertinoButton(
          color: Colors.black12,
          child: const Text('Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}


Route _createRoute(Widget exitPage, Widget enterPage) {
  return PageRouteBuilder(
    opaque: false,
    pageBuilder: (context, animation, secondaryAnimation) => enterPage,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1, 0);
      const zero = Offset.zero;
      const curve = Curves.easeInOut;

      var tween = Tween<Offset>(begin: begin, end: zero)
          .chain(CurveTween(curve: curve));
      var tween2 = Tween<Offset>(begin: zero, end: const Offset(-1, 0))
          .chain(CurveTween(curve: curve));

      return Stack(
        children: <Widget>[
          SlideTransition(
            position: tween.animate(animation),
            child: enterPage,
          ),
          SlideTransition(
            position: tween2.animate(animation),
            child: exitPage,
          ),
        ],
      );
    },
  );
}

Link to dartpad: https://dartpad.dev/?id=c69d10993772b2bbe76c729063866dc3

Thanks for your reply :)

Answer 1

here is your solution, first solution : simply change PageRouteBuilder opaque value to true.

or

if you want those gradient for all your routing pages, use this,

class gradientbg extends StatelessWidget {

  Widget child;
  gradientbg({@required this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: <Color>[Colors.redAccent, Colors.blueAccent],
        ),
      ),
      child: child,
    );
  }
}

you can use like this,

  @override
  Widget build(BuildContext context) {

    return gradientbg(
      child: Scaffold(
        backgroundColor: Colors.transparent,
      )
    );