Flutter how to change the parent BottomNavigationBar index from a child widget

Question

So I have recently started my first project in flutter, I completed the full UI layout and am now doing the whole logic part of the front-end, most of my onTap behavior is working, but I have come to the following situation I do not know how to tackle.

I have four files which contains all the UI.
widget0.dart
widget1.dart
widget2.dart
These files each hold the StatefullWidget which are being build by the BottomNavigationBar.

main.dart
This file contains my main() =>runApp class and function. My MaterialApp contains a Scaffold with a BottomNavigationBar. This works as intended and I am being able to switch between each of the 3 widgets.

However in my widget0.dart file I have a button which should change the index of the BottomNavigationBar from my main.dart file from 0 to 2 (to build the widget from widget2.dart).

I have tried to wrap up the value that holds the index for the navigation bar in a separate static class, so I could setState((){ StaticClass.index = 2}) in the button onTap(), but this doesn't work, and actually freezes the navigation bar to its initial value.

An answer somewhere here on stackoverflow suggested that each of the Widgets should have it's own Scaffold and navigationbar, however I am sure there must be a cleaner way.

So what is the most Fluttery way to achieve my goal?

Thanks in advance.

dshukertjr dshukertjr · Accepted Answer · 2019-02-08T02:45:11

You can pass a function as a parameter to widget0 and in that function can change the index value like this:

class ParentWidgetState extends State<ParentWidget> {

  int _index = 0;

  void goToWidget2() {
    setState(() {
          _index = 2;
        });
  }

  Widget body() {
    switch(_index) {
      case 0: 
        return Widget0(goToWidget2);
        break;
      case 1: 
        return Widget1();
        break;
      case 2: 
        return Widget2();
        break;
    }
  }

  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: body(),
        bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
        ],
      ),
      );
    }
}

class Widget0 extends StatelessWidget {
  Widget0(this.goToWidget2);
  final Function goToWidget2;
  @override
    Widget build(BuildContext context) {
      return Center(child: FlatButton(
        onPressed: goToWidget2,
        child: Text("Go To Widget 2"),
      ),);
    }
}
class Widget1 extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Center(child: Text("widget 1"),);
    }
}
class Widget2 extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Center(child: Text("widget 2"),);
    }
}

Flutter how to change the parent BottomNavigationBar index from a child widget

1 Answers