Update Kanji Layout

lib/components/kanji/kanji_search_page.dart

@@ -8,14 +8,13 @@ class _Header extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      margin: EdgeInsets.symmetric(vertical: 20.0),
       decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10.0), color: Colors.blue),
       child: Padding(
         padding: const EdgeInsets.all(10.0),
         child: Text(
           _kanji,
-          style: TextStyle(fontSize: 70.0, color: Colors.white),
+          style: TextStyle(fontSize: 80.0, color: Colors.white),
         ),
       ),
     );
@@ -48,6 +47,30 @@ class _JlptLevel extends StatelessWidget {
   _JlptLevel(this._jlptLevel);
 }
 
+class _Rank extends StatelessWidget {
+  final int _rank;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(10.0),
+      child: Text(
+        '${_rank.toString()} / 2500',
+        style: TextStyle(
+          color: Colors.white,
+          fontSize: 20.0,
+        ),
+      ),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(10.0),
+        color: Colors.blue,
+      ),
+    );
+  }
+
+  _Rank(this._rank);
+}
+
 class _Grade extends StatelessWidget {
   final String _grade;
 
@@ -72,6 +95,30 @@ class _Grade extends StatelessWidget {
   _Grade(this._grade);
 }
 
+class _Radical extends StatelessWidget {
+  final Radical _radical;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(10.0),
+      child: Text(
+        _radical.symbol,
+        style: TextStyle(
+          color: Colors.white,
+          fontSize: 20.0,
+        ),
+      ),
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: Colors.blue,
+      ),
+    );
+  }
+
+  _Radical(this._radical);
+}
+
 class _StrokeOrderGif extends StatelessWidget {
   final String _uri;
 
@@ -80,8 +127,10 @@ class _StrokeOrderGif extends StatelessWidget {
     return Container(
       margin: EdgeInsets.symmetric(vertical: 20.0),
       padding: EdgeInsets.all(5.0),
-      child: ClipRRect(child: Image.network(_uri),
-      borderRadius: BorderRadius.circular(10.0),),
+      child: ClipRRect(
+        child: Image.network(_uri),
+        borderRadius: BorderRadius.circular(10.0),
+      ),
       decoration: BoxDecoration(
         color: Colors.blue,
         borderRadius: BorderRadius.circular(15.0),
@@ -99,18 +148,65 @@ class KanjiResultCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [_Header(_result.query)],
+        Container(
+          margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 30.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              Flexible(
+                flex: 1,
+                fit: FlexFit.tight,
+                child: Center(child: SizedBox()),
+              ),
+              Flexible(
+                flex: 1,
+                fit: FlexFit.tight,
+                child: Center(child: _Header(_result.query)),
+              ),
+              Flexible(
+                flex: 1,
+                fit: FlexFit.tight,
+                child: Center(
+                  child: _Radical(_result.radical),
+                ),
+              ),
+            ],
+          ),
         ),
-        Row(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          children: [_JlptLevel(_result.jlptLevel), _Grade(_result.taughtIn)],
+        IntrinsicHeight(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              _StrokeOrderGif(_result.strokeOrderGifUri),
+              Container(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Text("JLPT: ", style: TextStyle(fontSize: 20.0)),
+                        _JlptLevel(_result.jlptLevel),
+                      ],
+                    ),
+                    Row(
+                      children: [
+                        Text("Grade: ", style: TextStyle(fontSize: 20.0)),
+                        _Grade(_result.taughtIn),
+                      ],
+                    ),
+                    Row(
+                      children: [
+                        Text("Rank: ", style: TextStyle(fontSize: 20.0)),
+                        _Rank(_result.newspaperFrequencyRank),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
         ),
-        Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [_StrokeOrderGif(_result.strokeOrderGifUri)],
-        )
       ],
     );
   }

lib/screens/kanji_search.dart

@@ -4,6 +4,6 @@ import 'package:jisho_study_tool/services/jisho_search.dart';
 class KanjiView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return searchForKanji('谷');
+    return searchForKanji('拒');
   }
 }