Page View
In the quiz screen, update the Scaffold to use a PageView.
quiz.dart
return Scaffold(
appBar: AppBar(
title: AnimatedProgressbar(value: state.progress),
leading: IconButton(
icon: const Icon(FontAwesomeIcons.times),
onPressed: () => Navigator.pop(context),
),
),
body: PageView.builder(
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
controller: state.controller,
onPageChanged: (int idx) =>
state.progress = (idx / (quiz.questions.length + 1)),
itemBuilder: (BuildContext context, int idx) {
if (idx == 0) {
return StartPage(quiz: quiz);
} else if (idx == quiz.questions.length + 1) {
return CongratsPage(quiz: quiz);
} else {
return QuestionPage(question: quiz.questions[idx - 1]);
}
},
),
);
Update Quiz State
Add the page controller to the Quiz state so that it can be shared across multiple children easily.
main.dart
import 'package:flutter/material.dart';
import 'package:quizapp/services/models.dart';
class QuizState with ChangeNotifier {
final PageController controller = PageController();
void nextPage() async {
await controller.nextPage(
duration: const Duration(milliseconds: 500),
curve: Curves.easeOut,
);
}
}
Dynamic Pages
The PageView will generate one of three possible pages:
- StartPage
- QuestionPage
- CongratsPage
View the full source code to review the code for these pages.