SearchDelegate를 사용하여 Flutter에서 최근 검색 기록을 표시하는 방법은 무엇입니까?

미친 게으른 고양이

showSearch사용자로부터 검색 텍스트 (또는 쿼리)를 가져 오는 데 사용하고 싶습니다 . 또한 최근 검색을 제안으로 표시하고 입력 한 텍스트를 기반으로 검색 기록을 필터링하고 싶습니다.

그래서 이것을 어떻게 달성합니까?

미친 게으른 고양이

custom_search_delgates.dart

import 'package:flutter/material.dart';

typedef OnSearchChanged = Future<List<String>> Function(String);

class SearchWithSuggestionDelegate extends SearchDelegate<String> {
  ///[onSearchChanged] gets the [query] as an argument. Then this callback
  ///should process [query] then return an [List<String>] as suggestions.
  ///Since its returns a [Future] you get suggestions from server too.
  final OnSearchChanged onSearchChanged;

  ///This [_oldFilters] used to store the previous suggestions. While waiting
  ///for [onSearchChanged] to completed, [_oldFilters] are displayed.
  List<String> _oldFilters = const [];

  SearchWithSuggestionDelegate({String searchFieldLabel, this.onSearchChanged})
      : super(searchFieldLabel: searchFieldLabel);

  ///
  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
    );
  }

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => query = "",
      ),
    ];
  }

  ///OnSubmit in the keyboard, returns the [query]
  @override
  void showResults(BuildContext context) {
    close(context, query);
  }

  ///Since [showResults] is overridden we can don't have to build the results.
  @override
  Widget buildResults(BuildContext context) => null;

  @override
  Widget buildSuggestions(BuildContext context) {
    return FutureBuilder<List<String>>(
      future: onSearchChanged != null ? onSearchChanged(query) : null,
      builder: (context, snapshot) {
        if (snapshot.hasData) _oldFilters = snapshot.data;
        return ListView.builder(
          itemCount: _oldFilters.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Icon(Icons.restore),
              title: Text("${_oldFilters[index]}"),
              onTap: () => close(context, _oldFilters[index]),
            );
          },
        );
      },
    );
  }
}

용법:

import 'package:flutter/material.dart';
import 'package:flutter_app/custom_search_delgates.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Future<void> _showSearch() async {
    final searchText = await showSearch<String>(
      context: context,
      delegate: SearchWithSuggestionDelegate(
        onSearchChanged: _getRecentSearchesLike,
      ),
    );

    //Save the searchText to SharedPref so that next time you can use them as recent searches.
    await _saveToRecentSearches(searchText);

    //Do something with searchText. Note: This is not a result.
  }

  Future<List<String>> _getRecentSearchesLike(String query) async {
    final pref = await SharedPreferences.getInstance();
    final allSearches = pref.getStringList("recentSearches");
    return allSearches.where((search) => search.startsWith(query)).toList();
  }

  Future<void> _saveToRecentSearches(String searchText) async {
    if (searchText == null) return; //Should not be null
    final pref = await SharedPreferences.getInstance();

    //Use `Set` to avoid duplication of recentSearches
    Set<String> allSearches =
        pref.getStringList("recentSearches")?.toSet() ?? {};

    //Place it at first in the set
    allSearches = {searchText, ...allSearches};
    pref.setStringList("recentSearches", allSearches.toList());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Demo"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: _showSearch,
          ),
        ],
      ),
    );
  }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

최근 날짜가있는 Dataframe에서 데이터를 검색하는 방법은 무엇입니까?

분류에서Dev

친구 채널에 업로드 된 최근 동영상을 검색하는 방법은 무엇입니까?

분류에서Dev

Boto를 사용하여 SQS 대기열에 기록 된 메시지의 속성을 검색하는 방법은 무엇입니까?

분류에서Dev

reactjs에서 프레임 워크를 사용하여 검색 입력을 표시하는 방법은 무엇입니까?

분류에서Dev

<img> 태그의 src 속성을 사용하여 다른 드라이브에서 이미지를 검색하고 표시하는 방법은 무엇입니까?

분류에서Dev

indexOf 메서드를 사용하여 Java에서 컬렉션을 검색하는 방법은 무엇입니까?

분류에서Dev

query ()를 사용하여 googlesheets에서 검색 양식을 작성하는 방법은 무엇입니까?

분류에서Dev

XPath를 사용하여 HTML에서 제목을 검색하는 방법은 무엇입니까?

분류에서Dev

boto3를 사용하여 DynamoDB에서 모든 항목을 검색하는 방법은 무엇입니까?

분류에서Dev

Java API를 사용하여 NetSuite에서 검색을 완료하는 방법은 무엇입니까?

분류에서Dev

PHP를 사용하여 mysql 테이블에서 배열 값을 검색하는 방법은 무엇입니까?

분류에서Dev

struts2를 사용하여 jsp에서 세션 값을 검색하는 방법은 무엇입니까?

분류에서Dev

logstash를 사용하여 Elasticsearch에서 Java 스택 추적을 검색하는 방법은 무엇입니까?

분류에서Dev

JavaScript를 사용하여 HTML 테이블에서 셀을 검색하는 방법은 무엇입니까?

분류에서Dev

Python을 사용하여 elasticsearach에서 데이터를 검색하는 방법은 무엇입니까?

분류에서Dev

Notepad2에서 최근 사용 파일을 표시하는 방법은 무엇입니까?

분류에서Dev

