Оформление поля InputDecoration в Flutter

Голый TextField выглядит скудно. Внешний вид и подписи задают параметром decoration - объектом InputDecoration. Он описывает, что видит пользователь вокруг строки ввода, не меняя сам механизм набора текста.

Короткая метка над полем или внутри него, когда оно в фокусе, - это labelText. Бледная подсказка, пока строка пустая, - это hintText. Иконку слева ставит prefixIcon; удобно для поиска, почты или телефона:

import 'package:flutter/material.dart';

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

class HomePage extends StatelessWidget {
	const HomePage({super.key});

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: Padding(
				padding: const EdgeInsets.all(16),
				child: TextField(
					decoration: const InputDecoration(
						labelText: 'Email',
						hintText: 'name@example.com',
						prefixIcon: Icon(Icons.mail_outline),
						border: OutlineInputBorder(),
					),
				),
			),
		);
	}
}

Сделайте TextField с рамкой, labelText 'Search', hintText 'Enter a query' и prefixIcon с Icons.search.