Drawer
Create a new file named drawer.dart in the topics directory. It will be attached to the Scaffold on the topics screen to easily navigate to any quiz in the app.
drawer.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import 'package:quizapp/quiz/quiz.dart';
import 'package:quizapp/services/models.dart';
class TopicDrawer extends StatelessWidget {
final List<Topic> topics;
const TopicDrawer({ Key? key, required this.topics}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView.separated(
shrinkWrap: true,
itemCount: topics.length,
itemBuilder: (BuildContext context, int idx) {
Topic topic = topics[idx];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 10, left: 10),
child: Text(
topic.title,
// textAlign: TextAlign.left,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
),
QuizList(topic: topic)
],
);
},
separatorBuilder: (BuildContext context, int idx) => const Divider()),
);
}
}
QuizList
The quiz list displays all available quizzes for a given topic.
class QuizList extends StatelessWidget {
final Topic topic;
const QuizList({Key? key, required this.topic}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: topic.quizzes.map(
(quiz) {
return Card(
shape:
const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
elevation: 4,
margin: const EdgeInsets.all(4),
child: InkWell(
onTap: () {
},
child: Container(
padding: const EdgeInsets.all(8),
child: ListTile(
title: Text(
quiz.title,
style: Theme.of(context).textTheme.headline5,
),
subtitle: Text(
quiz.description,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.subtitle2,
),
leading: QuizBadge(topic: topic, quizId: quiz.id),
),
),
),
);
},
).toList(),
);
}
}
Quiz Badge
The quiz badge tells the user if the quiz has been completed or not.
class QuizBadge extends StatelessWidget {
final String quizId;
final Topic topic;
const QuizBadge({Key? key, required this.quizId, required this.topic})
: super(key: key);
@override
Widget build(BuildContext context) {
Report report = Provider.of<Report>(context);
List completed = report.topics[topic.id] ?? [];
if (completed.contains(quizId)) {
return const Icon(FontAwesomeIcons.checkDouble, color: Colors.green);
} else {
return const Icon(FontAwesomeIcons.solidCircle, color: Colors.grey);
}
}
}
Using the Drawer
Apply the drawer to the Scaffold in the topics screen.
drawer: TopicDrawer(topics: topics),