Animation when changing 'home:' content - flutter

Question

class Segunda extends StatefulWidget {
Tercera createState() => Tercera();
}
class Tercera extends State<Segunda> {
var size, heightA, widthA;
List<StatefulWidget> bodys = [Segunda2(), Segunda3()];
int n = 0;
#override
Widget build(BuildContext context) {
setState(() {
size = MediaQuery.of(context).size;
heightA = size.height;
widthA = size.width;
});
return Scaffold(
body: Container(
width: widthA,
height: heightA,
child: Column(children: [
Container(
width: widthA,
height: heightA * 0.1,
color: Colors.blue,
child: ElevatedButton(
onPressed: () {
setState(() {
n++;
});
},
child: Text("Change")),
),
Container(
width: widthA,
height: heightA * 0.9,
child: MaterialApp(
home: bodys[n],
),
)
]),
));
}
}
I want to always have a little bar at the beginning of my app, but changing the content (im learning flutter and i want to make a little game).
So, I made a test app like this
that changes the content when you press a button, I have a list with different StatefulWidgets (Segunda2 and Segunda3 returns just a solid background color).
Is there anyway I can add a animation when changing the content of the 'home', like the ones you can do with Navigator (the new content sliding from the left, for example)
Im using this way because when I try to use navigator to change between classes while trying to have a permanent widget (like the blue bar in this case) it just ignores it and changes the whole thing, I want to press a button and see the new content coming from a side.
i tried using navigator to change content with an animation, but the persistent widget that i want to have just changes as well.
I tried using persistent widget perse, and it didnt work for me

Answer 1

Dont use Multiple MaterialApp and you can use PageView widget.
Try to follow this widget structure.
void main() => runApp(ProviderScope(child: MyApp()));
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Segunda(),
);
}
}
class Segunda extends StatefulWidget {
Tercera createState() => Tercera();
}
class Tercera extends State<Segunda> {
var size, heightA, widthA;
// List<StatefulWidget> bodys = [Segunda2(), Segunda3()];
List<Widget> bodys = [Text("Segunda2"), Text("Segunda3")];
final PageController controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(builder: (_, constraints) {
heightA = constraints.maxHeight;
widthA = constraints.maxWidth;
return Container(
width: widthA,
height: heightA,
child: Column(children: [
Container(
width: widthA,
height: heightA * 0.1,
color: Colors.blue,
child: ElevatedButton(
onPressed: () {
// setState(() {});
// controller.animateToPage(page,
// duration: duration, curve: curve);
controller.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.ease);
},
child: Text("Change")),
),
Expanded(
child: PageView.builder(
controller: controller,
itemBuilder: (context, index) {
return bodys[index];
},
),
)
]),
);
}),
);
}
}