Методы реализации ввода текста в контейнере с использованием Flutter

Чтобы реализовать текстовое поле ввода в контейнере с помощью 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();
  }
}