bilalshahid13/persistentbottomnavbar

A highly customizable persistent bottom navigation bar for Flutter

persistentbottomnavbar's Issues

can we "pop" to a specific screen in a tab's navigation stack ?

Lets say that we have 4 x screens in a navigation stack on tab 1.

Then we navigate the the 4th (last) screen in that navigation stack.

Is there a way that we can "pop" back to (say) the 2nd screen ?

If not, can this feature be added ?

How to pushAndRemoveUntil screens after tapping some tab item?

I have a List of Tabs and in the HomeScreen() I have other screens inside that I need to navigate to, for example, when I am at HomeScreen and navigate to the second screen, and later the third screen (screen after HomeScreen, HomeScreen1 - > Screen2 ->Screen3), if I tap the Home Icon from the BottomNavigationBar, I don't go back to HomeScreen.

Could you help me how can solve it?

hide nav bar on device rotation

is it possible to hide the nav bar on device rotation ? we need to hide it when landscape, and show it when portrait. thanks!

Custom Widget

Hello, I was wondering if you could add an option for custom widgets.
Thanks for this amazing plugin!

How can i use this package with PageRouteBuilder ?

I would like use this animation : https://flutter.dev/docs/cookbook/animation/page-route-animation#interactive-example

How to hide the navigation bar and use the pageroutebuilder ?
Thx for reply

jumpToTab isn't working properly.

Hello!
First of all, Thanks for providing this great plugin.

I'm struggling to fix this issue that jumpToTab didn't work as i expected.

I just want when a user tab a search bar which is readonly it moves to next tab by jumpToTab.
I already checked out that I'd passed PersistentTabController properly.

Here is my sample code.

main.dart

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: BottomNavigationBarScreen()
    );
  }
}

bottom_navigation_bar_screen

class BottomNavigationBarScreen extends StatelessWidget {
  final PersistentTabController _controller = PersistentTabController(initialIndex: 0);

  @override
  Widget build(BuildContext context) {
    return Consumer<BottomNavigationBarModel>(
      builder: (BuildContext context, BottomNavigationBarModel bottomNavigationBarModel, Widget child) {
        return PersistentTabView(
          controller: _controller,
          screens: bottomNavigationBarModel.getBarItems(_controller),   // <=== I passed PersistentTabController here
          items: bottomNavigationBarModel.bottomNavigationBarItems,
          confineInSafeArea: true,
          backgroundColor: Colors.white,
          handleAndroidBackButtonPress: true,
          resizeToAvoidBottomInset: true,
          stateManagement: true,
          hideNavigationBarWhenKeyboardShows: true,
          decoration: NavBarDecoration(
            borderRadius: BorderRadius.circular(0.0),
            colorBehindNavBar: Colors.white,
          ),
          popAllScreensOnTapOfSelectedTab: true,
          itemAnimationProperties: ItemAnimationProperties(
            duration: Duration(milliseconds: 200),
            curve: Curves.ease,
          ),
          screenTransitionAnimation: ScreenTransitionAnimation(
            animateTabTransition: false,
          ),
          navBarStyle: NavBarStyle.style13,
        );
      },
    );
  }
}

bottom_navigation_bar_model

class BottomNavigationBarModel {

  List<PersistentBottomNavBarItem> _bottomNavigationBarItem = [
    PersistentBottomNavBarItem(
      icon: Icon(Icons.home),
      title: 'first'
      activeColor: Color.fromRGBO(35, 48, 56, 1),
      inactiveColor: Color.fromRGBO(112, 112, 112, 1),
    ),
    PersistentBottomNavBarItem(
      icon: Icon(Icons.search),
      title: 'second'
      activeColor: Color.fromRGBO(35, 48, 56, 1),
      inactiveColor: Color.fromRGBO(112, 112, 112, 1),
    ),
    PersistentBottomNavBarItem(
      icon: Icon(Icons.person_pin),
      title: 'third'
      activeColor: Color.fromRGBO(35, 48, 56, 1),
      inactiveColor: Color.fromRGBO(112, 112, 112, 1),
    ),
  ];

