Step 75

lib/answer_button.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class AnswerButton extends StatelessWidget {
+  const AnswerButton({
+    super.key,
+    required this.answerText,
+    required this.onTap,
+  });
+
+  final String answerText;
+  final void Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: onTap,
+      style: ElevatedButton.styleFrom(
+        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 40),
+        backgroundColor: const Color.fromARGB(255, 33, 1, 95),
+        foregroundColor: Colors.white,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(40),
+        ),
+      ),
+      child: Text(
+        answerText,
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+}

lib/data/questions.dart

@@ -10,7 +10,6 @@ const questions = [
       'Functions',
     ],
   ),
-
   QuizQuestion('How are Flutter UIs built?', [
     'By combining widgets in code',
     'By combining widgets in a visual editor',

lib/models/quiz_question.dart

@@ -3,4 +3,10 @@ class QuizQuestion {
 
   final String text;
   final List<String> answers;
-}
+
+  List<String> getShuffeldAnswers() {
+    final shuffeldList = List.of(answers);
+    shuffeldList.shuffle();
+    return shuffeldList;
+  }
+}

lib/questions_screen.dart

@@ -1,4 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:adv_basics/answer_button.dart';
+import 'package:adv_basics/data/questions.dart';
+import 'package:google_fonts/google_fonts.dart';
 
 class QuestionsScreen extends StatefulWidget {
   const QuestionsScreen(void Function() switchScreen, {super.key});
@@ -10,8 +13,45 @@ class QuestionsScreen extends StatefulWidget {
 }
 
 class _QuestionsScreenState extends State<QuestionsScreen> {
+  var currentQuestionIndex = 0;
+
+  void answerQuestion() {
+    setState(() {
+      currentQuestionIndex++;
+    });
+  }
+
   @override
   Widget build(context) {
-    return const Text('QuestionsScreen');
+    final currentQuestion = questions[currentQuestionIndex];
+
+    return SizedBox(
+      width: double.infinity,
+      child: Container(
+        margin: const EdgeInsets.all(40),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              currentQuestion.text,
+              style: GoogleFonts.lato(
+                color: const Color.fromARGB(255, 201, 153, 251),
+                fontSize: 24,
+                fontWeight: FontWeight.bold,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 30),
+            ...currentQuestion.getShuffeldAnswers().map((answer) {
+              return AnswerButton(
+                answerText: answer,
+                onTap: answerQuestion,
+              );
+            })
+          ],
+        ),
+      ),
+    );
   }
-}
+}

lib/quiz.dart

@@ -41,9 +41,10 @@ class _QuizState extends State<Quiz> {
               end: Alignment.bottomRight,
             ),
           ),
-          child: activeScreen == 'start-screen'
-              ? StartScreen(switchScreen)
-              : QuestionsScreen(switchScreen),
+//          child: activeScreen == 'start-screen'
+//              ? StartScreen(switchScreen)
+//              : QuestionsScreen(switchScreen),
+          child: screenWidget,
         ),
       ),
     );

lib/start_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 
 class StartScreen extends StatelessWidget {
   const StartScreen(this.startQuiz, {super.key});
@@ -19,10 +20,10 @@ class StartScreen extends StatelessWidget {
           const SizedBox(
             height: 80,
           ),
-          const Text(
+          Text(
             'Learn Flutter the fun way!',
-            style: TextStyle(
-              color: Color.fromARGB(255, 237, 223, 252),
+            style: GoogleFonts.lato(
+              color: const Color.fromARGB(255, 237, 223, 252),
               fontSize: 24,
             ),
           ),