Interactive personalisation and quiz screen

lite_up/lib/constants/style.dart

@@ -22,13 +22,18 @@ const TextStyle loginButtonTextStyle =
 const TextStyle signUpButtonTextStyle =
     TextStyle(color: deepOrange, fontSize: 16, fontWeight: FontWeight.bold);
 
+const TextStyle personalisationTextstyle =
+    TextStyle(color: grayish, fontSize: 13, fontWeight: FontWeight.normal);
+
 /* COLOR STYLE */
 const Color background = Color.fromARGB(255, 249, 240, 181);
 const Color deepOrange = Color.fromARGB(255, 255, 123, 46);
 const Color softOrange = Color.fromARGB(255, 254, 189, 142);
 const Color deepYellow = Color.fromARGB(255, 255, 187, 1);
 const Color skyBlue = Color.fromARGB(255, 156, 197, 231);
 const Color white = Colors.white;
+const Color grayish = Color.fromARGB(255, 87, 87, 87);
+const Color lightGray = Color.fromARGB(255, 217, 217, 217);
 
 ButtonStyle loginButtonStyle = ButtonStyle(
     backgroundColor: MaterialStateProperty.all(deepOrange),

lite_up/lib/constants/text.dart

@@ -27,3 +27,14 @@ const flashcards_1 = [
     "Jacques Pangemanann yang merupakan seorang komisaris polisi Hindia Belanda berdarah Minahasa dalam memberantas kelompok Si Pitung membuatnya ditugaskan untuk memata-matai aktivitas Minke. Tugas inilah yang membuat Jacques Pangemanann menjadi sosok yang bertanggung jawab dibalik pembuangan Minke ke pulau terpencil di Maluku Utara.[2]"
   ]
 ];
+
+const personalisation_1 = ["beginner", "bookworm", "bibliophile"];
+
+const personalisation_2 = [
+  "fiksi",
+  "politik",
+  "literatur",
+  "sejarah",
+  "finansial",
+  "Saya masih mencari genre kesukaan"
+];

lite_up/lib/screens/flashcard_screen.dart

@@ -93,7 +93,7 @@ class _FlashcardScreenState extends State<FlashcardScreen> {
                 children: [
                   Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                     for (var i = 0; i < flashcards.length; i++)
-                      if (i == index)
+                      if (i <= index)
                         Padding(
                             padding: const EdgeInsets.symmetric(horizontal: 5),
                             child: Image.asset(

lite_up/lib/screens/personalisation_screen.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:lite_up/widgets/login_button.dart';
+import 'package:lite_up/widgets/signup_button.dart';
+import '../constants/style.dart';
+import '../constants/text.dart';
+import '../models/flashcard_model.dart';
+import '../widgets/flashcard_widget.dart';
+import '../widgets/next_button.dart';
+import '../widgets/personalisation_button.dart';
+import '../widgets/start_button.dart';
+import 'flashcard_screen.dart';
+
+/* 
+PersonalisationScreen widget is stateful because it is our parent widget and therefore
+all the functions and variables will be in this widget. As a consequence, we
+will need to change the state of our widget.
+*/
+class PersonalisationScreen extends StatefulWidget {
+  const PersonalisationScreen({Key? key}) : super(key: key);
+
+  @override
+  State<PersonalisationScreen> createState() => _PersonalisationScreenState();
+}
+
+class _PersonalisationScreenState extends State<PersonalisationScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        body: SingleChildScrollView(
+      child: Container(
+          decoration: primaryBackground,
+          alignment: Alignment.center,
+          width: MediaQuery.of(context).size.width,
+          height: MediaQuery.of(context).size.height,
+          child: Column(children: [
+            Container(
+                margin: const EdgeInsets.only(top: 157),
+                child: Text('Kita ingin membuat LiteUp spesial untuk kamu!',
+                    style: GoogleFonts.poppins(textStyle: appBarTitle),
+                    textAlign: TextAlign.center)),
+            Container(
+                alignment: Alignment.centerLeft,
+                margin: const EdgeInsets.only(top: 30, left: 30),
+                child: Text(
+                  'Tipe pembaca apakah kamu?',
+                  style:
+                      GoogleFonts.poppins(textStyle: personalisationTextstyle),
+                )),
+            Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+              for (var text in personalisation_1)
+                Container(
+                    margin:
+                        const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
+                    child: PersonalisationButton(buttonText: text))
+            ]),
+            Container(
+                alignment: Alignment.centerLeft,
+                margin: const EdgeInsets.only(top: 10, left: 30, bottom: 5),
+                child: Text(
+                  'Genre apa yang kamu suka?',
+                  style:
+                      GoogleFonts.poppins(textStyle: personalisationTextstyle),
+                )),
+            Wrap(
+              alignment: WrapAlignment.center,
+                children: [
+                  for (var text in personalisation_2)
+                    Container(
+                        margin: const EdgeInsets.symmetric(
+                            horizontal: 5, vertical: 0),
+                        child: PersonalisationButton(buttonText: text))
+                ]),
+            Container(
+                margin: const EdgeInsets.only(top: 50),
+                child: const StartButton(buttonText: 'Masuk'))
+          ])),
+    ));
+  }
+}

