CastoldiG
CastoldiG

Reputation: 312

flutter - align an element of a Row () at the bottom when the TextField is multiline?

how can I make the RawMaterialButton stay down when the TextField multiline is enabled? I am attaching some images to better understand what I need

That's my code:

Row(
    children: [
      Flexible(
        child: TextField(
          keyboardType: TextInputType.multiline,
          minLines: 1,
          maxLines: 6,
          style: TextStyle(fontSize: 19.0),
          controller: _controller,
          decoration: InputDecoration(
            hintText: 'Type a message...',
            contentPadding:
                EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Color(0xFF25BBC2), width: 1.0),
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Color(0xFF25BBC2), width: 2.0),
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
          ),
        ),
      ),
      SizedBox(
        width: 4.0,
      ),
      Container(
        child: RawMaterialButton(
          onPressed: () {},
          child: Padding(
            padding: const EdgeInsets.only(left: 3.0),
            child: Icon(
              Icons.send,
              size: 27,
              color: Colors.white,
            ),
          ),
          elevation: 0,
          shape: CircleBorder(),
          constraints: BoxConstraints.tightFor(
            width: 48.0,
            height: 48.0,
          ),
        ),
        decoration: BoxDecoration(
          color: Color(0xFF25BBC2),
          borderRadius: BorderRadius.circular(40.0),
        ),
      ),
    ],
  ),

That's the output:

enter image description here

and this is the output I would like to have: enter image description here

Thank you :)

Upvotes: 1

Views: 713

Answers (1)

CastoldiG
CastoldiG

Reputation: 312

I have resolve it by adding:

crossAxisAlignment: CrossAxisAlignment.end,

Upvotes: 1

Related Questions