Flutter how to remove button after change route - flutter

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,
)
);