Flutter transparent iOS background keyboard when it open

About keyboard issues: 

  • Can scroll manually when keyboard opened
  • Can scroll automatically by a focus on next input
  • Avoid showing a background of the keyboard in a little second when it slides up

How to solve it.

Put a static background behind Scaffold using Stack, setting transparent for Scaffold and main Container also.

Example

  @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());
            },
          ),
        ],
      ),
    );
  }

Leave a Reply

Your email address will not be published.Required fields are marked *