How to use with SafeArea widget?

[gldkru]

Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: appBar(),
    body: SafeArea(
      child: Obx(
        () => FooterLayout(
          footer: ...,
          child: ...
        ),
      ),
    ),
  );
}

https://share.getcloudapp.com/L1uB1wwD

How fix it?

[drogel]

Hi @gldkru,

Thanks for using the package and for raising this issue.

In version 2.0.1, there were some cases that involved SafeArea widgets that were kind of problematic when using KeyboardAttachable. I have just released a new version of keyboard_attachable (v2.1.0) that addresses these issues.

I have also updated the documentation and examples on how to properly use SafeArea with KeyboardAttachable. You need to set SafeArea.maintainBottomViewPadding to true and Scaffold.resizeToAvoidBottomInsets to false in your layouts, and the KeyboardAttachable should be able to do the rest, like so:

/// Builds a [Scaffold] that lays out a footer at the bottom of the page.
class KeyboardAttachablePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.blue,
        resizeToAvoidBottomInset: false,
        appBar: AppBar(title: const Text("Keyboard Attachable demo")),
        body: SafeArea(
          maintainBottomViewPadding: true,
          child: FooterLayout(
            footer: KeyboardAttachableFooter(),
            child: ColorsList(),
          ),
        ),
      );
}

So, updating the dependencies to keyboard_attachable to version 2.1.0 in your project and setting maintainBottomViewPadding to true should work for your case. If you still see these kind of problems happening, don't hesitate to comment 😄 .

Thanks!