Во Flutter текстовые поля необходимы для захвата пользовательского ввода. Настройка внешнего вида текстовых полей может значительно улучшить взаимодействие с пользователем. Одна из популярных настроек — добавление радиуса границы к текстовым полям, придание им закругленных углов. В этой статье мы рассмотрим различные методы достижения этого эффекта во Flutter, дополненные примерами кода.

Метод 1: использование BoxDecoration
Один из способов добавить радиус границы к текстовому полю — обернуть его виджетом «Контейнер» и применить BoxDecoration. Вот пример:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    border: Border.all(color: Colors.grey),
  ),
  child: TextField(
    // TextField properties
  ),
)

Метод 2: использование свойства оформления TextField
Другой подход — использовать свойство decorationвиджета TextField. Вот пример:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(color: Colors.grey),
    ),
  ),
  // TextField properties
)

Метод 3: создание пользовательского виджета TextField
Для большей возможности повторного использования вы можете создать собственный виджет TextField, который инкапсулирует желаемый радиус границы. Вот пример:

class RoundedTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        border: Border.all(color: Colors.grey),
      ),
      child: TextField(
        // TextField properties
      ),
    );
  }
}

Применение: чтобы использовать собственный виджет, просто создайте его экземпляр, как любой другой виджет:

RoundedTextField(),

В этой статье мы рассмотрели три различных метода добавления радиуса границы к текстовым полям во Flutter. Предпочитаете ли вы использовать BoxDecoration, изменить свойство декорирования TextField или создать собственный виджет, теперь у вас есть инструменты для настройки текстовых полей в соответствии с дизайном вашего приложения. Поэкспериментируйте с этими методами и найдите тот, который лучше всего соответствует вашим потребностям.