Flutter: TextFormField and RaisedButton alignment on the same row

Question

At the bottom of the screen, coupon code text form field and the apply button has mis-alignment. How do I set them these widgets with the same height and align perfectly?

      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 150,
            //color: Colors.blue,
            child: TextFormField(
              decoration: new InputDecoration(
                hintText: 'Coupon Code',
                contentPadding: EdgeInsets.all(8),
                isDense: true,
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.grey)),
              ),
            ),
          ),
          Container(
            //color: Colors.green,
            padding: EdgeInsets.fromLTRB(15, 0, 0, 15),
            child: RaisedButton(
              onPressed: () {},
              color: Colors.grey[400],
              textColor: Colors.black,
              child: Text('Apply', style: TextStyle(fontSize: 12)),
            ),

          ),
        ],
      )

score 0 · Answer 1 · answered Apr 17 '20 at 01:36

Actually I think you will find that this is going to have a better result.

Container(
              padding: EdgeInsets.only(top: 8),
              width: 150,
              //color: Colors.blue,
              child: TextFormField(
                decoration: new InputDecoration(
                  hintText: 'Coupon Code',
                  contentPadding: EdgeInsets.all(8),
                  isDense: true,
                  border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.grey)),
                ),
              ),
            ),

Let me know how this works for you

score 0 · Answer 2 · answered May 02 '20 at 17:29

I also struggled with this until I found this post:

In Flutter, how to make Buttons and Textfields of same height?

I still don't understand why the TextField widget does not properly size to it's parent unless the Expands option is enabled, which then excludes the ability to use ObstrucedText option.

Here is a post related to managing sizes of text and widgets across many different devices:

How to make flutter app responsive according to different screen size?

Flutter: TextFormField and RaisedButton alignment on the same row

2 Answers2