Add themes and drawing field for kanji

lib/screens/home.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:tangocard_reader/service/tangocard_files.dart';
+import 'package:tangocard_reader/service/theme_bloc.dart';
 
 import 'pages/tango_set_list.dart';
 
@@ -14,14 +15,31 @@ class _HomeState extends State<Home> {
   int page = 0;
 
   final _pages = [
-    TangoSetList(files: tangocardFilePaths, route: '/list/tango',),
-    TangoSetList(files: kanjicardFilePaths, route: '/list/kanji',),
+    TangoSetList(
+      files: tangocardFilePaths,
+      route: '/list/tango',
+    ),
+    TangoSetList(
+      files: kanjicardFilePaths,
+      route: '/list/kanji',
+    ),
   ];
 
   @override
   Widget build(BuildContext context) => Scaffold(
         appBar: AppBar(
           title: const Text("よく単語"),
+          actions: [
+            BlocBuilder<ThemeBloc, Brightness>(
+              builder: (context, state) {
+                return Switch(
+                  value: state == Brightness.dark,
+                  onChanged: (b) => BlocProvider.of<ThemeBloc>(context)
+                      .add(SetTheme(state != Brightness.dark)),
+                );
+              },
+            )
+          ],
           centerTitle: true,
         ),
         body: _pages[page],
@@ -29,8 +47,8 @@ class _HomeState extends State<Home> {
           onTap: (int index) => setState(() => page = index),
           currentIndex: page,
           items: const [
-            BottomNavigationBarItem(label: 'Tango', icon: Icon(Icons.style)),
-            BottomNavigationBarItem(label: 'Kanji', icon: Text('漢字')),
+            BottomNavigationBarItem(label: '単語', icon: Icon(Icons.style)),
+            BottomNavigationBarItem(label: '漢字', icon: Icon(Icons.translate)),
           ],
         ),
       );

lib/screens/practise/flashcard.dart

@@ -1,7 +1,7 @@
 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';
+import 'package:tangocard_reader/components/navigation_buttons.dart';
 
 class FlashcardPage extends StatefulWidget {
   final YokutangoEntry card;

lib/screens/practise/kanji.dart

@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:signature/signature.dart';
 
 import '../../models/data_entry.dart';
-import 'navigation_buttons.dart';
+import '../../components/navigation_buttons.dart';
 
 class KanjiPage extends StatefulWidget {
   final KanjiEntry entry;
@@ -27,19 +28,33 @@ class KanjiPage extends StatefulWidget {
 
 class _KanjiPageState extends State<KanjiPage> {
   bool isPressed = false;
+  late final controller = SignatureController(
+    penColor: Theme.of(context).textTheme.bodyText1?.color ?? Colors.black,
+  );
 
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
       onTap: () {
-        if (isPressed) widget.onNextCard();
+        if (widget.showDrawingPanel) return;
+        if (isPressed) {
+          controller.clear();
+          widget.onNextCard();
+        }
         setState(() => isPressed = !isPressed);
       },
       child: Stack(
         alignment: Alignment.center,
         fit: StackFit.expand,
         children: [
+          if (widget.showDrawingPanel) ...[
+            const SizedBox(width: 20),
+            Signature(
+              controller: controller,
+              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+            )
+          ],
           Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
@@ -49,13 +64,18 @@ class _KanjiPageState extends State<KanjiPage> {
               ),
               const SizedBox(width: 20),
               const Divider(thickness: 5),
-              if (isPressed) ...[
-                const SizedBox(width: 20),
-                Text(
-                  widget.entry.kanji,
-                  style: Theme.of(context).textTheme.headline1,
-                ),
-              ],
+              const SizedBox(width: 20),
+              Text(
+                widget.entry.kanji,
+                style: isPressed
+                    ? Theme.of(context).textTheme.headline1
+                    : Theme.of(context)
+                        .textTheme
+                        .headline1
+                        ?.merge(const TextStyle(color: Colors.transparent)),
+              ),
+              const SizedBox(width: 20),
+              const Divider(thickness: 5),
             ],
           ),
           Positioned(
@@ -63,11 +83,20 @@ class _KanjiPageState extends State<KanjiPage> {
             child: NavigationButtons(
               middleText:
                   widget.index == null ? 'N' : (widget.index! + 1).toString(),
+              onMiddlePressed: () {
+                if (isPressed) {
+                  controller.clear();
+                  widget.onNextCard();
+                }
+                setState(() => isPressed = !isPressed);
+              },
               onNextCard: () => setState(() {
+                controller.clear();
                 isPressed = false;
                 widget.onNextCard();
               }),
               onPreviousCard: () => setState(() {
+                controller.clear();
                 isPressed = false;
                 widget.onPreviousCard();
               }),

lib/screens/practise/navigation_buttons.dart

@@ -1,49 +0,0 @@
-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

@@ -121,9 +121,9 @@ class _PractiseViewState extends State<PractiseView> {
                   Icon(Icons.edit),
                   Icon(Icons.animation),
                 ],
-                isSelected: _flashcardToggles,
+                isSelected: _kanjiToggles,
                 onPressed: (int index) =>
-                    setState(() => _flashcardToggles[index] = !_flashcardToggles[index])),
+                    setState(() => _kanjiToggles[index] = !_kanjiToggles[index])),
           ],
         ),
         centerTitle: true,