  List<Widget> getBarItems(PersistentTabController controller) {
    return [
      FirstScreen(persistentTabController: controller,),   // <=== I passed PersistentTabController here
      SecondScreen(), 
      ThirdScreen(),
    ];
  }

  List<PersistentBottomNavBarItem> get bottomNavigationBarItems => _bottomNavigationBarItem;

first_screen.dart

class CityListScreen extends StatefulWidget {
  final PersistentTabController persistentTabController;

  CityListScreen({ this.persistentTabController });    // <=== not null, it is PersistentTabController instance

  @override
  _CityListScreenState createState() => _CityListScreenState();
}

class _CityListScreenState extends State<CityListScreen> {
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    print(widget.persistentTabController);    // <=== not null, it is PersistentTabController instance
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: LogoExample(),
      body: CustomScrollView(
          physics: ClampingScrollPhysics(),
          controller: scrollController,
          slivers: <Widget>[
            SliverToBoxAdapter(child: InputWidgetExample(persistentTabController: widget.persistentTabController,),),   // <=== I passed PersistentTabController here
          ],
      ),
    );
  }
}

input_widget_example.dart

class InputWidgetExample extends StatelessWidget {
  final PersistentTabController persistentTabController;  // <=== I passed PersistentTabController here

  InputWidgetExample({ this.persistentTabController });

  @override
  Widget build(BuildContext context) {
    print(widget.persistentTabController);    // <=== not null, it is PersistentTabController instance
    return TextField(
      readOnly: true,
      controller: controller,
      onTap: () {
        persistentTabController.jumpToTab(1);  // <=== this is what i want to do to move to the next tab... 
      },
    );
  }
}

Could you find what problem is?
Thank you!

NavBar for only specific pages.

pushNewScreen() method has withNavBar property. I was wondering, can I use it on specific pages only. Like I have 3 pages on a screen.
For page one, I want the NavBar and click on that first page, I go to second page then, there's no NavBar and when I click something on that second page and go to third page I want to see the NavBar. Is it possible?
Please any help or suggestions is appreciated.

How to return to the initial screen using the item in the navigation bar ?

Hi,
Thx for this package, it's awesome !
I have a problem, i would like return to the initial screen when i press to the item in the navigation bar. How i do that ?
Thx for reply.

Exception when using custom navBar on items is null even when passing itemCount

Im' currently facing the issue that the following line is throwing an exception that items is null:

