From 99256f6b3ca7e609c4a7336c6397a4c7f74df182 Mon Sep 17 00:00:00 2001
From: h7x4abk3g <h7x4abk3g@protonmail.com>
Date: Thu, 16 Jul 2020 22:11:55 +0200
Subject: [PATCH] Style kanji meaning

---
 .../kanji/kanji__search_page/meaning.dart     | 72 ++++++++++++++++---
 1 file changed, 62 insertions(+), 10 deletions(-)

diff --git a/lib/components/kanji/kanji__search_page/meaning.dart b/lib/components/kanji/kanji__search_page/meaning.dart
index 4730a42..daa9d8e 100644
--- a/lib/components/kanji/kanji__search_page/meaning.dart
+++ b/lib/components/kanji/kanji__search_page/meaning.dart
@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 
 class Meaning extends StatelessWidget {
-  String _meaning;
+  List<String> _meanings;
+  List<_MeaningCard> _meaningCards;
+  bool _expandable;
 
   @override
   Widget build(BuildContext context) {
@@ -11,18 +13,68 @@ class Meaning extends StatelessWidget {
         vertical: 5.0,
       ),
       alignment: Alignment.centerLeft,
-      child: Wrap(
+      child: _MeaningWrapper(context),
+    );
+  }
+
+  Widget _MeaningWrapper(BuildContext context) {
+    if (_expandable) {
+      return ExpansionTile(
+        initiallyExpanded: false,
+        title: Center(child: _MeaningCard('Meanings')),
+        children: [
+          SizedBox(
+            height: 20.0,
+          ),
+          Wrap(
+            runSpacing: 10.0,
+            children: _meaningCards,
+          ),
+          SizedBox(
+            height: 25.0,
+          ),
+        ],
+      );
+    } else {
+      return Wrap(
         runSpacing: 10.0,
-        children: _meaning
-            .split(',')
-            .map((meaning) => Container(
-                  margin: EdgeInsets.symmetric(horizontal: 10.0),
-                  child: Text(meaning),
-                ))
-            .toList(),
+        children: _meaningCards,
+      );
+    }
+  }
+
+  Meaning(_meaning) {
+    this._meanings = _meaning.split(', ');
+    this._meaningCards =
+        _meanings.map((meaning) => _MeaningCard(meaning)).toList();
+    this._expandable = (this._meanings.length > 6);
+  }
+}
+
+class _MeaningCard extends StatelessWidget {
+  final String _meaning;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 10.0),
+      padding: EdgeInsets.symmetric(
+        horizontal: 10.0,
+        vertical: 10.0,
+      ),
+      child: Text(
+        _meaning,
+        style: TextStyle(
+          fontSize: 20.0,
+          color: Colors.white,
+        ),
+      ),
+      decoration: BoxDecoration(
+        color: Colors.grey,
+        borderRadius: BorderRadius.circular(10.0),
       ),
     );
   }
 
-  Meaning(this._meaning);
+  _MeaningCard(this._meaning);
 }