Navbar and keyboard

[fernando-s97]

Hi!

Using the following settings, the navbar isn't being hidden when the keyboard appears

return Scaffold(
      body: PersistentTabView(
        controller: _controller,
        screens: _InitialWidgetState._pages
            .map((e) => SafeArea(child: e.value1))
            .toList(),
        items: _InitialWidgetState._pages
            .map((e) => PersistentBottomNavBarItem(
                  icon: e.value2,
                  title: e.value3,
                  inactiveColor: Colors.black,
                  titleFontSize: Theme.of(context).textTheme.bodyText2.fontSize,
                ))
            .toList(),
        popAllScreensOnTapOfSelectedTab: false,
        navBarHeight: 65,
        navBarStyle: NavBarStyle.style13,
        decoration: NavBarDecoration(
          borderRadius: BorderRadius.circular(15),
          boxShadow: const [BoxShadow()],
        ),
      ),
      
    );

[BilalShahid13]

Add the following properties and try again

resizeToAvoidBottomInset: true,
hideNavigationBarWhenKeyboardShows: true,

[fernando-s97]

I've added and the problem still persists.

Doing a quick look into the source code, I've noticed that the property hideNavigationBarWhenKeyboardShows of the PersistentTabScaffold widget isn't being used anywhere. The problem might reside there...

[BilalShahid13]

Yes, the property is not being used because there is nothing to be done over there. The functionality is in persistent-tab-view.widget.dart and is working for me. I have seen other users complain about its reliability so I am looking into it. Can you try running the example project bundled with my package? There is a text field on the main page and again, I can confirm for me it is working. If it is working for you as well then try to replicate the same screen widget structure/hierarchy used in the example.

[fernando-s97]

Got it! I'll try this ASAP

[fernando-s97]

Hi. I've tested here with your embedded example.

In the custom widget page, the navbar doesn't get hidden. In the built-in style, it does get hidden.

I've copied the same style (just changing the items and screen) of the built-in style, but in my app, the navbar still appears above the keyboard

[BilalShahid13]

Can you share your code here?

[fernando-s97]

H! The only two codes I've used is this one, and your own, from the embedded example app.

Hi!

Using the following settings, the navbar isn't being hidden when the keyboard appears

return Scaffold(
      body: PersistentTabView(
        controller: _controller,
        screens: _InitialWidgetState._pages
            .map((e) => SafeArea(child: e.value1))
            .toList(),
        items: _InitialWidgetState._pages
            .map((e) => PersistentBottomNavBarItem(
                  icon: e.value2,
                  title: e.value3,
                  inactiveColor: Colors.black,
                  titleFontSize: Theme.of(context).textTheme.bodyText2.fontSize,
                ))
            .toList(),
        popAllScreensOnTapOfSelectedTab: false,
        navBarHeight: 65,
        navBarStyle: NavBarStyle.style13,
        decoration: NavBarDecoration(
          borderRadius: BorderRadius.circular(15),
          boxShadow: const [BoxShadow()],
        ),
      ),
      
    );

[Zaid101]

Same here

[Edvardas889]

And here :(

[BilalShahid13]

Try setting resizeToAvoidBottomInset as true.

[BilalShahid13]

I have identified the problem and a fix will be coming soon. But for now there is a temporary fix. Set the navigation bar height as:

navBarHeight: MediaQuery.of(context).viewInsets.bottom > 0 ? 0.0 : kBottomNavigationBarHeight,

[PhyoeKo]

I am also getting like that.
:'(

[Add00w]

@BilalShahid13 this issue still exists in the latest v

[Add00w]

and the above code is not working for me

[Add00w]

for now I am solving using this code:

 hideNavigationBar:
            MediaQuery.of(context).viewInsets.bottom > 0 ? true : false,

[Add00w]

I need to use custom style because I need the title to have style like fontfamily, fontsize and so on but custom style has a lot of issues can you make the title of persistentItem widget instead of String?

[azazadev]

get some other issue in my app using hideNavigationBar:
MediaQuery.of(context).viewInsets.bottom > 0 ? true : false,

so another temporary fix work for me is to set resizeToAvoidBottomInset as false on Scaffold

  builder: (context, model, child) => Scaffold(
    resizeToAvoidBottomInset: false,

[BilalShahid13]

The issue should be fixed in the latest version 3.1.0.

[fernando-s97]

Fixed in 3.0.0

[omarnasser199789]

  hideNavigationBar: MediaQuery.of(context).viewInsets.bottom > 0 ? true : false,

[mtardal]

@fernando-s97 This issue persists in the latest version (3.1.0).

[PcolBP]

Problem still persists in ver. 4.0.2. Solved with:

navBarHeight: MediaQuery.of(context).viewInsets.bottom > 0
            ? 0
            : kBottomNavigationBarHeight,

and resizeToAvoidBottomInset set to false as default

If resizeToAvoidBottomInset is set to true a black space is created under keyboard before its animated which is in my opinion ugly, animations of keyboard on other applications like system apps doesn't work like that, smooth and without black space under. Setting above solutions removes black space, but it works fine on release. While checking result on debug you can see a scaffoldBackgroundColor container going behind keyboard which is just a slowed down animation of keyboard in debug mode.

Works on Android 11 with animated keyboard and lower versions of Android as well.
On IOS creating a space with scaffoldBackgroundColor before keyboard will appear, its millisecond but still.

[jigarfumakiya]

Yes the problem it still there in persistent_bottom_nav_bar: ^4.0.2
Showing black space when keyboard closes
Can we please re open this issue?

[Miya49-p0]

Hi!

Showing black space when keyboard closes

I think the problem is that the height of the navigation bar is 0 until the keyboard closes (MediaQuery.of (widget.context) .viewInsets.bottom == 0).

// persistent-tab-view.widget.dart

_navBarHeight = (widget.resizeToAvoidBottomInset &&
            MediaQuery.of(widget.context).viewInsets.bottom > 0 &&
            widget.hideNavigationBarWhenKeyboardShows)
        ? 0.0
        : widget.navBarHeight ?? kBottomNavigationBarHeight;

So I decided to manage it myself.

// main.dart

@override
Widget build(BuildContext context) {
  return PersistentTabView(
    context,
    controller: _controller,
    screens: buildScreens(),
    items: navBarsItems(),
    confineInSafeArea: true,
    backgroundColor: Theme.of(context)
        .bottomNavigationBarTheme
        .backgroundColor!, // Default is Colors.white.
    handleAndroidBackButtonPress: true, // Default is true.
    resizeToAvoidBottomInset: false,
    stateManagement: true, // Default is true.
    hideNavigationBarWhenKeyboardShows: false,
    navBarHeight: MediaQuery.of(context).viewInsets.bottom > 56
        ? 0.0
        : kBottomNavigationBarHeight, // is true.
    popAllScreensOnTapOfSelectedTab: true,
    popActionScreens: PopActionScreensType.all,
    itemAnimationProperties: const ItemAnimationProperties(
      duration: Duration(milliseconds: 200),
      curve: Curves.ease,
    ),
    screenTransitionAnimation: const ScreenTransitionAnimation(
      animateTabTransition: false,
      curve: Curves.ease,
      duration: Duration(milliseconds: 200),
    ),
    navBarStyle: NavBarStyle.simple, // Choose the
  );
}

• hideNavigationBarWhenKeyboardShows is false
• resizeToAvoidBottomInset is false
• Comparison target 56 is navigation bar default heigh

[Irfadg]

anyone know the solution??