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 _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); }