assert(assertMidButtonStyles(navBarStyle, items.length),

Even when I pass the following parameter:

itemCount: items.length, // This is required in case of custom style! Pass the number of items for the nav bar.

It seems there is a simple condition missing

How to change the bottom bar from any page

I have 4 bottom bar item and 4 controller. One of them is product list page and when I press one of the list it goes to the product page. I am showing the bottom bar in that page. The product page that has add bag button and when I press the button I want show the number of items added in the bag tab icon. currently when I press other tab it shows me update of the number in icon. How can I can update the number and show the changes in the same page. I am new on flutter please help me. I am using Globals to store the count

v1.5+ issue - tabbing on first tab bar item pops the whole stack

for versions 1.5+ there is an issue with tapping on tab bar items.

issue is:

1. on first tab, tap into a stack -> one or two deep
2. tap on second tab
3. tap ONCE on first tab - it automatically pops/resets the entire stack on the first tab!

ideally this behavior should be defined via a property on the PersistentTabView. something like resetStackOnNavBarItemTap (true/false). that way we can decide how we want the app to behave if user does this.

at the moment (v1.5) what its doing on iOS is noted above.

Black screen keyboard open

• I see a black screen when keyboard open.

Custom font, padding icon with title, remove animation

• How to remove animation change tab, change font title, change padding top title with icon tab?

Label text seems misaligned

Is it supposed to be that way? The label text on styles 1 and 7 seems to be misaligned.

Push and remove until

My app has a necessity that is: there is a login screen. Once the user is logged in, he is taken to the main screen, which makes use of the persistent bottom bar. Once he access a tab, he cans exit his account, which will take him back to the login screen. How can I take the user back to the login screen and make it the only screen in the stack?

Currently I can take the user back to the login screen, but once he press the back button, he is taken back to the main screen

Style 15 Icon

Hello,
I could not able to set icon for middle button.
And can I use ImageIcon here?

how to navigate to a specific screen using routeName ?

In the docs there is a reference to a "settings" property. Can you please clarify how this property is supposed to be used/works ?

settings: RouteSettings(name: HomeScreen.routeName),

How to jump to a specific tab without tapping the BottomNavigationBar?

I have a situation on my app that I am at some inner screen in the first tab and I needed programatically jump to the second tab.

When I use "selectedIndex" parameter from PersistentTabView(), setting a new int according to the screen I need to jump to, it doesn't work. I tried using the PersistentTabController too, but it doesn't have a .jumpToPage function. Is there ay workaround to achieve this?

I am using MobX as state management.

PersistentTabController _persistentTabViewController = PersistentTabController(initialIndex: 0);

Observer(
        builder: (_) {
          return PersistentTabView(
            controller: _persistentTabViewController,
            items: bottomTitles.asMap().map((index, title){

              return MapEntry(index, PersistentBottomNavBarItem(
                icon: Icon(bottomIcons[index]),
                title: (bottomTitles[index]),
                activeColor: Theme.of(context).primaryColor,
                inactiveColor: Colors.grey,
                isTranslucent: false,
                )
              );

            }).values.toList(),
            screens: tabs,
            showElevation: false,
            navBarCurve: NavBarCurve.none,
            iconSize: 20,
            navBarStyle: NavBarStyle.style6,
            selectedIndex: MobXclass.tabSelectedIndex,
          );
        }
      ),

MobX class to call the action

  @observable
  int tabSelectedIndex = 0;

  @action
  void setTab(int n){
    tabSelectedIndex = n;
  }

pushDynamicScreen example

hi, could you please provide a working example of pushDynamicScreen in the example app ? we want to show a modal view ("bottom to top transition") instead of left/right transition. many thanks!

Keyboard does not work with TextField when use BottomNavBar

When I use PersistentBottomNavBar, after I focus on TextField, the TextField is not move up even using SingleScrollChildView

Make jumpToTab smoother

Is it possible to add a smooth navigation when jumping to other tabs, I have a situation where my app has some tabs, when navigating from 0 to 1, it's ok, when 1 to 0 it's not very smooth, a little blunt.

Is it possivel to add some parameters like Duration, Curve, to make the animation when jumping to other tabs a little more smooth?

persistentTabViewController.jumpToTab(tabNumber, duration:Duration(miliseconds: 300) , curve: Curves.easeOut);

Thank you for making this amazing package.

Adding New Nav Item dynamically

I've encountered the RangeError (index): Invalid value: Not in range 0...3, inclusive 4 after updated the version to 1.4.4
Generally I'm using Flutter Provider to notify the bottom navigation bar to detect once the user has login, I'll be added a new item into the bottom navigation bar, it works perfectly in 1.2.1 previously. However since I updated to 1.4.4 version, this method seems like not working anymore,

The link below is a simple demo on how I added the bottom nav bar item dynamically by using this plugin and Provider.
https://drive.google.com/open?id=1dtL0q_tbCmpnlEjyq7CjSnjqL4EuYaOs
Press the login button, a new nav item will appear, click it and will show the error below

The screenshot is here....(which is on another project)

The last item is added dynamically by notifying the Provider

Things I suspect...

I've notify my Provider values to update the item into my bottom navigation bar, but it doesn't update the navigation item count to the original class itself, so this happened.

Things I tried...
Flutter Clean with uninstalling the app from the device.
I've revert back the version to 1.2.1 and try out my app again, the error is still persist.

I hope you could provide me a better solution on how to update the bottom navigation bar item dynamically. Hope my information is given enough. Thanks a lot and appreciated.

Just in case you need the Flutter Doctor

[flutter] flutter doctor -v
[√] Flutter (Channel master, v1.16.3, on Microsoft Windows [Version 10.0.17763.1098], locale en-US)
    • Flutter version 1.16.3 at C:\Users\JefferyLeo\Documents\Flutter\flutter
    • Framework revision be3a4b37b3 (5 weeks ago), 2020-03-26 18:08:05 -0700
    • Engine revision b2bdeb3f0f
    • Dart version 2.8.0 (build 2.8.0-dev.17.0 1402e8e1a4)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at C:\Users\JefferyLeo\AppData\Local\Android\Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 43.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.44.2)
    • VS Code at C:\Users\JefferyLeo\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.9.1

