Text cutting from below in TextField widget: Flutter

Viewed 2488

TextField widget works fine with less text but when i adding long text it starts to cut from bottom.

Without text.

enter image description here

With less text

enter image description here

Problem starts here with long text

enter image description here

My widget code.

Opacity(
      opacity: 0.5600000023841858,
      child: Container(
        padding: EdgeInsets.only(left: 10),
        width: 213,
        height: 36,
        decoration: BoxDecoration(
          color: boxShadowCreamColor,
          borderRadius: BorderRadius.circular(48),
          boxShadow: [BoxShadow(color: boxShadowColor, offset: Offset(0, 0), blurRadius: 8, spreadRadius: 0)],
        ),
        child: TextField(
          keyboardType: TextInputType.text,
          textAlign: TextAlign.left,
          maxLines: 1,
          textAlignVertical: TextAlignVertical.center,
          style: TextStyle(color: Colors.white,fontSize: fontMedium,fontWeight: fontWeightRegular),
          decoration: InputDecoration(
            hintText: "Search",
            border: InputBorder.none,
            hintStyle: TextStyle(color: Colors.white,fontSize: fontMedium,fontWeight: fontWeightRegular),
            suffixIcon: Icon(
              Icons.search,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
2 Answers

Use isDense property inside decoration and set it to true, which should resolve your issue.

isDense property helps to take less vertical space.

decoration: InputDecoration(
            isDense: true,
            hintText: "Search",
            border: InputBorder.none,
            hintStyle: TextStyle(color: Colors.white),
            suffixIcon: Icon(
              Icons.search,
              color: Colors.white,
            ),
          ),

It happens just because of your height which you have given your Container. Just increase that it will be fine for you.

try height: 42, // -- its because textfield shrink the size of Textfield when its growing.

OR

Add isDense: true // inside InputDecoration

Related