Чтобы реализовать текстовое поле ввода в контейнере с помощью Flutter, вы можете использовать различные методы. Вот несколько подходов:
Метод 1: использование виджета TextField внутри контейнера
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8.0),
),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter text',
contentPadding: EdgeInsets.all(8.0),
),
),
)
Метод 2: использование виджета TextFormField внутри контейнера
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8.0),
),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter text',
contentPadding: EdgeInsets.all(8.0),
),
),
)
Метод 3. Использование виджета CupertinoTextField внутри контейнера (для дизайна в стиле iOS)
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8.0),
),
child: CupertinoTextField(
decoration: BoxDecoration(
border: Border.all(color: Colors.transparent),
),
placeholder: 'Enter text',
padding: EdgeInsets.all(8.0),
),
)
Метод 4. Использование пользовательского виджета ввода текста внутри контейнера.
Вы можете создать собственный виджет, который расширяет StatefulWidget и обрабатывает вводимый текст. Это позволяет вам лучше контролировать поведение и внешний вид поля ввода.
class CustomTextInput extends StatefulWidget {
@override
_CustomTextInputState createState() => _CustomTextInputState();
}
class _CustomTextInputState extends State<CustomTextInput> {
TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8.0),
),
child: TextField(
controller: _controller,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter text',
contentPadding: EdgeInsets.all(8.0),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}