A stable Flutter background during iOS keyboard transitions

The original iOS screen briefly exposed an unwanted background while the keyboard slid into place. Its layout put a stable background behind the form, then made the foreground Scaffold and container transparent:

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Stack(
        children: <Widget>[
          GestureDetector(
            child: Stack(
             children: <Widget>[
               new Image.asset(
                  'assets/drawables/bg_phone.png',
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                ),
               Scaffold(
                  backgroundColor: Colors.transparent,
                  body: Container(
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          color: Colors.transparent,
                          child: Container()
                      ),
                  )
             ], 
            ),
            onTap: () {
              FocusScope.of(context).requestFocus(new FocusNode());
            },
          ),
        ],
      ),
    );
  }

The approach separates the background surface from the scrollable input content. Scrolling to a focused field and manually scrolling the form are still separate interactions to verify.

This records an older rendering workaround, not a guarantee about every Flutter/iOS version. The original keyboard transition was not reproduced for this revision.

← Back to the garden