lite_up/lib/widgets/login_button.dart

@@ -3,6 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
 import '../constants/style.dart';
 import '../screens/flashcard_screen.dart';
 import '../screens/homepage_screen.dart';
+import '../screens/personalisation_screen.dart';
 
 class LoginButton extends StatelessWidget {
   const LoginButton({Key? key}) : super(key: key);

lite_up/lib/widgets/personalisation_button.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../constants/style.dart';
+import '../screens/flashcard_screen.dart';
+import '../screens/homepage_screen.dart';
+import '../screens/personalisation_screen.dart';
+
+class PersonalisationButton extends StatefulWidget {
+  const PersonalisationButton({Key? key, required this.buttonText})
+      : super(key: key);
+
+  final String buttonText;
+
+  @override
+  State<PersonalisationButton> createState() => _PersonalisationButtonState();
+}
+
+class _PersonalisationButtonState extends State<PersonalisationButton> {
+  bool isPressed = false;
+  Color primary = white;
+  Color textColor = grayish;
+
+  void pressed() {
+    if (isPressed) {
+      setState(() {
+        isPressed = false;
+        primary = white;
+        textColor = grayish;
+      });
+    } else {
+      setState(() {
+        isPressed = true;
+        primary = deepYellow;
+        textColor = white;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: () {
+        pressed();
+      },
+      style: ElevatedButton.styleFrom(
+        minimumSize: Size(100, 30), side: BorderSide(width: 1, color:deepYellow),
+          padding: const EdgeInsets.symmetric(horizontal: 20),
+          elevation: 0,
+          primary: primary,
+          shape: const StadiumBorder(),
+          textStyle: TextStyle(
+              color: textColor, fontSize: 13, fontWeight: FontWeight.normal)),
+      child: Text(
+        widget.buttonText,
+        style: TextStyle(
+            color: textColor, fontSize: 13, fontWeight: FontWeight.normal),
+      ),
+    );
+  }
+}

lite_up/lib/widgets/signup_button.dart

@@ -3,6 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
 import '../constants/style.dart';
 import '../screens/flashcard_screen.dart';
 import '../screens/homepage_screen.dart';
+import '../screens/personalisation_screen.dart';
 
 class SignUpButton extends StatelessWidget {
   const SignUpButton({Key? key}) : super(key: key);
@@ -17,7 +18,7 @@ class SignUpButton extends StatelessWidget {
             shape: const StadiumBorder()),
         onPressed: () {
           Navigator.push(context,
-              MaterialPageRoute(builder: (context) => const HomeScreen()));
+              MaterialPageRoute(builder: (context) => const PersonalisationScreen()));
         },
         child: Text("Daftar",
             style: GoogleFonts.montserrat(textStyle: signUpButtonTextStyle)));

lite_up/lib/widgets/start_button.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../constants/style.dart';
+import '../screens/flashcard_screen.dart';
+import '../screens/homepage_screen.dart';
+
+class StartButton extends StatefulWidget {
+  const StartButton({Key? key, required this.buttonText}) : super(key: key);
+
+  final String buttonText;
+
+  @override
+  State<StartButton> createState() => _StartButtonState();
+}
+
+class _StartButtonState extends State<StartButton> {
+  bool isPressed = false;
+  Color primary = lightGray;
+  Color textColor = white;
+
+  void pressed() {
+    if (isPressed) {
+      Navigator.push(context,
+              MaterialPageRoute(builder: (context) => const HomeScreen()));
+    } else {
+      setState(() {
+        isPressed = true;
+        primary = deepOrange;
+        textColor = white;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+        style: ElevatedButton.styleFrom(
+            primary: primary,
+            padding: const EdgeInsets.symmetric(horizontal: 120, vertical: 15),
+            shape: const StadiumBorder()),
+        onPressed: () {
+          pressed();
+        },
+        child: Text(widget.buttonText,
+            style: GoogleFonts.montserrat(textStyle: loginButtonTextStyle)));
+  }
+}