CODEWITHSUNDEEP
flutterdartnavigationflutter-bottomnavigationrouted
user16886755
user16886755

Reputation:

flutter fix bottom navigation bar in whole app

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

Upvotes: 1

Views: 2872

Answers (1)

Kisame Hoshigaki
Kisame Hoshigaki

Reputation: 51

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!

Upvotes: 0

Related Questions