Чтобы создать 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(),
)