검색 후 강조 표시된 단어를 바로 가기를 사용하여 명령 줄에 직접 복사하는 방법은 무엇입니까?

분류에서Dev

검색 문 JSP를 통해 드롭 다운 목록을 사용하여 mysql에서 값을 검색하는 방법은 무엇입니까?

분류에서Dev

kd-tree를 사용하여 최근 접 이웃 검색의 평균 시간 복잡도를 계산하는 방법은 무엇입니까?

분류에서Dev

유연한 검색 쿼리를 사용하여 최신 기록을 가져 오는 방법은 무엇입니까?

분류에서Dev

Jmeter : Regx를 사용하여 두 번째 줄에있는 값을 검색하는 방법은 무엇입니까?

분류에서Dev

Vim 편집기에서 검색된 텍스트를 강조 표시하는 방법은 무엇입니까?

분류에서Dev

SharePoint 서버에서 기록 된 사용자 이미지를 검색하는 방법은 무엇입니까?

분류에서Dev

Flutter로 사용자 데이터를 검색하고 Firebase에서 검색하는 방법은 무엇입니까?

분류에서Dev

Google Workflow를 사용하여 Cloud Run 서비스의 URL을 검색하는 방법은 무엇입니까?

분류에서Dev

부트 스트랩을 사용하는 동안 유형 검색으로 Chrome INPUT에서 X (지우기)를 표시하는 방법은 무엇입니까?

분류에서Dev

표에서 최근 검색된 키워드를 가져 오는 방법은 무엇입니까?

분류에서Dev

가장 최근 기록에 참여하는 방법은 무엇입니까?

분류에서Dev

스프레드 시트에서 QUERY를 사용하여 각 학생의 가장 최근 성적을 찾는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    최근 날짜가있는 Dataframe에서 데이터를 검색하는 방법은 무엇입니까?

  2. 2

    친구 채널에 업로드 된 최근 동영상을 검색하는 방법은 무엇입니까?

  3. 3

    Boto를 사용하여 SQS 대기열에 기록 된 메시지의 속성을 검색하는 방법은 무엇입니까?

  4. 4

    reactjs에서 프레임 워크를 사용하여 검색 입력을 표시하는 방법은 무엇입니까?

  5. 5

    <img> 태그의 src 속성을 사용하여 다른 드라이브에서 이미지를 검색하고 표시하는 방법은 무엇입니까?

  6. 6

    indexOf 메서드를 사용하여 Java에서 컬렉션을 검색하는 방법은 무엇입니까?

  7. 7

    query ()를 사용하여 googlesheets에서 검색 양식을 작성하는 방법은 무엇입니까?

  8. 8

    XPath를 사용하여 HTML에서 제목을 검색하는 방법은 무엇입니까?

  9. 9

    boto3를 사용하여 DynamoDB에서 모든 항목을 검색하는 방법은 무엇입니까?

  10. 10

    Java API를 사용하여 NetSuite에서 검색을 완료하는 방법은 무엇입니까?

  11. 11

    PHP를 사용하여 mysql 테이블에서 배열 값을 검색하는 방법은 무엇입니까?

  12. 12

    struts2를 사용하여 jsp에서 세션 값을 검색하는 방법은 무엇입니까?

  13. 13

    logstash를 사용하여 Elasticsearch에서 Java 스택 추적을 검색하는 방법은 무엇입니까?

  14. 14

    JavaScript를 사용하여 HTML 테이블에서 셀을 검색하는 방법은 무엇입니까?

  15. 15

    Python을 사용하여 elasticsearach에서 데이터를 검색하는 방법은 무엇입니까?

  16. 16

    Notepad2에서 최근 사용 파일을 표시하는 방법은 무엇입니까?

  17. 17

    검색 후 강조 표시된 단어를 바로 가기를 사용하여 명령 줄에 직접 복사하는 방법은 무엇입니까?

  18. 18

    검색 문 JSP를 통해 드롭 다운 목록을 사용하여 mysql에서 값을 검색하는 방법은 무엇입니까?

  19. 19

    kd-tree를 사용하여 최근 접 이웃 검색의 평균 시간 복잡도를 계산하는 방법은 무엇입니까?

  20. 20

    유연한 검색 쿼리를 사용하여 최신 기록을 가져 오는 방법은 무엇입니까?

  21. 21

    Jmeter : Regx를 사용하여 두 번째 줄에있는 값을 검색하는 방법은 무엇입니까?

  22. 22

    Vim 편집기에서 검색된 텍스트를 강조 표시하는 방법은 무엇입니까?

  23. 23

    SharePoint 서버에서 기록 된 사용자 이미지를 검색하는 방법은 무엇입니까?

  24. 24

    Flutter로 사용자 데이터를 검색하고 Firebase에서 검색하는 방법은 무엇입니까?

  25. 25

    Google Workflow를 사용하여 Cloud Run 서비스의 URL을 검색하는 방법은 무엇입니까?

  26. 26

    부트 스트랩을 사용하는 동안 유형 검색으로 Chrome INPUT에서 X (지우기)를 표시하는 방법은 무엇입니까?

  27. 27

    표에서 최근 검색된 키워드를 가져 오는 방법은 무엇입니까?

  28. 28

    가장 최근 기록에 참여하는 방법은 무엇입니까?

  29. 29

    스프레드 시트에서 QUERY를 사용하여 각 학생의 가장 최근 성적을 찾는 방법은 무엇입니까?

뜨겁다태그

보관