🎨 [Design] Improved the Lecture Selector to improve usability.

Author: md-weber

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/lesson_selector_screen.dart

@@ -37,7 +37,14 @@ 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,
                     ),
                     SliverList(
                       delegate: SliverChildBuilderDelegate((context, index) {