CODEWITHSUNDEEP
dartflutter
Rajdeep
Rajdeep

Reputation: 2462

How to make TextFormField text on validate appear below the TextFormField line

here is the current situation I'm facing as I would like the red text to appear just below the line instead of above as it looks kinda ugly like this:

enter image description here

          new Container(
            width: MediaQuery.of(context).size.width,
            margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                    color: Color.fromRGBO(58, 66, 86, 1.0),
                    width: 0.5,
                    style: BorderStyle.solid),
              ),
            ),
            padding: const EdgeInsets.only(left: 0.0, right: 10.0),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                new Expanded(
                  child: TextFormField( // LOGIN SCREEN EMAIL
                    maxLines: 1,
                    keyboardType: TextInputType.emailAddress,
                    autofocus: false,
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: LOGIN_SCREEN_EMAIL_HINT,
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                    validator: (value) => value.isEmpty ? LOGIN_SCREEN_EMAIL_WARNING : null,
                    onSaved: (value) => _email = value,
                  ),
                ),
              ],
            ),
          ),

Upvotes: 2

Views: 754

Answers (1)

Th&#224;nh Phước Ng&#244;
Th&#224;nh Phước Ng&#244;

Reputation: 36

According to your code, the line is not text field's line. It is container bottom border. Try to remove container bottom border and use TextFromField border line like this

TextFormField(
  ...
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Theme.of(context).primaryColor, width: 0.5)
    )
  ),
  ...
)

Upvotes: 2

Related Questions