Dynamic Drawer Create a scrollable animated drawer to show a list of topics

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access


*Enrollment provides full access to this course (and updates) for life.


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.

file_type_flutter 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);

  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: const EdgeInsets.only(top: 10, left: 10),
                  child: Text(
                    // textAlign: TextAlign.left,
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white70,
                QuizList(topic: topic)
          separatorBuilder: (BuildContext context, int idx) => const Divider()),


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);

  Widget build(BuildContext context) {
    return Column(
      children: topic.quizzes.map(
        (quiz) {
          return Card(
                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(
                    style: Theme.of(context).textTheme.headline5,
                  subtitle: Text(
                    overflow: TextOverflow.fade,
                    style: Theme.of(context).textTheme.subtitle2,
                  leading: QuizBadge(topic: topic, quizId: quiz.id),

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);

  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),

Q&A Chat