CODEWITHSUNDEEP
flutterdart
phongyewtong
phongyewtong

Reputation: 5309

flutter textfield labeltext not showing up

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

Upvotes: 2

Views: 4092

Answers (2)

Derek K
Derek K

Reputation: 3157

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.

Upvotes: 1

M.B
M.B

Reputation: 619

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,
                                        ),
                                      ),
                                    ),

Upvotes: 1

Related Questions