oysteikt/yokutango-mobile-reader
oysteikt/yokutango-mobile-reader
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Clean up UI

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit 2022-02-02 23:45:37 +01:00
parent 79923a8131
commit 9e7632a8d5
5 changed files with 254 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/yokutango

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

64
lib/screens/practise/flashcard.dart
View File

@ -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()),
],
)
],
),
);
}

55
lib/screens/practise/kanji.dart
View File

@ -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: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(widget.entry.kanji),
const SizedBox(width: 40),
Text(widget.entry.kana.toString()),
],
),
child: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
children: [
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),
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();
}),
),
)
],
),
);
}

49
lib/screens/practise/navigation_buttons.dart Normal file
View File

@ -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),
),
],
),
);
}

165
lib/screens/practise/practise.dart
View File

@ -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];
get isLanguageSwitchedMode => _isSelected[1];
get randomCard => Random().nextInt(widget.entries.length);
bool get isShuffleMode => _flashcardToggles[0];
bool get isLanguageSwitchedMode => _flashcardToggles[1];
bool get isKanjiDrawingMode => _kanjiToggles[0];
bool get isKanjiAnimationMode => _kanjiToggles[1];
int get randomCard => Random().nextInt(widget.entries.length);
String get randomEncouragingWord =>
encouragingWords[Random().nextInt(encouragingWords.length)];
bool get isPhone =>
MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
.size
.shortestSide <
600;
@override
void initState() {
title = encouragingWords[Random().nextInt(encouragingWords.length)];
currentCard = widget.index;
final isPhone = MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
.size
.shortestSide <
600;
if (isPhone) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
if (widget.isKanji) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
} else {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}
}
super.initState();
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Row(
children: [
Expanded(child: Container()),
Text(title),
Expanded(child: Container()),
IconButton(
onPressed: () => setState(() {
currentCard = 0;
}),
icon: const Icon(Icons.repeat),
),
ToggleButtons(
children: const [
Icon(Icons.shuffle),
Icon(Icons.translate),
],
isSelected: _isSelected,
onPressed: (int index) {
setState(() {
_isSelected[index] = !_isSelected[index];
});
})
],
),
centerTitle: true,
void dispose() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
AppBar get flashcardAppBar => 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.shuffle),
Icon(Icons.translate),
],
isSelected: _flashcardToggles,
onPressed: (int index) =>
setState(() => _flashcardToggles[index] = !_flashcardToggles[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: () {
setState(() {
currentCard = isShuffleMode ? randomCard : currentCard + 1;
if (currentCard == widget.entries.length) currentCard = 0;
title = encouragingWords[
Random().nextInt(encouragingWords.length)];
});
},
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;
}
}),
),
);
}