Understanding the Jank happening AlertDialog with TextField and DropdownButton

Viewed 134

I have AlertDilaog with TextField and DropDownButton.

Problem:

As soon as, I launch the dialog and clicks on textfield, the alertdialog shifts up and label animation in textfield happens. But while happening this I see jank. And I did profiling and I am still trying to understand the why it is happening.

Here is the screenshotenter image description here

And here is the profiling file: https://filebin.net/7wulbm9j88m6jjt3

Can anyone help me in understanding what is this VsyncProcessCallback and whatever happening in selected section(brackets)?

I am just trying to find the root cause of the Jank and remove it.

Thank you in advance.

Code of TextField:

Widget _addProtocolTextField(BuildContext context) {
    return Container(
      height: 7.h,
      width: 70.w,
      child: TextField(
        controller: _protocolNameController,
        style: TextStyle(
          color: Theme.of(context).textColor,
          fontSize: 13.sp,
        ),
        textAlign: TextAlign.left,
        maxLines: 1,
        decoration: InputDecoration(
          labelText: Strings.protocol_name_lable,
          labelStyle: TextStyle(color: ColorConstants.primaryColor),
          enabledBorder: _getBorder(),
          disabledBorder: _getBorder(),
          focusedBorder: _getBorder(),
          border: _getBorder(),
        ),
      ),
    );
  }

  OutlineInputBorder _getBorder() {
    return OutlineInputBorder(
      borderSide: BorderSide(color: ColorConstants.primaryColor),
    );
  }

1 Answers

Since this much code is not enough to provide the real solution, you can refer to the following tips:

  1. Don't make Widget with Function, Prefer to make a separate stateless or stateful widget as per your requirement
  2. You can try this on release build to see if it helps: https://flutter.dev/docs/perf/rendering/shader
Related