[√] Connected device (1 available)
    • SM N950F • ce0817180d63385d0c7e • android-arm64 • Android 8.0.0 (API 26)

• No issues found!
exit code 0

Tabbar inside PersistentBottomNavBar error when update child item from tabbar

Dear Bilal,
Thank for your library .
I see a problem when use both Tabbar inside PersistentBottomNavBar .

If I update view to child view (Item from Tabbar) & switch tab .
It have error log ?
Please help give help me solve for that problem .
Thank you so much .

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following NoSuchMethodError was thrown during paint():
The method '-' was called on null.
Receiver: null
Tried calling: -(0.0)

The relevant error-causing widget was: 
  PersistentTabView file:///F:/Programer/workspace/PlayFun/playfun/lib/components/main_screen.dart:136:20
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
#1      RenderSliverMultiBoxAdaptor.childMainAxisPosition (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:573:37)
#2      RenderSliverHelpers.applyPaintTransformForBoxChild (package:flutter/src/rendering/sliver.dart:1695:20)
#3      RenderSliverMultiBoxAdaptor.applyPaintTransform (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:586:5)
#4      InkFeature._paint (package:flutter/src/material/material.dart:623:26)
...
The following RenderObject was being processed when the exception was fired: _RenderInkFeatures#a3310
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=360.0, h=512.0)
...  size: Size(360.0, 512.0)
RenderObject: _RenderInkFeatures#a3310
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=360.0, h=512.0)
  size: Size(360.0, 512.0)
...  child: RenderFlex#b7afa NEEDS-PAINT
...    needs compositing
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(w=360.0, h=512.0)
...    size: Size(360.0, 512.0)
...    direction: vertical
...    mainAxisAlignment: start
...    mainAxisSize: max
...    crossAxisAlignment: center
...    verticalDirection: down
...    child 1: RenderConstrainedBox#7deeb relayoutBoundary=up1
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...      size: Size(360.0, 53.3)
...      additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=53.3)
...      child: RenderPadding#cb274 relayoutBoundary=up2
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=360.0, h=53.3)
...        size: Size(360.0, 53.3)
...        padding: EdgeInsets(0.0, 13.0, 0.0, 0.0)
...        textDirection: ltr
...        child: RenderFlex#878e6 relayoutBoundary=up3
...          parentData: offset=Offset(0.0, 13.0) (can use size)
...          constraints: BoxConstraints(0.0<=w<=360.0, h=40.3)
...          size: Size(360.0, 40.3)
...          direction: vertical
...          mainAxisAlignment: start
...          mainAxisSize: max
...          crossAxisAlignment: center
...          verticalDirection: down
...    child 2: RenderFlex#d94ca relayoutBoundary=up1 NEEDS-PAINT
...      needs compositing
...      parentData: offset=Offset(0.0, 53.3); flex=1; fit=FlexFit.tight (can use size)
...      constraints: BoxConstraints(0.0<=w<=360.0, h=458.7)
...      size: Size(360.0, 458.7)
...      direction: vertical
...      mainAxisAlignment: start
...      mainAxisSize: max
...      crossAxisAlignment: center
...      verticalDirection: down
...      child 1: RenderPadding#d50cb relayoutBoundary=up2 NEEDS-PAINT
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...        constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...        size: Size(360.0, 56.4)
...        padding: EdgeInsets(0.0, 14.0, 0.0, 14.0)
...        textDirection: ltr
...        child: RenderConstrainedBox#0eff5 relayoutBoundary=up3 NEEDS-PAINT
...          parentData: offset=Offset(0.0, 14.0) (can use size)
...          constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
...          size: Size(360.0, 28.4)
...          additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=28.4)
...      child 2: RenderRepaintBoundary#2912d relayoutBoundary=up2
...        needs compositing
...        parentData: offset=Offset(0.0, 56.4); flex=1; fit=FlexFit.tight (can use size)
...        constraints: BoxConstraints(0.0<=w<=360.0, h=402.3)
...        layer: OffsetLayer#20116 DETACHED
...          engine layer: OffsetEngineLayer#aec9a
...          offset: Offset(0.0, 109.7)
...        size: Size(360.0, 402.3)
...        metrics: 78.4% useful (8 bad vs 29 good)
...        diagnosis: this is a useful repaint boundary and should be kept
...        child: RenderCustomPaint#e68b6 relayoutBoundary=up3
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=360.0, h=402.3)
...          size: Size(360.0, 402.3)

