Clean up UI

assets/yokutango

@@ -1 +1 @@
-Subproject commit 4609ea5453fdc77d504999958222318495215d72
+Subproject commit 00f37fddf6656c4cca07e1afd26d6ad431e8db94

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,8 +38,11 @@ class _FlashcardPageState extends State<FlashcardPage> {
           isPressed = !isPressed;
         });
       },
-      child: Center(
+      child: Column(
-        child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Flashcard(
@@ -54,6 +59,25 @@ class _FlashcardPageState extends State<FlashcardPage> {
               ),
             ],
           ),
+          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()),
+            ],
+          )
+        ],
       ),
     );
   }

lib/screens/practise/kanji.dart

@@ -1,15 +1,22 @@
 import 'package:flutter/material.dart';
 
 import '../../models/data_entry.dart';
+import 'navigation_buttons.dart';
 
 class KanjiPage extends StatefulWidget {
   final KanjiEntry entry;
   final Function() onNextCard;
+  final Function() onPreviousCard;
+  final bool showDrawingPanel;
+  final bool showStrokeOrder;
   final int? index;
 
   const KanjiPage({
     required this.entry,
     required this.onNextCard,
+    required this.onPreviousCard,
+    this.showDrawingPanel = false,
+    this.showStrokeOrder = false,
     this.index,
     Key? key,
   }) : super(key: key);
@@ -24,19 +31,49 @@ class _KanjiPageState extends State<KanjiPage> {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
+      behavior: HitTestBehavior.opaque,
       onTap: () {
         if (isPressed) widget.onNextCard();
         setState(() => isPressed = !isPressed);
       },
-      child: Center(
+      child: Stack(
-        child: Column(
+        alignment: Alignment.center,
-          mainAxisAlignment: MainAxisAlignment.center,
+        fit: StackFit.expand,
         children: [
-            Text(widget.entry.kanji),
+          Column(
-            const SizedBox(width: 40),
+            crossAxisAlignment: CrossAxisAlignment.center,
-            Text(widget.entry.kana.toString()),
+            children: [
+              Text(
+                widget.entry.kana.join('\n'),
+                style: Theme.of(context).textTheme.headline3,
+              ),
+              const SizedBox(width: 20),
+              const Divider(thickness: 5),
+              if (isPressed) ...[
+                const SizedBox(width: 20),
+                Text(
+                  widget.entry.kanji,
+                  style: Theme.of(context).textTheme.headline1,
+                ),
+              ],
             ],
           ),
+          Positioned(
+            bottom: 40,
+            child: NavigationButtons(
+              middleText:
+                  widget.index == null ? 'N' : (widget.index! + 1).toString(),
+              onNextCard: () => setState(() {
+                isPressed = false;
+                widget.onNextCard();
+              }),
+              onPreviousCard: () => setState(() {
+                isPressed = false;
+                widget.onPreviousCard();
+              }),
+            ),
+          )
+        ],
       ),
     );
   }

lib/screens/practise/navigation_buttons.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+
+class NavigationButtons extends StatelessWidget {
+  final String middleText;
+  final void Function() onNextCard;
+  final void Function() onPreviousCard;
+
+  const NavigationButtons({
+    Key? key,
+    required this.middleText,
+    required this.onNextCard,
+    required this.onPreviousCard,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) =>
+          Container(
+            decoration: BoxDecoration(
+              color: Colors.blue,
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: ButtonBar(
+              alignment: MainAxisAlignment.center,
+              children: [
+                IconButton(
+                  padding: const EdgeInsets.all(20),
+                  color: Colors.white,
+                  onPressed: onPreviousCard,
+                  icon: const Icon(Icons.arrow_back),
+                ),
+                const SizedBox(width: 10),
+                Text(
+                  middleText,
+                  style: Theme.of(context)
+                      .textTheme
+                      .headline6!
+                      .merge(const TextStyle(color: Colors.white)),
+                ),
+                const SizedBox(width: 10),
+                IconButton(
+                  padding: const EdgeInsets.all(20),
+                  color: Colors.white,
+                  onPressed: onNextCard,
+                  icon: const Icon(Icons.arrow_forward),
+                ),
+              ],
+            ),
+          );
+}

lib/screens/practise/practise.dart

@@ -3,6 +3,7 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:tangocard_reader/models/data_entry.dart';
+import 'package:tangocard_reader/screens/practise/kanji.dart';
 
 import 'flashcard.dart';
 
@@ -26,80 +27,142 @@ const encouragingWords = [
   '頑張れ〜！',
   'できるぞ！',
   'ヨッシャー！',
-  'いけいけいけー！',
+  'いけいけー！',
 ];
 
 class _PractiseViewState extends State<PractiseView> {
-  String title = '';
   late int currentCard;
-  final List<bool> _isSelected = [false, false];
+  final List<bool> _flashcardToggles = [false, false];
+  final List<bool> _kanjiToggles = [false, false];
 
-  get isShuffleMode => _isSelected[0];
+  bool get isShuffleMode => _flashcardToggles[0];
-  get isLanguageSwitchedMode => _isSelected[1];
+  bool get isLanguageSwitchedMode => _flashcardToggles[1];
-  get randomCard => Random().nextInt(widget.entries.length);
+  bool get isKanjiDrawingMode => _kanjiToggles[0];
+  bool get isKanjiAnimationMode => _kanjiToggles[1];
 
-  @override
+  int get randomCard => Random().nextInt(widget.entries.length);
-  void initState() {
+  String get randomEncouragingWord =>
-    title = encouragingWords[Random().nextInt(encouragingWords.length)];
+      encouragingWords[Random().nextInt(encouragingWords.length)];
-    currentCard = widget.index;
+  bool get isPhone =>
-
+      MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
-    final isPhone = MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
           .size
           .shortestSide <
       600;
+
+  @override
+  void initState() {
+    currentCard = widget.index;
+
     if (isPhone) {
+      if (widget.isKanji) {
+        SystemChrome.setPreferredOrientations([
+          DeviceOrientation.portraitUp,
+          DeviceOrientation.portraitDown,
+        ]);
+      } else {
         SystemChrome.setPreferredOrientations([
           DeviceOrientation.landscapeLeft,
           DeviceOrientation.landscapeRight,
         ]);
       }
+    }
 
     super.initState();
   }
 
   @override
-  Widget build(BuildContext context) => Scaffold(
+  void dispose() {
-        appBar: AppBar(
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.landscapeRight,
+      DeviceOrientation.landscapeLeft,
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+    ]);
+    super.dispose();
+  }
+
+  AppBar get flashcardAppBar => AppBar(
         title: Row(
           children: [
             Expanded(child: Container()),
-              Text(title),
+            Text(randomEncouragingWord),
             Expanded(child: Container()),
             IconButton(
-                onPressed: () => setState(() {
+              onPressed: () => setState(() => currentCard = 0),
-                  currentCard = 0;
-                }),
               icon: const Icon(Icons.repeat),
             ),
             ToggleButtons(
+                selectedColor: Colors.white,
                 children: const [
                   Icon(Icons.shuffle),
                   Icon(Icons.translate),
                 ],
-                  isSelected: _isSelected,
+                isSelected: _flashcardToggles,
-                  onPressed: (int index) {
+                onPressed: (int index) =>
-                    setState(() {
+                    setState(() => _flashcardToggles[index] = !_flashcardToggles[index])),
-                      _isSelected[index] = !_isSelected[index];
-                    });
-                  })
           ],
         ),
         centerTitle: true,
+      );
+
+  AppBar get kanjiAppBar => AppBar(
+        title: Row(
+          children: [
+            Expanded(child: Container()),
+            Text(randomEncouragingWord),
+            Expanded(child: Container()),
+            IconButton(
+              onPressed: () => setState(() => currentCard = 0),
+              icon: const Icon(Icons.repeat),
             ),
+            ToggleButtons(
+                selectedColor: Colors.white,
+                children: const [
+                  Icon(Icons.edit),
+                  Icon(Icons.animation),
+                ],
+                isSelected: _flashcardToggles,
+                onPressed: (int index) =>
+                    setState(() => _flashcardToggles[index] = !_flashcardToggles[index])),
+          ],
+        ),
+        centerTitle: true,
+      );
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: widget.isKanji ? kanjiAppBar : flashcardAppBar,
         body: widget.isKanji
-            ? Container()
+            ? KanjiPage(
+                entry: widget.entries[currentCard] as KanjiEntry,
+                index: currentCard,
+                showDrawingPanel: isKanjiDrawingMode,
+                showStrokeOrder: isKanjiAnimationMode,
+                onNextCard: () => setState(() {
+                  currentCard = isShuffleMode ? randomCard : currentCard + 1;
+                  if (currentCard == widget.entries.length) currentCard = 0;
+                }),
+                onPreviousCard: () => setState(() {
+                  currentCard = isShuffleMode ? randomCard : currentCard - 1;
+                  if (currentCard == -1) {
+                    currentCard = widget.entries.length - 1;
+                  }
+                }),
+              )
             : FlashcardPage(
                 card: widget.entries[currentCard] as YokutangoEntry,
                 index: currentCard,
                 languageFlipped: isLanguageSwitchedMode,
-                onNextCard: () {
+                onNextCard: () => setState(() {
-                  setState(() {
                   currentCard = isShuffleMode ? randomCard : currentCard + 1;
                   if (currentCard == widget.entries.length) currentCard = 0;
-                    title = encouragingWords[
+                }),
-                        Random().nextInt(encouragingWords.length)];
+                onPreviousCard: () => setState(() {
-                  });
+                  currentCard = isShuffleMode ? randomCard : currentCard - 1;
-                },
+                  if (currentCard == -1) {
+                    currentCard = widget.entries.length - 1;
+                  }
+                }),
               ),
       );
 }