Flutter Custom Painter and Keyboard Issue

Question

I created a Painter class that should draw an arc on the screen but it gets raised as the keyboard focuses on a TextField. Removed the SingleChildScrollView solves this problem but it displays the overflow by n pixels problem. Also tried resizeToAvoidBottomInset but it won't let me scroll to see all the fields.

Here's a quick preview: Custom Painter floats with the keyboard

Page Class

return Scaffold(
      body: SafeArea(
        child: CustomPaint(
          painter: SmallSunRiseCurvePainter(),
          child: _isLoading
              ? Center(
                  child: MCircularProgressIndicator(),
                )
              : SingleChildScrollView(
                  child: Container(
                    width: size.width,
                    height: size.height,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(height: 100),
                        _buildCreateNewAccountText(),
                        Padding(
                          padding: EdgeInsets.all(40),
                          child: Form(
                            key: registerFormKey,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                _buildNameField(),
                                SizedBox(height: 40),
                                _buildEmailField(),
                                SizedBox(height: 40),
                                _buildSpecialKeyField(),
                                SizedBox(height: 40),
                                _buildPasswordField(),
                                SizedBox(height: 40),
                                _buildReEnterPasswordField(),
                                SizedBox(height: 60),
                                _buildRegisterButton(auth, context),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
        ),
      ),
    );
  }

The painter class

class SmallSunRiseCurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Color(AppConstants.yellowHex);
    paint.style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(0, size.height * 0.95)
      ..quadraticBezierTo(
          size.width * 0.5, size.height * 0.9, size.width, size.height * 0.95)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Answer 1

I guess you have fixed this already, but just in case anyone else finds this post, here is the solution.

return Scaffold(
      **resizeToAvoidBottomInset: false,**
      body: SafeArea(
  

That property will avoid the movement.