CODEWITHSUNDEEP
flutterdarttextfieldfloating-action-button
Vladimír Čimbora
Vladimír Čimbora

Reputation: 33

Flutter floatingActionButton with textfield is not fully above keyboard. Need something like facebook messanger

I have a curious problem that i have no idea how to fix. I created a custom floatingActionButton with TextField and i set the floatingActionButtonLocation to FloatingActionButtonLocation.centerDocked. But when the textfield is expanded it goes under the keyboard. Can anyone help me with this problem pleas ?

 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'),
            ),
          ),
        ),
      ),
    ),
  ),
);
}

This margin in _buildCommentBox should be somehow dynamic basec on _commentController lines. Without the margin part of the container is under keyboard even if the textfield has 1 line.

This is how my floatingActionButton looks like without text: enter image description here

Need to fix this behaviour when text is on multilines(you can't see bottom border it is under keyboard) :

enter image description here

This is what i want: enter image description here

Upvotes: 0

Views: 3571

Answers (2)

Fehencke
Fehencke

Reputation: 36

Best solution, which working with scroll view also:

Scaffold -> bottomSheet

Scaffold(
        bottomSheet: WIDGET,
)

Upvotes: 0

Charles Tremblay
Charles Tremblay

Reputation: 89

You should have a look at those two ways of doing it (I will link to questions I found that might help you solve this issue):

using resizeToAvoidBottomPadding: true in your Scaffold Widget (https://stackoverflow.com/a/53800595/12020274)

or

using 

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

on your Padding Widget (https://stackoverflow.com/a/53605734/12020274)

Upvotes: 3

Related Questions