Flutter BottomNavigationBar stackoverflow

Question

i'm starting with Flutter and i'm struggling with the navigationBar, if i add the body i keep getting a stackOverflow. If i don't add the body everything is fine. Error:

    The following StackOverflowError was thrown building DefaultTextStyle(debugLabel: (englishLike body1 2014).merge(blackMountainView bodyText2), inherit: false, color: Color(0xdd000000), family: Roboto, size: 14.0, weight: 400, baseline: alphabetic, decoration: TextDecoration.none, softWrap: wrapping at box width, overflow: clip):
Stack Overflow

The relevant error-causing widget was: 
  Scaffold Scaffold:file:///Users/salvatorelafiura/git/energy_flutter/lib/screen/main.dart:104:12
When the exception was thrown, this was the stack: 
#0      new Uint8List (dart:typed_data-patch/typed_data_patch.dart:2201:3)
#1      _createTables.<anonymous closure> (dart:core/uri.dart:3872:60)
#2      new _GrowableList.generate (dart:core-patch/growable_array.dart:133:28)

Code of the current widget, 3 screens one bottomNavigation.

Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widgetTitle.elementAt(selectedIndex)),
            actions: <Widget>[
              IconButton(
                icon: const Icon(
                  Icons.logout,
                  color: Colors.white,
                ),
                onPressed: () {
                  signOut();
                },
              )
            ],
          ),
          body: Center(
            child: IndexedStack(index: selectedIndex, children: tabPages),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "Pratica"),
              BottomNavigationBarItem(icon: Icon(Icons.mail), label: "Messages"),
              BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profilo"),
            ],
            currentIndex: selectedIndex,
            onTap: onItemTapped,
            backgroundColor: Colors.white,
            fixedColor: Colors.blue,
            selectedLabelStyle: const TextStyle(color: Colors.red, fontSize: 20),
            unselectedFontSize: 16,
            selectedIconTheme:
                const IconThemeData(color: Colors.blue, opacity: 1.0, size: 30.0),
            unselectedItemColor: Colors.grey,
            unselectedLabelStyle: const TextStyle(fontSize: 18, color: Colors.pink),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }

What is the initial value of `selectedIndex`? – Josteve Jan 21 '22 at 10:15 — Josteve, Jan 21 '22 at 10:15
int selectedIndex = 0; – Salvatore La Fiura Jan 21 '22 at 10:21 — Salvatore La Fiura, Jan 21 '22 at 10:21

Qasim Ali · Accepted Answer · 2022-01-24T04:34:52.223

Create a Separate Class "Bottom" and Place the whole code of your Bottomnavigationbar inside that class then at every Screen just Call inside the Scaffold like:

bottomNavigationBar: Bottom();

Then Declare your int selectedIndex = 0; Globally it will works fine.

Modify the Given code:

import 'package:flutter/material.dart';

int _selectedIndex = 0;

class Bottom extends StatefulWidget {
  @override
  _BottomState createState() => _BottomState();
}

class _BottomState extends State<Bottom> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        
        showSelectedLabels: true, // <-- HERE
        showUnselectedLabels: true,
        backgroundColor: Color(0xff38547C),
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        selectedItemColor: Color(0xFF1C2834),
        unselectedItemColor: Colors.white,
        items: [
          BottomNavigationBarItem(
            icon: const Icon(
              Icons.home,
            ),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage("assets/images/ball.png"),
            ),
            label: "Matches",
          ),
          BottomNavigationBarItem(
              icon: const Icon(
                Icons.live_tv,
              ),
              label: "Live"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.poll,
              ),
              label: "Ranking"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.more_horiz,
              ),
              label: "More"),
        ],
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
          });
          if (_selectedIndex == 0) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Home());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 1) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Matches());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 2) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Live());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 3) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => Ranking());
            Navigator.of(context).push(route);
          } else if (_selectedIndex == 4) {
            var route =
                MaterialPageRoute(builder: (BuildContext context) => More());
            Navigator.of(context).push(route);
          }
        });
  }
}

If i declare it globally how can i pass it to the bottomNavigationBar ? — Salvatore La Fiura, Jan 21 '22 at 12:47
Thanks that actually worked. Separate question is it better using the router or initialize the screens ? — Salvatore La Fiura, Jan 25 '22 at 16:24
router is batter i have this code so i posted for easy to understand.. — Qasim Ali, Jan 26 '22 at 08:02

Flutter BottomNavigationBar stackoverflow

1 Answers1