skip to Main Content

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.

2

Answers


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

    Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    
    Login or Signup to reply.
  2. 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