Поместите текстовое поле в панель приложения в Flutter

Question

Я хочу реализовать панель приложений, как показано ниже, где есть текстовое поле и несколько значков:

Значки можно легко добавлять в действие,но как добавить текстовое поле и добавить к нему действие поиска.Доступно много плагинов для панели поиска, но все они занимают всю панель приложения и не имеют никаких упоминаний о подсказках.Может кто-нибудь дать какую-то идею, это будет мне очень полезно.

Answer 1

В заголовке, внутри AppBar, вы можете передать виджет, что означает, что вы можете добавить любой компонент, какой захотите, например TextField. см. пример ниже:

appBar: AppBar(
        title: TextField(
          decoration: InputDecoration(
            hintText: 'Search',
            prefixIcon: Icon(Icons.search)
          ),
        ),
      ),

Я предлагаю вам обернуть это TextField в GestureDetector, отключить TextField с помощью свойства с именем enable (установлено в false), а в методе onTap внутри GestureDetector вы можете вызвать showSearch() способ.

Чтобы вызвать это showSearch(), вам нужно передать context и searchDelegate, который является компонентом, расширяющим класс, проверьте этот пример:

class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
    return null;
  }
}

Источник: Реализация поиска во флаттере

Теперь вы можете сделать это:

GestureDetector:
  onTap: () => showSearch(context: context, delegate: CustomSearchScreen()),
  child: ....