Flutter TextField с OutlineInputBorder: методы реализации и примеры кода

Чтобы создать Flutter TextField с контурной границей ввода, вы можете использовать класс OutlineInputBorder. Вот несколько методов, которые можно использовать для достижения этой цели, а также примеры кода:

Метод 1: использование конструктора OutlineInputBorder

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
    ),
  ),
)

Метод 2. Создание пользовательского InputBorder

class CustomOutlineInputBorder extends OutlineInputBorder {
  CustomOutlineInputBorder({
    BorderSide borderSide = const BorderSide(),
    BorderRadius borderRadius = const BorderRadius.all(Radius.circular(4.0)),
    GapGeometry gapPadding = const GapGeometry.zero(),
  }) : super(
          borderSide: borderSide,
          borderRadius: borderRadius,
          gapPadding: gapPadding,
        );
  @override
  CustomOutlineInputBorder copyWith({
    BorderSide? borderSide,
    BorderRadius? borderRadius,
    GapGeometry? gapPadding,
  }) {
    return CustomOutlineInputBorder(
      borderSide: borderSide ?? this.borderSide,
      borderRadius: borderRadius ?? this.borderRadius,
      gapPadding: gapPadding ?? this.gapPadding,
    );
  }
}
TextField(
  decoration: InputDecoration(
    border: CustomOutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
    ),
  ),
)

Метод 3. Использование Themeдля настройки TextField

Theme(
  data: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.blue),
      ),
    ),
  ),
  child: TextField(),
)