前提・実現したいこと
外国人向けの日本語辞書アプリを作成しています。
辞書内で検索した後、言葉の履歴をList Tileで表示したいと思っていますが、
Userが選択したものを履歴として残す為には何を追加すればいいのか、教えてほしいです。
該当のソースコード
現在はFirebaseに入ってる言葉を全て丸ごと表示させています。
history.dart
Dart
1import 'package:flutter/material.dart'; 2import 'package:provider/provider.dart'; 3 4import 'package:dictionary/MainTabs/Search/words_list.dart'; 5import 'package:dictionary/Models/verbs_data.dart'; 6import 'package:dictionary/Services/database.dart'; 7 8 9class SearchHistory extends StatefulWidget { 10 SearchHistory({Key key}) : super(key: key); 11 12 13 _SearchHistory createState() => new _SearchHistory(); 14} 15 16class _SearchHistory extends State<SearchHistory> { 17 DatabaseService databaseService; 18 19 final List<VerbsData> items = []; 20 21 22 void initState() { 23 super.initState(); 24 databaseService = DatabaseService(); 25 } 26 27 final VerbsData verbsData; 28 29 _SearchHistory({this.verbsData}); 30 31 32 Widget build(BuildContext context) { 33 return StreamProvider<List<VerbsData>>.value( 34 initialData: [], 35 value: DatabaseService().verbs, 36 child: Scaffold( 37 appBar: AppBar( 38 title: Center(child: Text('Search History - 検索履歴'))), 39 body: SingleChildScrollView( 40 child: Column( 41 crossAxisAlignment: CrossAxisAlignment.start, 42 children: <Widget>[Padding( 43 padding: EdgeInsets.all(5.0), 44 ), 45 WordsList(verbs: items)], 46 ), 47 ), 48 ), 49 ); 50 } 51} 52
SearchHistory : 検索履歴
VerbsData : 辞書に入れる言葉(動詞=verb)をFirebaseから取り出してる
WordsList : 下記コードを参照
関連コード
words_list.dart
Dart
1import 'package:dictionary/Models/singleton.dart'; 2import 'package:dictionary/Models/verbs_data.dart'; 3import 'package:flutter/material.dart'; 4import 'package:dictionary/MainTabs/Search/Words/main_word_page.dart'; 5 6class WordsList extends StatefulWidget { 7 final List<VerbsData> verbs; 8 9 const WordsList({Key key, this.verbs}) : super(key: key); 10 11 12 _WordsListState createState() => _WordsListState(); 13} 14 15class _WordsListState extends State<WordsList> { 16 17 Widget build(BuildContext context) { 18 final verbs = widget.verbs; 19 20 return ListView.builder( 21 shrinkWrap: true, 22 itemCount: verbs?.length ?? 0, 23 itemBuilder: (context, index) { 24 return WordsTile(verbsData: verbs[index]); 25 }, 26 ); 27 } 28} 29 30class WordsTile extends StatelessWidget { 31 final VerbsData verbsData; 32 33 WordsTile({this.verbsData}); 34 35 36 Widget build(BuildContext context) { 37 return ListTile( 38 title: RichText( 39 text: TextSpan( 40 style: DefaultTextStyle.of(context).style, 41 children: <TextSpan>[ 42 TextSpan( 43 text: ('${verbsData.main_word}'), 44 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0), 45 ), 46 TextSpan( 47 text: (' | ${verbsData.romaji} | '), 48 style: TextStyle( 49 fontWeight: FontWeight.w400, 50 fontSize: 20.0, 51 fontStyle: FontStyle.italic)), 52 TextSpan( 53 text: ('${verbsData.en_meaning}'), 54 style: TextStyle(fontWeight: FontWeight.w400, fontSize: 20.0)) 55 ]), 56 ), 57 onTap: () { 58 Verb verb = Verb.getInstance(); 59 verb.verb = verbsData; 60 61 Navigator.push( 62 context, 63 MaterialPageRoute( 64 builder: (context) => MainWordPage(), 65 ), 66 ); 67 }, 68 ); 69 } 70} 71
アプリ見た目
試したこと
Flutter公式で推奨しているSearch Finctionも試してみたのですが、検索機能も込みになっているので、履歴だけ表示させる例が見つかりません。
queryを使うのかな?とも思っているのですが、どこに入れればいいのかなど、よくわかりません。
補足情報(FW/ツールのバージョンなど)
MacOS Catalina
Android Studio, Flutter, Dart 共に8月末にアップデートしたものです。
あなたの回答
tips
プレビュー