════════════════════════════════════════════════════════════════════════════════════════════════════

Black screen when switching between tabs

Hi! When implementing PersistentBottomNavBar I faced a problem. When I switch from one tab to another appears black screen, sometimes black screen stays forever (I managed to do this only when I click on two tabs at the same time, If you click on only one tab and no more, then everything is ok)

Please look at a GIF and a code. Thank you in advance

class MenuPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      screens: _buildScreens(),
      items: _navBarsItems(),
      navBarHeight: 70,
      confineInSafeArea: true,
      decoration: NavBarDecoration(
        borderRadius: BorderRadius.circular(25)
      ),
      backgroundColor: AppColors.backgroundColor,
      handleAndroidBackButtonPress: false,
      resizeToAvoidBottomInset: true,
      stateManagement: true,
      hideNavigationBarWhenKeyboardShows: true,
      itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 200), curve: Curves.ease),
      screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200)),
      navBarStyle: NavBarStyle.style9,
    );
  }

  List<Widget> _buildScreens() =>
      [CategoriesPage(), FavoritePage(), MaterialsPage(), SettingsPage()];

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Menu.square_outline),
        title: Strings.categories,
        activeColor: AppColors.accentColor,
        inactiveColor: AppColors.inactiveMenuItemColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Menu.heart_outline),
        title: Strings.favorite,
        activeColor: AppColors.accentColor,
        inactiveColor: AppColors.inactiveMenuItemColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Menu.circle_outline),
        title: Strings.materials,
        activeColor: AppColors.accentColor,
        inactiveColor: AppColors.inactiveMenuItemColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Menu.settings_outline),
        title: Strings.settings,
        activeColor: AppColors.accentColor,
        inactiveColor: AppColors.inactiveMenuItemColor,
      )
    ];
  }
}

Bottomsheet

How do I apply bottom sheet on top the navigation bar? Like the way it is on YouTube music UI?

How to handle android back button

Hi,

Can you please provide your input on how can we handle the hardware back button when the view is pushed.

Right now when tapping the hardware back button closes the app.

Thanks.

new feature - popping all "previous" screens from the navigation stack

We have a requirement in our app whereby once a user gets to the 3rd screen in the navigation stack - we either:
(a) pop them all the way back to the first screen
(b) take them to the 4th screen and then prevent them from going BACK (to screens 3/2/1). Then, once the tasks etc are completed on screens 4, 5 etc. => the user will be "popped" back to the 1st screen.

What would you suggest is best approach with PersistentBottomNavBar ?

A PersistentTabController was used after being disposed.

I am using a Future Builder to return the Main Bottom Navigation (Persistent Bottom Nav Bar) or the Signup Page. I get this error: A PersistentTabController was used after being disposed.

I also get this error when I go back from the MainBottomNav.

Margin still showing when keyboard shows

In a scrollable screen, when the keyboard shows the bottom nav is disappearing but the margin left for it is still present.

Here's a screenshot that shows what's happening (PS: The page ends where the scroll effect is shown):

Frame drop on routing animation

Hello there, I am experiencing frame drop on routing animation only between first and second page. After first push, animations are just fine.

Frame drop can only be noticable on low end devices (Samsung A5 2015) or poor emulators.

I am curious what is causing this. I think author have some toughts.

Current version: 1.5.5

Only use navBarStyle: NavBarStyle.custom , don't use another style

