Флаттер: изменение размера фона и проблема ввода формы

Question

В настоящее время я пытаюсь создать пользовательскую форму ввода поверх контейнера с закругленными краями, которая занимает весь экран. За этим стоит эшафот.

Если я нажму на текстовое поле, размер всего контейнера будет изменен. Я попытался исправить это с помощью опции «resizeToAvoidBottomPadding», но это не очень хорошо, если текстовое поле расположено слишком далеко и закрыто клавиатурой.

Вот как это выглядит: контейнер с автоматическим изменением размера

Я нашел «обходной путь» для решения проблемы, но я почти уверен, что это не так, как нужно решать. Я пытался это сделать, положив леску в лес следующим образом:

Scaffold(
  resizeToAvoidBottomPadding: false,
  body: SafeArea(
    child: Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height,
          margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
          padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 20.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            color: Colors.green,
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: ListView(
            children: <Widget>[
              TextField(),
            ],
          ),
        ),
      ],
    ),
  ),
);

что в итоге выглядит так: мой обходной путь

Мои два вопроса к вам:

• есть ли "правильный" способ сделать это?
• если нет, то это "разумный" способ решить это?

Спасибо за вашу помощь и наилучшими пожеланиями,

Lukas

Answer 1

Это то, что исправило это для меня.

Имейте Stack со свойством fit, установленным в StackFit.expand.Убедитесь, что это первый дочерний элемент, так что все остальные будут сверху фона.

Positioned.fill(
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage('assets/backdrop.png'),
        fit: BoxFit.fitWidth,
        alignment: Alignment.topCenter,
      ),
    ),
  ),
),

Магический код здесь fit: BoxFit.fitWidth,, поэтому всякий раз, когда клавиатура показывает илинет, изображение будет уважать его ширину и заполнять его соответственно.

Я надеюсь, что это поможет кому-то еще в будущем!

Answer 2

У меня часто возникает такая проблема, когда у меня слишком много полей ввода.Это известная ошибка, над которой мы работаем (так что мы надеемся), но лучшим решением, которое я нашел, было использование контейнера с нижним отступом на основе mediaQuery.Представление по-прежнему не фокусируется на выбранном входе, но, по крайней мере, пользователь может прокрутить и увидеть его.

MediaQueryData mediaQuery = MediaQuery.of(context);

Container(
  padding: EdgeInsets.only(
  bottom: mediaQuery.viewInsets.bottom,
  ),
),