textfield focus triggers rebuilding of UI

Question

when I set Textfield autofocus:false it doesn't refresh the page but when I tap on the TextField, the keyboard shows then the main page rebuilds which causes lag.

This has been a problem for almost a week now. I can find problems related to textfields rebuilding UI but the solution cannot be applied to mine.

MAIN PAGE CONTAINS THIS FUNCTION WHEN A BUTTON IS CLICKED

void addCommentModal() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: AddCommentModal(
            onPost: (String text) {
              // APIServices.commentPost(context, i.toString(), text);
              Navigator.pop(context);
            },
          ),
        );
      },
    );
  }

AddCommentModal

class AddCommentModal extends StatefulWidget {
  final ValueChanged<String> onPost;

  AddCommentModal({@required this.onPost});

  @override
  _AddCommentModalState createState() => _AddCommentModalState();
}

class _AddCommentModalState extends State<AddCommentModal> {

  final commentController = TextEditingController();
  bool _canPost = false;
  String defaultProfilePhoto = "";
  @override
  void initState() {
    defaultProfilePhoto = Constants.userFirstName[0].toUpperCase();
    super.initState();
  }

  @override
  void dispose() {
    commentController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print("PHOTO: ${Constants.userProfilePhoto}");
    return Container(
        padding: EdgeInsets.all(10),
        child: Row(
          children: <Widget>[
            Container(
              width: 50,
              height: 50,
              child: ClipRRect(
                  borderRadius: new BorderRadius.circular(50),
                  child: Constants.userProfilePhoto == null
                      ? Container(
                          color: Color(colorPrimary),
                          alignment: Alignment.center,
                          child: Text(
                            defaultProfilePhoto,
                            style: TextStyle(
                                color: Color(colorText), fontSize: 20),
                          ),
                        )
                      : Image.network(
                          APIServices.httpDomain + Constants.userProfilePhoto,
                          fit: BoxFit.cover,
                        )),
            ),
            Expanded(
                child: Container(
              margin: EdgeInsets.only(
                left: 10,
              ),
              child: TextField(
                controller: commentController,
                autofocus: true,
                decoration: new InputDecoration(
                  suffixIcon: IconButton(
                      onPressed: () => widget.onPost(commentController.text),
                      icon: Icon(
                        FontAwesomeIcons.paperPlane,
                        size: 15,
                        color: Theme.of(context).primaryColor,
                      )),
                  contentPadding: EdgeInsets.all(10),
                  hintText: "Add a comment ...",
                  fillColor: Colors.white,
                  border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(20.0),
                  ),
                ),
                keyboardType: TextInputType.text,
                style: new TextStyle(fontFamily: "Poppins", fontSize: 15),
              ),
            ))
          ],
        ));
  }
}

Answer 1

Faced the same issue, been trying for hours :

if your screen depends on MediaQuery or at least having one widget depenig on MediaQuery, the keyboard popup changes the size of your screen, which triggers mediaQuery and causing rebuilds...in this case avoid using mediaQuery, Instead get your dimensions using (sizer package) https://pub.dev/packages/sizer

Replaced everything related to mediaQuery and now works fine.

Answer 2

It was caused by an unoptimized code on Flutter's SDK: https://github.com/flutter/flutter/issues/37878.

The fix was merged very recently and is on the "master" channel.

Consider switching to that channel, using flutter channel master.