How to switch between tabs in bottom nav bar using button in one tab in flutter-CodePudding

I have been working with BottomNavigationBar in the flutter, but I am not able to select a Tab programmatically from one tab to another(ie) by clicking a submit button inside page1() the tab2 should be loaded.

Here's the code I've used:

 ...
    int _selectedIndex = 1;
    
    void _onItemTapped(int index) {
        if (_selectedIndex == 0) {}
        setState(() {
          _selectedIndex = index;
        });
      }
     Widget build(BuildContext context) {  
        List<Widget> widgetOptions = <Widget>[
          page1(),
     page2(),
     page3(),
        ];
        return Scaffold(
          body: Center(
            child: widgetOptions.elementAt(_selectedIndex),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: <BottomNavigationBarItem>[
              const BottomNavigationBarItem(
                icon: Icon(Icons.Home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'search',
              ),
              const BottomNavigationBarItem(
                icon: Icon(Icons.person_outlined),
                label: 'profile',
              ),
            ],
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
          ),
        );
      }
    }

CodePudding user response：

Here's an example of how to control it from inside the tabs themselves:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 1;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetOptions = <Widget>[
      MyTab(text: '1', onClick: _onItemTapped),
      MyTab(text: '2', onClick: _onItemTapped),
      MyTab(text: '3', onClick: _onItemTapped)
    ];
    return Scaffold(
      body: Center(
        child: widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outlined),
            label: 'profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

class MyTab extends StatelessWidget {
  final String text;
  final ValueSetter<int> onClick;

  const MyTab({Key? key, required this.text, required this.onClick})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('You are now in tab $text'),
        TextButton(onPressed: () => onClick(0), child: const Text('1')),
        TextButton(onPressed: () => onClick(1), child: const Text('2')),
        TextButton(onPressed: () => onClick(2), child: const Text('3')),
      ],
    );
  }
}