From 95927ace4dd9449ba6a0f5dcb42bde60e04b13c4 Mon Sep 17 00:00:00 2001
From: h7x4abk3g <h7x4abk3g@protonmail.com>
Date: Thu, 16 Jul 2020 22:49:07 +0200
Subject: [PATCH] Wrap yomi on large amount

---
 .../kanji/kanji__search_page/kunyomi.dart     | 84 +++++++++++++------
 .../kanji/kanji__search_page/onyomi.dart      | 84 +++++++++++++------
 2 files changed, 120 insertions(+), 48 deletions(-)

diff --git a/lib/components/kanji/kanji__search_page/kunyomi.dart b/lib/components/kanji/kanji__search_page/kunyomi.dart
index 09164d3..2168303 100644
--- a/lib/components/kanji/kanji__search_page/kunyomi.dart
+++ b/lib/components/kanji/kanji__search_page/kunyomi.dart
@@ -2,6 +2,13 @@ import 'package:flutter/material.dart';
 
 class Kunyomi extends StatelessWidget {
   final List<String> _kunyomi;
+  List<_KunyomiCard> _kunyomiCards;
+  bool _expandable;
+
+  Kunyomi(this._kunyomi) {
+    _kunyomiCards = _kunyomi.map((kunyomi) => _KunyomiCard(kunyomi)).toList();
+    _expandable = (_kunyomi.length > 6);
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -11,31 +18,60 @@ class Kunyomi extends StatelessWidget {
         vertical: 5.0,
       ),
       alignment: Alignment.centerLeft,
-      child: Wrap(
-        runSpacing: 10.0,
-        children: _kunyomi.map((onyomi) {
-          return Container(
-            margin: EdgeInsets.symmetric(horizontal: 10.0),
-            padding: EdgeInsets.symmetric(
-              vertical: 10.0,
-              horizontal: 10.0,
-            ),
-            child: Text(
-              onyomi,
-              style: TextStyle(
-                fontSize: 20.0,
-                color: Colors.white,
-              ),
-            ),
-            decoration: BoxDecoration(
-              color: Colors.lightBlue,
-              borderRadius: BorderRadius.circular(10.0),
-            ),
-          );
-        }).toList(),
-      ),
+      child: _KunyomiWrapper(context),
     );
   }
 
-  Kunyomi(this._kunyomi);
+  Widget _KunyomiWrapper(BuildContext context) {
+    if (_expandable) {
+      return ExpansionTile(
+        initiallyExpanded: false,
+        title: Center(child: _KunyomiCard('Kunyomi')),
+        children: [
+          SizedBox(
+            height: 20.0,
+          ),
+          Wrap(
+            runSpacing: 10.0,
+            children: _kunyomiCards,
+          ),
+          SizedBox(
+            height: 25.0,
+          ),
+        ],
+      );
+    } else {
+      return Wrap(
+        runSpacing: 10.0,
+        children: _kunyomiCards,
+      );
+    }
+  }
+}
+
+class _KunyomiCard extends StatelessWidget {
+  final String _kunyomi;
+  const _KunyomiCard(this._kunyomi);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 10.0),
+      padding: EdgeInsets.symmetric(
+        vertical: 10.0,
+        horizontal: 10.0,
+      ),
+      child: Text(
+        _kunyomi,
+        style: TextStyle(
+          fontSize: 20.0,
+          color: Colors.white,
+        ),
+      ),
+      decoration: BoxDecoration(
+        color: Colors.lightBlue,
+        borderRadius: BorderRadius.circular(10.0),
+      ),
+    );
+  }
 }
diff --git a/lib/components/kanji/kanji__search_page/onyomi.dart b/lib/components/kanji/kanji__search_page/onyomi.dart
index 3d8cc9b..3d76434 100644
--- a/lib/components/kanji/kanji__search_page/onyomi.dart
+++ b/lib/components/kanji/kanji__search_page/onyomi.dart
@@ -2,6 +2,13 @@ import 'package:flutter/material.dart';
 
 class Onyomi extends StatelessWidget {
   final List<String> _onyomi;
+  List<_OnyomiCard> _onyomiCards;
+  bool _expandable;
+
+  Onyomi(this._onyomi) {
+    _onyomiCards = _onyomi.map((onyomi) => _OnyomiCard(onyomi)).toList();
+    _expandable = (_onyomi.length > 6);
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -11,31 +18,60 @@ class Onyomi extends StatelessWidget {
         vertical: 5.0,
       ),
       alignment: Alignment.centerLeft,
-      child: Wrap(
-        runSpacing: 10.0,
-        children: _onyomi.map((onyomi) {
-          return Container(
-            margin: EdgeInsets.symmetric(horizontal: 10.0),
-            padding: EdgeInsets.symmetric(
-              vertical: 10.0,
-              horizontal: 10.0,
-            ),
-            child: Text(
-              onyomi,
-              style: TextStyle(
-                fontSize: 20.0,
-                color: Colors.white,
-              ),
-            ),
-            decoration: BoxDecoration(
-              color: Colors.orange,
-              borderRadius: BorderRadius.circular(10.0),
-            ),
-          );
-        }).toList(),
-      ),
+      child: _OnyomiWrapper(context),
     );
   }
 
-  Onyomi(this._onyomi);
+  Widget _OnyomiWrapper(BuildContext context) {
+    if (_expandable) {
+      return ExpansionTile(
+        initiallyExpanded: false,
+        title: Center(child: _OnyomiCard('Onyomi')),
+        children: [
+          SizedBox(
+            height: 20.0,
+          ),
+          Wrap(
+            runSpacing: 10.0,
+            children: _onyomiCards,
+          ),
+          SizedBox(
+            height: 25.0,
+          ),
+        ],
+      );
+    } else {
+      return Wrap(
+        runSpacing: 10.0,
+        children: _onyomiCards,
+      );
+    }
+  }
+}
+
+class _OnyomiCard extends StatelessWidget {
+  final String _onyomi;
+  const _OnyomiCard(this._onyomi);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 10.0),
+      padding: EdgeInsets.symmetric(
+        vertical: 10.0,
+        horizontal: 10.0,
+      ),
+      child: Text(
+        _onyomi,
+        style: TextStyle(
+          fontSize: 20.0,
+          color: Colors.white,
+        ),
+      ),
+      decoration: BoxDecoration(
+        color: Colors.orange,
+        borderRadius: BorderRadius.circular(10.0),
+      ),
+    );
+  }
 }