Position icon at bottom when row height expands

Question

I am developing a chat app style input screen with a textField and I am having trouble getting the camera and send icons to align at the bottom of the white area when textField expands as you type large text. I've tested a lot of things with expanded, flexible, and column, but for now nothing worked. Some ideia?

How is it getting:

How I would like it to look:

My simplified code:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Column(
        children: <Widget>[
          Flexible(
            child: Container(),
          ),
          Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(20.0))),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.camera_alt),
                  color: Colors.grey,
                ),
                Flexible(
                  child: TextField(
                    decoration: InputDecoration(
                      //Add th Hint text here.
                      hintText: "Digite sua mensagem",
                      border: OutlineInputBorder(),
                    ),
                    minLines: 1,
                    maxLines: 7,
                    controller: _textController,
                    onSubmitted: _handleSubmitted,
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.send),
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

Answer 1

Wrap the Row with IntrensicHeight

Add crossAxisAlignment: CrossAxisAlignment.stretch, to the Row

Then add alignment: Alignment.bottomCenter, to each of the IconButton widgets

Complete Example with your Code:

child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.camera_alt),
          color: Colors.grey,
          alignment: Alignment.bottomCenter,
        ),
        ...
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.send),
          color: Colors.grey,
          alignment: Alignment.bottomCenter,
        ),
    ]
)

I used the Dart Dev tools in Android studio to check where all of the widgets were being drawn, finding which widgets needed to be changed.

Answer 2

in your Row widget add this line crossAxisAlignment: CrossAxisAlignment.end,