flutter textfield labeltext not showing up

user_3792482 0
Viewed 2737

I cant get the textfield labeltext to show. anyone can help? and how do I get the border to always showing and not disappear when I click on the text field.

 @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      decoration: InputDecoration(
        border: new OutlineInputBorder(
          borderSide: new BorderSide(width: 1)
        ),
        // hintText: _hintText,
        labelText: "Label Text",
        contentPadding: EdgeInsets.only(left: 15),
        // suffixText: _nameLength.toString() + "/ " + _maxLength.toString(),
        // suffixStyle: TextStyle(fontSize: 12),
        // suffixStyle: TextStyle(color: Theme.of(context).textTheme.bodyText2.color),
        // counterText: "",
      ),
      maxLines: _maxLines,
      textCapitalization: TextCapitalization.sentences,
      cursorRadius: Radius.circular(10),
      keyboardType: TextInputType.text,
      autofocus: true,
      maxLength: _showTextCount ? _maxLength : null,
      style: TextStyle(color: AppSetting.textColor1),
      validator: (val) {
        // if (val.isEmpty) {
        //   return 'Please enter text.';
        // } 
        // return null;
      },
      onChanged: (val) {
        _onChanged(val);
        setState(() {
          _inputFieldText = val;
          _nameLength = _inputFieldText.length;
        });
      },
      onTap: () => AppSetting.hapticFeeback(),
    );
  }
}

enter image description here

dart flutter
2 Answers

You should add

                                      errorBorder: OutlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.redAccent,
                                          width: 2.0,
                                        ),
                                      ),
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(
                                          color: primaryColor,
                                          width: 2.0,
                                        ),
                                      ),
                                      enabledBorder: OutlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.black54,
                                          width: 2.0,
                                        ),
                                      ),
                                    ),
user_91555860

Just make sure the default value of labelColor of the input decoration is different from background (the default label color was white in my case). In order to show border when clicked set focusedBorder property.

user_18608680
Related