yokutango-mobile-reader/lib/screens/practise/kanji.dart

import 'package:flutter/material.dart';
import 'package:signature/signature.dart';

import '../../models/data_entry.dart';
import '../../components/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);

  @override
  _KanjiPageState createState() => _KanjiPageState();
}

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 (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: [
              Text(
                widget.entry.kana.join('\n'),
                style: Theme.of(context).textTheme.headline3,
              ),
              const SizedBox(width: 20),
              const Divider(thickness: 5),
              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(
            bottom: 40,
            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();
              }),
            ),
          )
        ],
      ),
    );
  }
}