Question 76284 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I make FAB at the end in flutter?

I am making a chatting app using flutter. I have created a message box and when the text in the field gets longer the FAB moves from it’s place.

image

Padding(
            padding: const EdgeInsets.all(10.0),
            child: Expanded(
              child: Container(
                alignment: AlignmentDirectional.bottomEnd,
                padding: EdgeInsets.only(right: 6, left: 10),
                decoration: BoxDecoration(
                    color: Colors.grey.shade700,
                    borderRadius: BorderRadius.circular(16)),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _textController,
                        keyboardType: TextInputType.multiline,
                        minLines: 1,
                        maxLines: 20,
                        decoration: InputDecoration(
                          hintText: "Message...",
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    FloatingActionButton(
                      mini: true,
                      elevation: 0,
                      onPressed: () {},
                      child: const Icon(
                        Icons.send,
                        color: Colors.white,
                      ),
                    )

I want this FloatingActionButton To be at Bottom. But when the text in message box gets longer. The button moves from it’s place too.

Tags:

2

Answers


  1. 0

    Try to set the crossAxisAligment to CrossAxisAligment.end inside your Row.

    Row(
crossAxisAlignment: CrossAxisAlignment.end,
    Login or Signup to reply.
  2. 0

    Try this code please.

     Row(
    crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          child: TextField(
                    controller: _textController,
                    keyboardType: TextInputType.multiline,
                    minLines: 1,
                    maxLines: 20,
                    decoration: InputDecoration(
                      hintText: "Message...",
                      border: InputBorder.none,
                    ),
                  ),
                ),
                FloatingActionButton(
                  mini: true,
                  elevation: 0,
                  onPressed: () {},
                  child: const Icon(
                    Icons.send,
                    color: Colors.white,
                  ),
                )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search