How to vertically align row items?

Question

Here's my code:

        child: new Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          new Icon(
                              Icons.call
                          ),
                          new Container(
                            height: 30.0,
                            width: 100.0,
                            child: new TextFormField(
                              decoration: new InputDecoration(
                                  labelText: 'User Name'),
                              validator: (val) =>
                              !val.contains('@')
                                  ? 'Not a valid email.'
                                  : null,
                              onSaved: (val) => _email = val,
                            ),

                          )

                        ],

                      ),
                    )

Here Icon and TextFormField isn't vertically aligned. TextFormField gives a margin top to itself and comes a bit down to the phone icon.

Answer 1

First remove the height property of the Container then set crossAxisAlignment to CrossAxisAlignment.center which aligns the elements of the row to center with respect to vertical axis.

Example:

new Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        new Icon(Icons.call),
        new Container(
          width: 100.0,
          child: new TextFormField(
            decoration: const InputDecoration(labelText: 'User Name'),
            validator: (val) =>
                !val.contains('@') ? 'Not a valid email.' : null,
            onSaved: (val) => _email = val,
          ),
        )
      ],
)