Виджет SearchBar

Виджет SearchBar показывает поле ввода с иконкой лупы. Подсказку - hintText, контроллер - SearchController в controller, нажатие - onTap для перехода в полноэкранный поиск.

Синтаксис

SearchBar(
	hintText: 'abcde',
	leading: Icon(Icons.search),
	onTap: () {},
)

Параметры

Параметр	Описание
`hintText`	Подсказка в пустом поле.
`controller`	`SearchController` для текста и view.
`onTap`	Открыть режим поиска.

Пример

Давайте поставим SearchBar под AppBar:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: Text('abcde')),
				body: Padding(
					padding: EdgeInsets.all(16),
					child: SearchBar(hintText: '12345'),
				),
			),
		),
	);
}

Под панелью поле с подсказкой '12345'.

Пример

Давайте свяжем SearchController:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: SearchBarDemo()));
}

class SearchBarDemo extends StatefulWidget
{
	const SearchBarDemo({super.key});

	@override
	State<SearchBarDemo> createState() => _SearchBarDemoState();
}

class _SearchBarDemoState extends State<SearchBarDemo>
{
	final SearchController controller = SearchController();

	@override
	void dispose()
	{
		controller.dispose();
		super.dispose();
	}

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: SearchBar(
					controller: controller,
					hintText: 'abcde',
				),
			),
		);
	}
}

SearchBar использует общий SearchController.

Смотрите также

виджет SearchAnchor,
якорь полноэкранного поиска
класс SearchController,
состояние поиска
функция showSearch,
классический search route
класс SearchDelegate,
логика showSearch