我怎样才能在 flutter 中制作 FAB？

Question

我正在使用 flutter 制作一个聊天应用程序。我创建了一个消息框，当字段中的文本变长时，FAB 从它的位置移动。 ()

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.

Answer 1

尝试在您的行内将 crossAxisAligment 设置为 CrossAxisAligment.end。

Row(
crossAxisAlignment: CrossAxisAlignment.end,

Answer 2

请试试这个代码。

 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,
                  ),
                )