diff --git a/lib/components/kanji/kanji_search_page.dart b/lib/components/kanji/kanji_search_page.dart index 76bc122..7348db4 100644 --- a/lib/components/kanji/kanji_search_page.dart +++ b/lib/components/kanji/kanji_search_page.dart @@ -72,6 +72,26 @@ class _Grade extends StatelessWidget { _Grade(this._grade); } +class _StrokeOrderGif extends StatelessWidget { + final String _uri; + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.symmetric(vertical: 20.0), + padding: EdgeInsets.all(5.0), + child: ClipRRect(child: Image.network(_uri), + borderRadius: BorderRadius.circular(10.0),), + decoration: BoxDecoration( + color: Colors.blue, + borderRadius: BorderRadius.circular(15.0), + ), + ); + } + + _StrokeOrderGif(this._uri); +} + class KanjiResultCard extends StatelessWidget { final KanjiResult _result; @@ -89,17 +109,7 @@ class KanjiResultCard extends StatelessWidget { ), Row( mainAxisAlignment: MainAxisAlignment.center, - children: [ - Container( - margin: EdgeInsets.symmetric(vertical: 20.0), - padding: EdgeInsets.all(10.0), - child: Image.network(_result.strokeOrderGifUri), - decoration: BoxDecoration( - color: Colors.blue, - borderRadius: BorderRadius.circular(10.0), - ), - ) - ], + children: [_StrokeOrderGif(_result.strokeOrderGifUri)], ) ], ); diff --git a/lib/components/search_bar.dart b/lib/components/search_bar.dart index 11fcf6b..fefdc3e 100644 --- a/lib/components/search_bar.dart +++ b/lib/components/search_bar.dart @@ -2,19 +2,55 @@ import 'dart:io'; import 'package:flutter/material.dart'; +class _LanguageOption extends StatelessWidget { + final String _language; + + @override + Widget build(BuildContext context) { + return Expanded( + child: Container( + padding: EdgeInsets.symmetric(vertical: 10.0), + child: Center(child: Text(_language)), + decoration: BoxDecoration( + border: Border.all( + color: Colors.black, + width: 1.0, + ), + ), + ), + ); + } + + _LanguageOption(this._language); +} + class SearchBar extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - padding: EdgeInsets.symmetric(horizontal: 20.0), - child: TextField( - controller: TextEditingController(), - decoration: InputDecoration( - labelText: 'Search', - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.0), + padding: EdgeInsets.symmetric(horizontal: 20.0), + child: Column( + children: [ + TextField( + controller: TextEditingController(), + decoration: InputDecoration( + labelText: 'Search', + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(10.0), + ), ), ), - )); + SizedBox( + height: 10.0, + ), + Row( + children: [ + _LanguageOption('English'), + _LanguageOption('Japanese'), + ], + ), + ], + ), + ); } }