Fixed Bottom Navigation Bar for particular pages - Flutter

Question

I have 6 pages on my flutter mobile app. They are EmploymentListPage, ClaimsPage, NotificationsPage, SettingsPage, EmploymentDetailsPage and EmploymentClaimsPage.

EmploymentListPage, ClaimsPage, NotificationsPage and SettingsPage can be navigated through the bottom navigation bar. But EmploymentDetailsPage can be navigated through EmploymentListPage and EmploymentClaimsPage can be navigated through EmploymentDetailsPage.

At this time bottom navigation bar fixed and viewed for EmploymentListPage, ClaimsPage, NotificationsPage and SettingsPage.

But I want to show bottom nav bar for other two pages also. So what can I do?

This is the code of homePage.dart which have bottom nav bar. At this code file, I have called EmploymentListPage, ClaimsPage, NotificationsPage and SettingsPage in body part of Scaffold widget.

import 'package:apex_salary_packaging/screens/claimsPage.dart';
import 'package:apex_salary_packaging/screens/employmentListPage.dart';
import 'package:apex_salary_packaging/screens/notificationPage.dart';
import 'package:apex_salary_packaging/screens/settingsPage.dart';
import 'package:apex_salary_packaging/services/pushNotificationService.dart';
import 'package:apex_salary_packaging/services/serviceLocator.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  final PushNotificationService? pushNotificationService =
      locator<PushNotificationService>();

  int index = 0;
  String errorMessage = "";
  bool? showErrorMessage = false;
  int pushNotificationCount = 0;
  int selectedIndex = 0;

  var pages = <Widget>[
    EmploymentListPage(),
    ClaimsPage(),
    NotificationsPage(),
    SettingsPage()
  ];

  @override
  void initState() {
    super.initState();
    onLoadUnAcknowledgedCount();
    WidgetsBinding.instance!.addObserver(this);
    pushNotificationService!.onCountChange.listen(onNotificationCountChange);
    pushNotificationService!.onSelectedPageChange.listen(onPageChange);
    pushNotificationService!.checkForInitialMessage();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.resumed) {
      onLoadUnAcknowledgedCount();
    }
  }

  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: pages.elementAt(selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: onItemTapped,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            activeIcon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add_circle_rounded,
            ),
            activeIcon: Icon(Icons.add_circle_rounded),
            label: 'Claims',
          ),
          BottomNavigationBarItem(
            label: 'Notifications',
            icon: Stack(
              children: <Widget>[
                Icon(Icons.notifications),
                Visibility(
                  visible: pushNotificationCount > 0,
                  child: Positioned(
                    right: 0,
                    child: Container(
                      padding: EdgeInsets.all(1),
                      decoration: BoxDecoration(
                        color: Colors.red[900],
                        borderRadius: BorderRadius.circular(6),
                      ),
                      constraints: BoxConstraints(
                        minWidth: 12,
                        minHeight: 12,
                      ),
                      child: Text(
                        pushNotificationCount.toString(),
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 10,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }

  onItemTapped(index) {
    setState(() {
      this.selectedIndex = index;
    });
  }

  onNotificationCountChange(dynamic eventData) {
    this.onLoadUnAcknowledgedCount();
  }

  onPageChange(event) {
    if (this.mounted) {
      setState(() {
        selectedIndex = event;
      });
    }
  }

  onLoadUnAcknowledgedCount() async {
    if (this.mounted) {
      int count = await pushNotificationService!.onLoadNotificationCount();
      setState(() {
        pushNotificationCount = count;
      });
    }
  }
}

score 0 · Answer 1 · answered Mar 29 '23 at 05:29

You have multiple options for it. I'm suggesting one of them that uses PageView.

Step 1: Add a static page controller in your HomePage class

class HomePage extends StatefulWidget {

 static final pageController = PageController(); // add this

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

Step 2: In the body of Scaffold of _HomePageState class add PageView

body: PageView(
          physics: const NeverScrollableScrollPhysics(),
          controller: HomePage.pageController,
          children: pages,
        ),

Step 3: Update your page change logic to use pagecontroller when you want to change the page, you can use HomePage.pageController from anywhere in the app i.e

HomePage.pageController.jumpToPage(index);

step 4: IMPORTANT You'll need to listen to page change and update your bottom navigation bar state, i.e if you change your page without clicking on the bottom navigation bar, It won't update its index but the page will change. So add a listener where you're using bottom navigation bar.

@override
  void initState() {
    super.initState();

    HomePage.pageController.addListener(() {
      final page = HomePage.pageController.page;

      // to reduce the number of rebuild
      if (!(page != null && page > 0 && page < 1)) setState(() {});
    });
  }

Fixed Bottom Navigation Bar for particular pages - Flutter

1 Answers1