Flutter: How to switch from one page view to another? - flutter

Question

I am creating a flutter app where I have a screen which contains a PageView Builder.There are two other screens which are shown depending on the condition in the PageView Builder(i.e. QuizResult and QuizQuestion).
If the index if equal to the number of quiz questions it will show the Quiz Result Page otherwise it will continue showing the next question on the QuizQuestion Page(Have hardcoded the question for this example).
I want to know what logic can I add in the FlatButton widget onPressed in the QuizResult Page so that I can reset the index of the PageView back to the start and can again show the QuizQuestion Page again?
This is the QuizScreen
class QuizScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
physics: const NeverScrollableScrollPhysics(),
controller: state.controller,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
if (index == quiz.questions.length) {
return QuizResult();
} else {
return QuizQuestion(question: quiz.questions[index]);
}
},
)
);
}
}
The QuizQuestion Widget looks like this
class QuizQuestion extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(body: Text('Which is the fastest animal?'));
}
}
The QuizResult Widget looks like this
class QuizResult extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(body: FlatButton(onPressed(){ < Logic Here ?? >}, child:Text('PlayAgain')));
}
}

Answer 1

I have used your code to reproduce the issue and then modified it for readability.
All you need is to assign an itemCount. And it needs to be the length of the quiz plus one. We need to add one more page to show the result page.
itemCount: questions.length + 1,
As you already predicted, we need to check the index of the shown page and create a condition based on it.
itemBuilder: (context, index) {
if (index == questions.length) {
return QuizResult(onPressed: onPressed);
}
return QuizQuestion(question: questions[index]);
},
Lastly, you need to jump to the first page using the controller to reset the quiz. The easiest way to do that is: Passing the onPressed function via constructor to QuizResult:
void onPressed() {
controller.jumpToPage(0);
currentPage = 0;
}
Please check the following solution:
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const QuizScreen(),
);
}
class QuizScreen extends StatefulWidget {
const QuizScreen({Key? key}) : super(key: key);
#override
State<QuizScreen> createState() => _QuizScreenState();
}
class _QuizScreenState extends State<QuizScreen> {
final PageController controller = PageController();
int currentPage = 0;
List<String> questions = [
'Which is the fastest animal?',
'Which is the slowest animal?',
'Which is the longest animal?',
];
#override
Widget build(BuildContext context) => Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
physics: const NeverScrollableScrollPhysics(),
controller: controller,
scrollDirection: Axis.vertical,
itemCount: questions.length + 1,
itemBuilder: (context, index) {
if (index == questions.length) {
return QuizResult(onPressed: onPressed);
}
return QuizQuestion(question: questions[index]);
},
),
),
TextButton(
onPressed: () {
if (currentPage == questions.length) return;
controller.jumpToPage(++currentPage);
},
child: const Text('Next'),
)
],
),
),
);
void onPressed() {
controller.jumpToPage(0);
currentPage = 0;
}
}
class QuizQuestion extends StatelessWidget {
const QuizQuestion({Key? key, required this.question}) : super(key: key);
final String question;
#override
Widget build(BuildContext context) => Center(
child: Text(question),
);
}
class QuizResult extends StatelessWidget {
const QuizResult({Key? key, required this.onPressed}) : super(key: key);
final void Function() onPressed;
#override
Widget build(BuildContext context) => Scaffold(
body: Center(
child: TextButton(
onPressed: onPressed,
child: const Text('Play Again'),
),
),
);
}
You can access the modified source code through GitHub.
If you have further questions, please don't hesitate to write in the comments.