Clean up UI

lib/screens/practise/flashcard.dart

@@ -1,17 +1,19 @@
-
 import 'package:tangocard_reader/components/flashcard.dart';
 import 'package:flutter/material.dart';
 import 'package:tangocard_reader/models/data_entry.dart';
+import 'package:tangocard_reader/screens/practise/navigation_buttons.dart';
 
 class FlashcardPage extends StatefulWidget {
   final YokutangoEntry card;
-  final Function() onNextCard;
+  final void Function() onNextCard;
+  final void Function() onPreviousCard;
   final bool languageFlipped;
   final int? index;
 
   const FlashcardPage({
     required this.card,
     required this.onNextCard,
+    required this.onPreviousCard,
     this.languageFlipped = false,
     this.index,
     Key? key,
@@ -36,24 +38,46 @@ class _FlashcardPageState extends State<FlashcardPage> {
           isPressed = !isPressed;
         });
       },
-      child: Center(
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Flashcard(
-              card: widget.card,
-              cardIndex: widget.index,
-              isLeftSide: true,
-              languageFlipped: widget.languageFlipped,
-            ),
-            const SizedBox(width: 40),
-            Flashcard(
-              card: isPressed ? widget.card : null,
-              cardIndex: widget.index,
-              languageFlipped: widget.languageFlipped,
-            ),
-          ],
-        ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Flashcard(
+                card: widget.card,
+                cardIndex: widget.index,
+                isLeftSide: true,
+                languageFlipped: widget.languageFlipped,
+              ),
+              const SizedBox(width: 40),
+              Flashcard(
+                card: isPressed ? widget.card : null,
+                cardIndex: widget.index,
+                languageFlipped: widget.languageFlipped,
+              ),
+            ],
+          ),
+          Row(
+            children: [
+              const Expanded(child: SizedBox()),
+              NavigationButtons(
+                middleText:
+                    widget.index == null ? 'N' : (widget.index! + 1).toString(),
+                onNextCard: () => setState(() {
+                  isPressed = false;
+                  widget.onNextCard();
+                }),
+                onPreviousCard: () => setState(() {
+                  isPressed = false;
+                  widget.onPreviousCard();
+                }),
+              ),
+              const Expanded(child: SizedBox()),
+            ],
+          )
+        ],
       ),
     );
   }