Класс InputDecoration

Класс InputDecoration передают в decoration у TextField. Рамку задают через InputBorder.

Синтаксис

InputDecoration(
	labelText: 'abcde',
	hintText: '12345',
	border: OutlineInputBorder(),
)

Методы

Метод	Описание
`collapsed`	Задаёт компактный контур поля. Давайте разберём вызов на примерах.
`copyWith`	Принимает новые labelText, hintText, border и другие поля. Давайте разберём вызов на примерах.

Пример

Давайте выведем поле с подписью:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: TextField(decoration: const InputDecoration(labelText: 'abcde', border: OutlineInputBorder())),
				),
			),
		),
	);
}

На экране поле с подписью 'abcde' и рамкой.

Пример

Давайте добавим hintText:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: TextField(decoration: const InputDecoration(hintText: '12345', border: UnderlineInputBorder())),
				),
			),
		),
	);
}

На экране подсказка '12345' и линия снизу.

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

виджет TextField,
который принимает текст с клавиатуры
класс OutlineInputBorder,
который рисует рамку вокруг поля
класс UnderlineInputBorder,
который рисует линию под полем
метод copyWith,
который копирует оформление с изменениями