Bottom nav bar change tabs from another page?

Question

I've got a bottom nav bar. I need to be able to call a function that switches tabs in the bottom nav bar from a different page/class. All of the answers I've seen on SO only show you how to switch between tabs from within the bottom nav bar class itself, not other classes.

Here's my bottom nav class:

class BasicBottomNavBar extends StatefulWidget {
  const BasicBottomNavBar({Key? key}) : super(key: key);

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

class _BasicBottomNavBarState extends State<BasicBottomNavBar> {
  int _selectedScreenIndex = 0;

  final List _screens = [
    {"screen": Screen1(), "title": "Page 1"},
    {"screen": Screen2(), "title": "Page 2"},
    {"screen": Screen3(), "title": "Page 3"},
    {"screen": Screen4(), "title": "Page 4"},
    {"screen": Screen5(), "title": "Page 5"},
  ];

  void _selectScreen(int index) {
    setState(() {
      _selectedScreenIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_screens[_selectedScreenIndex]["title"]),
        backgroundColor: Colors.white,
        elevation: 0,
        titleTextStyle: TextStyle(
          fontSize: 16,
          fontFamily: 'Inter',
          fontWeight: FontWeight.w500,
          color: Colors.black,
        ),
      ),
      body: _screens[_selectedScreenIndex]["screen"],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedScreenIndex,
        onTap: _selectScreen,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        unselectedFontSize: 12,
        items: const [
          BottomNavigationBarItem(icon: Icon(Ionicons.home_outline), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Ionicons.list_outline), label: "History"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Add"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Stats"),
          BottomNavigationBarItem(icon: Icon(Icons.notifications), label: "Reminders"),
        ],
      ),
    );
  }
}

And in this class, I have a button that when pressed, I want to change to tab #2:

class CustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        // Change to tab #2 here
      }
    );
  }

}

How is this done?

Answer 1

You can use a callback method like

class CustomWidget extends StatelessWidget {
  final VoidCallback callback;
  const CustomWidget({
    Key? key,
    required this.callback,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: callback,
      child: Text("goto"),
    );
  }
}

And the use case will be

class _BasicBottomNavBarState extends State<BasicBottomNavBar> {
  int _selectedScreenIndex = 0;

  List get _screens => [
        {"screen": Text("Screen1"), "title": "Page 1"},
        {
          "screen": CustomWidget(
            callback: () {
              _selectedScreenIndex = 0;

              setState(() {});
            },
          ),
          "title": "Page 2"
        },
      ];

  void _selectScreen(int index) {
    setState(() {
      _selectedScreenIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_selectedScreenIndex]["screen"],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedScreenIndex,
        onTap: _selectScreen,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        unselectedFontSize: 12,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Stats"),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications), label: "Reminders"),
        ],
      ),
    );
  }
}