Design System Improvements

lib/design_system.dart

@@ -1,6 +1,15 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
 class Insets {
   static const double small = 4.0;
   static const double medium = 8.0;
   static const double large = 12.0;
   static const double xtraLarge = 16.0;
 }
+
+// TODO: Replace by a proper Theme
+class FlashcardAppColors {
+  static const Color green = Colors.green;
+}

lib/main.dart

@@ -12,6 +12,7 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
+      debugShowCheckedModeBanner: false,
       title: 'Flutter Demo',
       theme: ThemeData(
         primarySwatch: Colors.blue,

lib/ui/screen/home/completion_widget.dart

@@ -0,0 +1,30 @@
+import 'package:flashcard_project/design_system.dart';
+import 'package:flashcard_project/ui/screen/lesson_selector_screen.dart';
+import 'package:flutter/material.dart';
+
+class CompletionWidget extends StatelessWidget {
+  final VoidCallback onPressed;
+  const CompletionWidget({required this.onPressed, Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        const Text("Congratulations! You finished all your cards."),
+        const SizedBox(height: Insets.medium),
+        ElevatedButton(
+          onPressed: onPressed,
+          child: const Text("Repeat Lesson"),
+        ),
+        const SizedBox(height: Insets.medium),
+        ElevatedButton(
+          onPressed: () {
+            LessonSelectorScreen.navigateTo(context);
+          },
+          child: const Text("Back to Lecture Selection"),
+        )
+      ],
+    );
+  }
+}

lib/ui/screen/home_page.dart

@@ -1,6 +1,7 @@
 import 'package:flashcard_project/design_system.dart';
 import 'package:flashcard_project/domain/flashcard_service.dart';
 import 'package:flashcard_project/repository/sheet_repo.dart';
+import 'package:flashcard_project/ui/screen/home/completion_widget.dart';
 import 'package:flutter/material.dart';
 
 class HomePage extends StatefulWidget {
@@ -21,6 +22,7 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
+  late Future<bool> init;
   late FlashcardService _flashcardService;
   late List<MapEntry<String, String>> questionAnswerList;
   late MapEntry<String, String> questionAnswerHeader;
@@ -32,10 +34,10 @@ class _HomePageState extends State<HomePage> {
   initState() {
     super.initState();
     _flashcardService = FlashcardService(SheetRepo(widget.spreadsheetId));
-    startLesson();
+    init = startLesson();
   }
 
-  Future<void> startLesson() async {
+  Future<bool> startLesson() async {
     Map<String, String> _questionAnswerList =
         await _flashcardService.getQuestionsAndAnswers();
     questionAnswerList = _questionAnswerList.entries.toList();
@@ -47,6 +49,7 @@ class _HomePageState extends State<HomePage> {
       cardFlipped = false;
       allCardsFinished = false;
     });
+    return true;
   }
 
   @override
@@ -58,40 +61,61 @@ class _HomePageState extends State<HomePage> {
       body: Padding(
         padding: const EdgeInsets.all(Insets.small),
         child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Expanded(
-              child: allCardsFinished
-                  ? _buildLoadingSpinner()
-                  : IgnorePointer(
-                      ignoring: cardFlipped,
-                      child: InkWell(
-                        onTap: () => setState(() => cardFlipped = !cardFlipped),
-                        child: Card(
-                          child: Center(
-                            child: Column(
-                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                              children: [
-                                Text(
-                                  cardFlipped
-                                      ? questionAnswerHeader.value
-                                      : questionAnswerHeader.key,
-                                ),
-                                Expanded(
+            FutureBuilder<bool>(
+                future: init,
+                builder: (context, AsyncSnapshot<bool> snapshot) {
+                  if (snapshot.hasData) {
+                    return Expanded(
+                      child: allCardsFinished
+                          ? CompletionWidget(onPressed: () {
+                              init = startLesson();
+                            })
+                          : IgnorePointer(
+                              ignoring: cardFlipped,
+                              child: InkWell(
+                                onTap: () =>
+                                    setState(() => cardFlipped = !cardFlipped),
+                                child: Card(
                                   child: Center(
-                                    child: Text(
-                                      cardFlipped
-                                          ? currentQuestionAndAnswer.value
-                                          : currentQuestionAndAnswer.key,
+                                    child: Column(
+                                      mainAxisAlignment:
+                                          MainAxisAlignment.spaceEvenly,
+                                      children: [
+                                        Text(
+                                          cardFlipped
+                                              ? questionAnswerHeader.value
+                                              : questionAnswerHeader.key,
+                                          textAlign: TextAlign.center,
+                                        ),
+                                        Expanded(
+                                          child: Center(
+                                            child: Text(
+                                              cardFlipped
+                                                  ? currentQuestionAndAnswer
+                                                      .value
+                                                  : currentQuestionAndAnswer
+                                                      .key,
+                                              textAlign: TextAlign.center,
+                                            ),
+                                          ),
+                                        ),
+                                      ],
                                     ),
                                   ),
                                 ),
-                              ],
+                              ),
                             ),
-                          ),
-                        ),
-                      ),
-                    ),
-            ),
+                    );
+                  }
+                  if (snapshot.hasError) {
+                    return const Text(
+                      "Sorry something went wrong, please try it later again",
+                    );
+                  }
+                  return const Center(child: CircularProgressIndicator());
+                }),
             cardFlipped
                 ? Row(
                     children: [
@@ -104,7 +128,7 @@ class _HomePageState extends State<HomePage> {
                         icon: const Icon(Icons.check_circle),
                       ),
                       IconButton(
-                        onPressed: startLesson,
+                        onPressed: () => init = startLesson(),
                         icon: const Icon(Icons.redo),
                       ),
                     ],
@@ -126,15 +150,4 @@ class _HomePageState extends State<HomePage> {
       currentQuestionAndAnswer = questionAnswerList.removeAt(0);
     });
   }
-
-  Column _buildLoadingSpinner() {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: const [
-        Text("Congratulations! You finished all your cards."),
-        SizedBox(height: Insets.large),
-        Text("Your stats are: 42 % correct answered"),
-      ],
-    );
-  }
 }

lib/ui/screen/lesson_selector_screen.dart

@@ -9,6 +9,14 @@ class LessonSelectorScreen extends StatefulWidget {
 
   @override
   State<LessonSelectorScreen> createState() => _LessonSelectorScreenState();
+
+  static void navigateTo(BuildContext context) {
+    Navigator.push(context, MaterialPageRoute(
+      builder: (context) {
+        return const LessonSelectorScreen();
+      },
+    ));
+  }
 }
 
 class _LessonSelectorScreenState extends State<LessonSelectorScreen> {
@@ -37,7 +45,15 @@ class _LessonSelectorScreenState extends State<LessonSelectorScreen> {
                 slivers: [
                   for (var lectureFolder in possibleLectureFolders) ...[
                     SliverAppBar(
-                      title: Text(lectureFolder.name),
+                      title: Text(
+                        lectureFolder.name,
+                        textAlign: TextAlign.left,
+                        style: const TextStyle(color: Colors.black),
+                      ),
+                      centerTitle: false,
+                      backgroundColor: Colors.white,
+                      forceElevated: true,
+                      automaticallyImplyLeading: false,
                     ),
                     SliverList(
                       delegate: SliverChildBuilderDelegate((context, index) {
@@ -58,7 +74,7 @@ class _LessonSelectorScreenState extends State<LessonSelectorScreen> {
               );
             }
             if (snapshot.hasError) return const Text("Something wrong happend");
-            return const CircularProgressIndicator();
+            return const Center(child: CircularProgressIndicator());
           }),
     );
   }