1

I want to use the bottom navigation bar in the whole of my app and in the bottom navigation set routed for all routes in my app.

first set bottom navigation -> then routed pages in each index. but I don't know-how. Does anyone know that how can I do this? or anyone has a simple source code for my issue? thanks.

enter image description here

I want to handle page pages in bottom navigation with routed

  • Hi you can refer [this](https://stackoverflow.com/questions/57340534/bottom-navbar-rounded-corners), or check the flutter docs. – Sandip Nov 09 '21 at 08:00
  • Check this package https://pub.dev/packages/persistent_bottom_nav_bar – Amir Nov 09 '21 at 08:07

1 Answers1

0

I've been in this problem you can try this, i was using IndexedStack and add Navigator inside of it

Root page :

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class BasePageSmall extends StatefulWidget {
  @override
  _BasePageSmallState createState() => _BasePageSmallState();
}

class _BasePageSmallState extends State<BasePageSmall> {
  int _currentIndex = 0;
  List<Widget> pages = [
    HomePageSmall(),
    CartBase(),
    SettingsPageSmall(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        //elevation: 0,
        //type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: "",
            tooltip: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.shopping_cart),
            label: "",
            tooltip: context.l10n.cart,
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.gear_alt),
            label: "",
            tooltip: context.l10n.settings,
          ),
        ],
        onTap: (index) {
          setState(
            () {
              _currentIndex = index;
            },
          );
        },
      ),
    );
  }
}

in this situation i use HomePageSmall for example

import 'package:flutter/material.dart';

class HomePageSmall extends StatefulWidget {
  @override
  _HomePageSmallState createState() => _HomePageSmallState();
}

class _HomePageSmallState extends State<HomePageSmall> {
  @override
  Widget build(BuildContext context) {
    return Column(
   children: [
     Expanded(
        child: Row(
          children: [
            Expanded(
              child: IndexedStack(
                index: 0,
                children: [
                  Navigator(
                    initialRoute: '/',
                    onPopPage: (route, setting) => route.didPop(setting),
                    onGenerateRoute: (setting) {
                    final routes = {
                      '/': (context) => MainPageSmall(),
                      '/close-shift': (context) => CloseShiftPageSmall(),
                    };

                    return MaterialPageRoute(
                      builder: (context) {
                        return routes[setting.name!]!(context);
                      },
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    ]);
  }
}

Sorry for my bad code, Hope it helps!

Kisame Hoshigaki
  • 51
  • 4
  • sorry i don't understand what are home page small doing , would you please write it in GitHub project?so i can test it –  Nov 09 '21 at 11:23