Dear there ,
Thank for your library , It's very perfect . But I use a litte problem .
I don't use another style for bottom navigation .

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building MyHomePage(dirty, state: _MyHomePageState#201f7):
'package:persistent_bottom_nav_bar/persistent-tab-view.widget.dart': Failed assertion: line 38 pos 12: 'navBarStyle == NavBarStyle.custom && customWidget != null ||
navBarStyle != NavBarStyle.custom && customWidget == null': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md

The relevant error-causing widget was:
MyHomePage file:///F:/CodeExample/Flutter/custom_bottom_navigation/lib/main.dart:21:13
When the exception was thrown, this was the stack:
#2 new PersistentTabView (package:persistent_bottom_nav_bar/persistent-tab-view.widget.dart:38:12)
#3 _MyHomePageState.build (package:custombottomnavigation/main.dart:84:12)
#4 StatefulElement.build (package:flutter/src/widgets/framework.dart:4334:27)
#5 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4223:15)
#6 Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
...

popAllScreensOnTapOfSelectedTab is not working

popAllScreensOnTapOfSelectedTab is not working.

Add drawer/endDrawer option.

@BilalShahid13
In my project I want to end drawer and show accross all screen for that I have used Scafflod and set PersistentTabView to body. But problem is bottom navigation bar show above keyboard when I click on textfield. If I set value to resizeToAvoidBottomInset=true textfield get hide below keyboard.

So can provide any solution to this.

Thank you.

How to refresh screen

I have two bottom navigation item, Home and Watchlist. In Home screen I am showing list of videos and in Watchlist shows list of videos marked as AddToWatchlist from Home screen.
My problem is when I add video to Watchlist from Home screen, I want to refresh Watchlist to show updated list when I tap Watchlist icon.
So my question is in which method/callback function should I write logic for this? No any function other than build() called in Watchlist.
Please give me a solution.
Thank you.

incorrect layout on iPhone 11

hi, i ran the example app on iPhone 11 and it was not rendering correctly for some reason. there's a large black space/area above the nav bar. Also, the nav bar is sitting too low.

XCode Version 11.4.1 (11E503a)
target: iOS 13.4

How to navigate a screen without NavBar?

Hi!
I have developed an application which contains login screen. Login screen doesn't contains a bottom navigation bar. Once user logged in, from Home Screen onwards I'm showing bottom navigation bar. But once user logged out I'm redirecting user to the Login Screen. But bottom navigation bar is still remains in the login screen as well. I'm using the following function for logout navigation.

Navigator.of(context).pushAndRemoveUntil(
                 CupertinoPageRoute(
                   builder: (BuildContext context) {
                     return LoginPage(title: 'Sign In');
                   },
                 ),
                 (_) => true,
               );

How do I navigate to Login Screen without bottom navigation bar?

Is there possible to refresh the whole Bottom Nav Bar after login?

I would like to refresh the bottom navigation bar as the user logged in to the system / page navigation.
For example, there's 4 navigation items as default when normal users come in.
Once the user has logged in, I want to refresh the bottom navigation bar and it shows 5 navigation items after that.

how to add close dialog before closing app when using handlebackbutton

Hi,

So i want to run a dialog before closing application when a handleAndroidBackButtonPress=true ?

How to hide the Bottom Nav Bar Dynamically

I am currently building an app where I need to keep an option of fullscreen. The problem is that I also need to hide the bottom navigation bar dynamically. Is there any way to do this within this plugin.

Screen not scroll when keyboard appears.

i made a chat screen where at the end of screen i used text field when keyboard appears then the screen not scroll . Even i have used SingleChildScrollView and ListView both......

TextStyle formatting all weird when push a new screen

This is the style and layout I have. It shows up perfectly fine on the first tab screen.

but if I push the same screen on top of the initial screen, the formatting gets messed up like this

Anyone else have the same problem?

I am using a nestedscrollview for this screen. Seems like the nestedscrollview is causing the conflict. If i remove the nestedscrollview, the styling is fine.

Set a border at the top in a navbarStyle predefined

Hello,

First thanks for your awesome package! It works like a charm for me!
I was just wondering if it was possible to add a border to my bottomNavBar.

I'm using a style that you created (NavbarStyle.5) but I would like to add a border at the top of it to looks like the pic underneath

Is it possible to do so ? If yes could you help me archieve it?
Thanks again!

Color transparent

When i set colors transparent to the backgroundColor PersistentTabView, a background black color appear. How to fix that ? Thx

Whenever switching tabs, it navigates back to the first screen, it doesnt persist the navigation ?

Thank you for the great package, but am stuck with this issue that doesnt allow me to use the package. Gonna explain it in an example.

App starts and am in the first tab screen, i press a button and route to second screen inside the first tab , i switch the tab for example by clicking the third buttton, which means am in the third tab then when clicking the first tab it obviously pop back to the first screen in the first tab rather than showing the second screen that i left it at when switch to the third tab.

Any fix available from my side? or its from your side ?

Getting black screen after closing the alert dialog

Hey, I am facing an issue. I have a list of items displaying on the page and when I select an item it goes to a new screen with details of that item. I have a delete button on the appBar. When the user presses the button it confirms whether user wants to delete it using Alert dialog. But when I press delete it goes back to a black screen. I know I am missing something here. Let me know what it is
Here is the code:

showDialog(
context: context, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
title: Text('Are you sure you want to delete'),
actions: [
FlatButton(
child: Text('CANCEL'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: Text('DELETE'),
onPressed: () {

                          _deletefromDb(data['id'], context);
                          // Navigator.of(context).pop();
                          
                            Navigator.pop(context);
                          //  Navigator.pushReplacementNamed(context, 'saved');
                          // Navigator.of(context).popUntil((route) {
                          //   return route.settings.name ==
                          //       "Saved";
                          // });
                        },
                      ),
                    ],
                  );
                },
              );

