Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Intentionally hide Stack items under keyboard

Tags:

flutter

I have some widgets inside of a Stack.

When the keyboard appears, the widgets in the Stack that were explicitly Positioned at the bottom using Positioned(bottom: 0) widget, get shifted to the top of keyboard.

How can I prevent this, and make some widgets retain their position, whether or not the keyboard is in the view?

For example, I want the "Offline Mode" label to be under the keyboard, not over it.

enter image description here

Here is a rough sketch of what this page's widgets look like:

Scaffold(
   body: Stack(
       children: [
           LoginImage(),
           LoginForm(),
           ConnectedToInternet(),
       ],
   ),
)

Here is what the ConnectedToInternet widget looks like-

Positioned(
  bottom: 0,
  child: Container(
    width: MediaQuery.of(context).size.width,
    color: Colors.grey[900],
    child: Padding(
      padding: const EdgeInsets.all(4.0),
      child: Center(
        child: Text(
          "Offline mode",
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    ),
  ),
);
like image 884
Dev Aggarwal Avatar asked Feb 22 '19 13:02

Dev Aggarwal


2 Answers

The way I solve this problem by setting resizeToAvoidBottomInset: false,

Scaffold(
  appBar: AppBar()
  drawer: AppDrawer(),
  resizeToAvoidBottomInset: false,
  body: Stack(
    children:[
          // widgets 
        ]
       )
 )
like image 86
Avnish Nishad Avatar answered Oct 18 '22 16:10

Avnish Nishad


I faced similar problem while positioning a background image with Positioned(bottom: 0.0) widget in the stack. When the keyboard appeared the image shifted to the top of the keyboard. Solved the problem by doing the following.

Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          _bottomImageStack(),
          Scaffold(
            appBar: AppBar(),
            backgroundColor: Colors.transparent,
            body: _mainBody(),
          ),
        ],
      ),
    );
  }

Widget _bottomImageStack() {
    return Positioned(
      bottom: 0.0,
      child: Container(
        height: 235,
        width: MediaQuery.of(context).size.width,
        child: SvgPicture.asset(
          AssetPaths.LOGIN_SCREEN_BG_SVG,
          alignment: Alignment.bottomRight,
        ),
      ),
    );
  }

Widget _mainBody() {
    return ListView(
      children: <Widget>[..Other widgets go here..],
    );
  }
like image 28
zfnadia Avatar answered Oct 18 '22 17:10

zfnadia