CODEWITHSUNDEEP
flutterdartflutter-dependencies
ArchieVon
ArchieVon

Reputation: 203

Make the Floating Action Button to a fixed location

I'm developing an application with a FAB on the navigation bar, and when the keyboard appears FAB goes up with the keyboard. I want FAB to stay in the navigation bar as a fixed location.

Normal UI

enter image description here


With Keyboard

enter image description here

I've tried using keyboard_visibility: ^0.5.6 as mentioned in the earlier question. Flutter: Floating action button fixed location

However this plugin is deprecated, so I'm not able to use it.

This is the code related to FAB button.

  @override
  Widget build(BuildContext context) => Scaffold(
    extendBody: true, 
    body: IndexedStack(
      children: pages,
      index: index,
    ),
    bottomNavigationBar: TabBarMaterialWidget(
      index: index,
      onChangedTab: onChangedTab,
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () => print('Hello'),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );

  void onChangedTab(int index) {
    setState(() {
      this.index = index;
    });
  }

What needs to be done to solve this ? (If there is any other plugin like the above please let me know how to use it to solve this issue / or any other method)

Upvotes: 0

Views: 3406

Answers (2)

Sneha G Sneha
Sneha G Sneha

Reputation: 101

you have to put the Floating Action Button inside the bottomNavigationBar then it will be located at the bottom always.

Upvotes: 1

Marcos Maliki
Marcos Maliki

Reputation: 600

From the docs:

bool? resizeToAvoidBottomInset

if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard.

return Scaffold(
  resizeToAvoidBottomInset: false,
  ...

Upvotes: 3

Related Questions