_deletefromDb(int id, context) async {
var result = await databaseHelper.deleteLyrics(id);
SavedBlocProvider.of(context).getSavedList();
if (result != 0) {
// Navigator.of(context).pop();

}

}

Show only icon

Hi, may i know how can i just have a bottom navigation bar with just icon , i do not want to have title at the bottom. thanks

PersistentBottomNavBarItem icon properties don't support for another widget

Dear Bilal ,
The first , thank for your library .
It's great library .
But it will perfect if don't have two problem when implementation your library

1. use another widget in PersistentBottomNavBarItem (Image.asset , ImageIcon , Container) ...
   They will scale down and very small .

List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Image.asset('ic_home.png'),
        title: ("Home"),
        activeColor: Colors.deepOrangeAccent,
        inactiveColor: Colors.grey,
        isTranslucent: false,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CustomIcon.ic_giftcode),
        title: ("Giftcode"),
        activeColor: Colors.deepOrangeAccent,
        inactiveColor: Colors.grey,
        isTranslucent: false,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CustomIcon.ic_notice),
        title: ("Thông báo"),
        activeColor: Colors.deepOrangeAccent,
        inactiveColor: Colors.grey,
        isTranslucent: false,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CustomIcon.ic_category),
        title: ("Danh mục"),
        activeColor: Colors.deepOrangeAccent,
        inactiveColor: Colors.grey,
        isTranslucent: false,
      ),
    ];
  }

The result .

2. Don't support switch icon active and inactive from asset for your library .
   You know IconData only support Monochrome .

It will flexiable when use have exist .
I hope you fix that problem .
Again ,
Thank you so much .

How to call dispose method in third screen.

@BilalShahid13 This library is superb. It solved my major design problem.
But give me solution of below scenario.
Let suppose in Home tab, I am in third screen and if I click search tab or any other tab then how to call dispose method in third screen. I want to close some connection in third screen.

How can I do that?

And also if I am on Home tab, go to second screen then how to come first screen on click of same
Home tab.

Thanks in advance.

Increase area icon

Hi, I Want to increase the area of each icons on my nav bar. My goal is to not missclick when i tap on the icon.

Get black background color behind border radius

There may be two reasons to cause this problem (screenshot below):

1. Increase both upper border radius
2. decrease nav bar height a low
   What I thought is to change the property to cause black background to Colors.transparent. But unfortunately I cannot handle it by myself.

Also, it will be great to add a property for adjusting both upper border radius in PersistentTabView() method if (customWidget == null)

Thanks in advance!