flutter multiple pageview and controller - flutter

Question

I have two pageviews:
pageview0 has 3 pages: 1, 2, 3
pageview1 has 3 pages: A, B, C
Only one pageview is shown at a time, and I want to switch between them when I press a 'switch' button on AppBar.
What I want:
If I'm at pageview0 page2 and press the switch button,
then I want to see pageview1 page A.
But the below code shows pageview1 page B (the page with same index).
I also tried to use two PageControllers instead of one, but the behavior is same.
How can I control what page to show when there's multiple PageViews and switching between them?
My code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> pageview0 = ["1", "2", "3"];
List<String> pageview1 = ["A", "B", "C"];
int pageViewIndex = 0;
// Try single controller.
PageController controller;
// Try multiple controller.
List<PageController> controllers;
#override
void initState() {
super.initState();
controller = PageController(initialPage: 0); // pageview0 and pageview1
controllers = [];
controllers.add(PageController(initialPage: 0)); // pageview0
controllers.add(PageController(initialPage: 0)); // pageview1
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(icon: const Icon(Icons.navigate_next), onPressed: () {
setState(() {
if (pageViewIndex == 0) pageViewIndex = 1;
else pageViewIndex = 0;
});
},)
],
),
body: PageView.builder(
itemBuilder: (context, page) {
if (pageViewIndex == 0) return Center(child: Text(pageview0[page]));
else return Center(child: Text(pageview1[page]));
},
itemCount: 3,
// single controller
// controller: controller,
// Multiple controller
controller: (pageViewIndex == 0)? controllers[0] : controllers[1],
),
);
}
}

Answer 1

Based on Taufik's comment, I changed to IndexedStack and works well.
Here's the new code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> pageview0 = ["1", "2", "3"];
List<String> pageview1 = ["A", "B", "C"];
int pageViewIndex = 0;
// Try single controller.
PageController controller;
// Try multiple controller.
List<PageController> controllers;
#override
void initState() {
super.initState();
controller = PageController(initialPage: 0); // pageview0 and pageview1
controllers = [];
controllers.add(PageController(initialPage: 0)); // pageview0
controllers.add(PageController(initialPage: 0)); // pageview1
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(icon: const Icon(Icons.navigate_next), onPressed: () {
setState(() {
if (pageViewIndex == 0) pageViewIndex = 1;
else pageViewIndex = 0;
});
},)
],
),
body: IndexedStack(
index: pageViewIndex,
children: <Widget> [
PageView.builder(
itemBuilder: (context, page) {
return Center(child: Text(pageview0[page]));
},
itemCount: 3,
controller: controllers[0],
),
PageView.builder(
itemBuilder: (context, page) {
return Center(child: Text(pageview1[page]));
},
itemCount: 3,
controller: controllers[1],
),
],
),
);
}
}