У меня есть Listview
и Textfield
, которые работают как панель поиска (я также должен упомянуть, что каждая из них находится в другом классе). Я пытаюсь мгновенно фильтровать представление списка по мере того, как пользователь вводит
Я добился прогресса в правильном направлении, но проблема в том, что я ищу что-то похожее на этот пример mList.contains(userSearch)
То, что у меня есть в настоящее время, не совсем удовлетворяет требованиям, он выполняет поиск, но только когда пользователь перестает печатать, он не обнаруживает изменений в текстовом поле в реальном времени.
Получение данных из базы данных SQFlite:
//getting full list
Future<List<Word>> getAllWords() async {
final db = await database;
var response = await db.query(TABLE_WORDS);
List<Word> list = response.map((c) => Word.fromMap(c)).toList();
return list;
}
//getting search results
Future<List<Word>> searchResults(String userSearch) async {
final db = await database;
var response = await db.query(TABLE_WORDS, where: '$COL_ENGLISH_WORD = ? OR $COL_GERMAN_WORD = ?', whereArgs: [userSearch, userSearch]);
List<Word> list = response.map((c) => Word.fromMap(c)).toList();
return list;
}
Теперь страница, на которой я отображаю список и строку поиска:
String userSearchInput = "";
TextEditingController _searchInputController = TextEditingController();
class FullList extends StatefulWidget {
@override
_FullListState createState() => _FullListState();
}
class _FullListState extends State<FullList> {
@override
void initState() {
search(String userInput){
setState(() {
userInput = _searchInputController.text;
if(userInput.isEmpty){
return;
}else{
userSearchInput = userInput;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
primary: true,
title: InkWell(
splashColor: gradientStart,
child: TextField(
autofocus: false,
enableInteractiveSelection: false,
controller: _searchInputController,
onChanged: search,
decoration: InputDecoration(hintText: "Search"),
),
),
),
body: Container(
height: MediaQuery.of(context).size.height,
child: SafeArea(
child: ListPage(),
),
),
);
}
}
//The class that has the listview
class ListPage extends StatefulWidget {
@override
_ListPageState createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
DatabaseHelper databaseHelper;
@override
void initState() {
databaseHelper = DatabaseHelper.databaseHelper;
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder<List<Word>>(
future: _searchInputController.text.isEmpty ? databaseHelper.getAllWords() : databaseHelper.searchResults(userSearchInput),
builder: (BuildContext context, AsyncSnapshot<List<Word>> snapshot){
if(snapshot.hasData){
return ListView.builder(
physics: const AlwaysScrollableScrollPhysics (),
shrinkWrap: true,
reverse: false,
controller: _scrollController,
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {/*take action*/},
child: AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 300),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: listChild(snapshot.data[index].eng, snapshot.data[index].ger),
),
),
),
);
},
);
}
return Center(
child: CircularProgressIndicator()
);
}
),
);
}
}
Вопрос: как изменить это, чтобы иметь возможность мгновенно фильтровать список по типам пользователей?