Флаттер floatingActionButton с текстовым полем не полностью над клавиатурой. Нужно что-то вроде фейсбук мессенджера - PullRequest
Новая
       25

Флаттер floatingActionButton с текстовым полем не полностью над клавиатурой. Нужно что-то вроде фейсбук мессенджера

0 голосов
/ 14 февраля 2020

У меня есть любопытная проблема, которую я не знаю, как исправить. Я создал пользовательский FloatingActionButton с TextField и установил FloatingActionButtonLocation в FloatingActionButtonLocation.centerDocked. Но когда текстовое поле расширяется, оно уходит под клавиатуру. Кто-нибудь может мне помочь с этой проблемой, пожалуйста? 

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: GameDetailAppBar(
          widget.model.selectedGame.name,
          widget.model.selectedGame.currentUserMetadata['isOwner'],
          widget.model),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: showGamePageBottomBar
          ? GamePageBottomBar(widget.model)
          : _buildCommentBox(),
      backgroundColor: Colors.white,
      body: Container(
        child: _buildGamePage(),
      ),
    );
  }

  Widget _buildCommentBox() {
return Container(
  margin: EdgeInsets.only(bottom: 55),
  width: screenWidth(context),
  color: Colors.white,
  child: Container(
    margin: EdgeInsets.only(top: 5, bottom: 5, right: 27, left: 27),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      border: Border.all(
        color: createColor('#FFBF00'),
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.only(left: 11, right: 11),
      child: new TextFormField(
        controller: _commentController,
        // focusNode: commentFocusNode,
        maxLines: 5,
        minLines: 1,
        decoration: new InputDecoration(
          border: InputBorder.none,
          suffix: Text(
            'Post',
            style: WidgetUtils.me.getLatoMedium(
              16,
              createColor('#0DB630'),
            ),
          ),
        ),
      ),
    ),
  ),
);
}

Это поле в _buildCommentBox должно быть как-то динамически c base c в строках _commentController. Без поля часть контейнера находится под клавиатурой, даже если текстовое поле имеет 1 строку.

Вот так выглядит моя плавающая кнопка без текста: enter image description here

Нужно чтобы исправить это поведение, когда текст находится на нескольких строках (нижняя граница не отображается под клавиатурой):

enter image description here

Это то, что я хочу: enter image description here

1 Ответ

0 голосов
/ 15 февраля 2020

Вы должны взглянуть на эти два способа сделать это (я сошлюсь на вопросы, которые я нашел, которые могут помочь вам решить эту проблему):

с использованием resizeToAvoidBottomPadding: true в вашем Scaffold виджете ({ ссылка })

или

с использованием 

padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom));

на вашем Padding виджете ({ ссылка })

...