Is there a way to navigate pages white keeping the same background in flutter - flutter

Question

I'm trying to build a flutter app where I'm mainly keeping the background the same and the pages that the user uses just stack up on top of the background. Is there any way to navigate from one screen to another whilst keeping the background the same? My main layout for this app is a Stack widget where i keep my background widget there and the widget on top is the one we want to navigate out off.
Any help will be appreciated!

Answer 1

maybe you are looking for something like pageview
https://api.flutter.dev/flutter/widgets/PageView-class.html
simple setstate Example, with a counter
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("simple setstate Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_counter == 0 ? new Page1() : new Container(),
_counter == 1 ? new Page2() : new Container(),
_counter == 2 ? new Page3() : new Container(),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
height: 200.0,
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
height: 200.0,
);
}
}
class Page3 extends StatefulWidget {
#override
_Page3State createState() => _Page3State();
}
class _Page3State extends State<Page3> {
double opacityLevel = 0.0;
#override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(milliseconds: 500), () {
setState(() => opacityLevel = opacityLevel == 1 ? 0.0 : 1.0);
});
}
#override
Widget build(BuildContext context) {
return AnimatedOpacity(
opacity: opacityLevel,
duration: Duration(seconds: 3),
child: Container(
color: Colors.green,
height: 200.0,
),
);
}
}