Flutter BottomNavigationBar call navigator push for one Navigator item

Issue

I have a BottomNavigationBar with 4 BottomNavigaton items and want 3 items to render different contents for the body, which works fine already. I want the first item to open the camera and link to a completely new page. How can I do this?

What I already tried is attached below.

I get errors like

setState() or markNeedsBuild() called during build. This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets.

So I think I call the build method of CameraScreen too early, but I dont know how to avoid it.

class TabScreen extends StatefulWidget {
      int index;
    
      TabScreen(this.index);
      @override
      _TabScreenState createState() => _TabScreenState(index);
   }

class _TabScreenState extends State<TabScreen> {
  int _selectedPageIndex;

  _TabScreenState([this._selectedPageIndex = 1]);

  final List<Map<String, Object>> _pages = [
    {
      // index = 0 should push new Screen without appbar & bottom nav bar and open camera
      'page': null,
      'title': 'Cam',
    },
    {
      'page': ListScreen(),
      'title': 'List',
    },
    {
      'page': TransportScreen(),
      'title': 'Transport',
    },
    {
      'page': ExportScreen(),
      'title': 'Export',
    }
  ]; 

void _selectPage(int index, BuildContext ctx) {
      setState(() {
          _selectedPageIndex = index;
      });
      // this part does not work
      // if (_selectedPageIndex == 0){
      //   Navigator.of(ctx).pushNamed(CameraScreen.routeName);
      // }
  }

@override
  Widget build(BuildContext context) {

    final bottomBar = BottomNavigationBar(
      currentIndex: _selectedPageIndex,
      onTap: (i) => _selectPage(i, context),
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.camera_alt_outlined),
          label: 'Cam',
          // backgroundColor: Colors.red,
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.article_outlined),
          label: 'List',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.article_outlined),
          label: 'Transport',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.arrow_forward),
          label: 'Export',
        ),
      ],
    );    

    return Scaffold(
      appBar: AppBar(
        title: Text(_pages[_selectedPageIndex]['title']),
      ),
      body: _pages[_selectedPageIndex]['page'],
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4,
        clipBehavior: Clip.antiAlias,
        child: bottomBar,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: _buildActionButton(),
  );
 }
}

Solution

Well I solved it myself. The above solution which uses Navigator.of(ctx).pushNamed(CameraScreen.routeName);
works indeed.

My problem was in the CameraScreen File, which used some Widgets in its build function and became too large to fit on the screen.

Answered By – AtMakeIT

Answer Checked By – Willingham (FlutterFixes Volunteer)