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

Методы создания текстового поля с помощью OutlineInputBorder:

1. Метод 1: использование класса InputDecoration:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
);

1. Метод 2. Настройка OutlineInputBorder:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your email',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(
        color: Colors.blue,
        width: 2.0,
      ),
    ),
  ),
);

1. Метод 3. Создание пользовательского виджета текстового поля:

class CustomTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        labelText: 'Enter your password',
        border: OutlineInputBorder(),
      ),
    );
  }
}
// Usage:
CustomTextField(),

1. Метод 4. Использование темы:

Theme(
  data: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(),
    ),
  ),
  child: TextField(
    decoration: InputDecoration(
      labelText: 'Enter your address',
    ),
  ),
);

1. Метод 5. Создание пользовательского виджета текстового поля с темой:

class CustomTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(),
        ),
      ),
      child: TextField(
        decoration: InputDecoration(
          labelText: 'Enter your phone number',
        ),
      ),
    );
  }
}
// Usage:
CustomTextField(),

В этой статье мы рассмотрели несколько методов создания Flutter TextFields с помощью OutlineInputBorder. Мы рассмотрели использование класса InputDecoration, настройку OutlineInputBorder, создание пользовательского виджета TextField и использование тем для единообразного стиля. Каждый метод обеспечивает гибкость в достижении желаемого внешнего вида текстовых полей. Поэкспериментируйте с этими подходами и выберите тот, который лучше всего соответствует требованиям вашего проекта.