bottom navigation bar flutter detail page

Question

good morning community I have the following flutter code of an interface with bottom navigation tabs, I have two concerns how can the app not navigate the state two every time the user clicks and my other question is how can I go to a detail page without losing the bottom navigation tab on each screen of the application

I've been stuck in this problem for several days without knowing how to handle the topic of navigation of flutter detail pages

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:app/helpers/static-tabs.dart';
import 'package:app/pages/first-tab.dart' as first;
import 'package:app/pages/account-tab.dart' as second;
import 'package:app/pages/camara-tab.dart' as third;
import 'package:app/pages/fundaciones-tab.dart' as four;
import 'package:app/pages/noticias-tab.dart' as five;
import 'package:app/helpers/static-tabs.dart';

class MyTabs extends StatefulWidget{
@override
MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin{



TabController controller;
  int _currentIndex = 0;

  GlobalKey globalKey = new GlobalKey(debugLabel: 'btm_app_bar');
  final List<Widget>  _children =
   [
   first.FirstPage(),
   second.SecondPage(),
   third.Third(),
   four.FourPage(),
   five.Five()
  ];

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 5);
  }

  @override
  void dispose(){
    controller.dispose();
    super.dispose();
  }

  void onTappedBar(int index){
     setState(() {
      _currentIndex = index; 
     print (index);


   final BottomNavigationBar navigationBar = globalKey.currentWidget;
       if (_currentIndex == 2 ){
         print ("entra");

       navigationBar.onTap(index);
      //return;
     }

    });
  }

    //Use the navigator like you usually do with .of(context) method
  _openDetailsPage(BuildContext context) => Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => StaticTabsPage()));


  @override
  Widget build(BuildContext context){
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
    return new Scaffold(
      backgroundColor: Color(0xFFEDF0F6),
      appBar: new AppBar(title: new Text("Adoptame"), centerTitle: true, backgroundColor: Colors.green,

      ),

         bottomNavigationBar: ClipRRect(

        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        child: BottomNavigationBar(
          onTap: onTappedBar,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.dashboard,
                size: 30.0,
                color: Colors.black,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.search,
                size: 30.0,
                color: Colors.grey,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
                child: FlatButton(
                  padding: EdgeInsets.symmetric(vertical: 10.0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  ),
                  color: Color(0xFF23B66F),
                  onPressed: () =>   _openDetailsPage(context),
                  child: Icon(
                    Icons.add,
                    size: 35.0,
                    color: Colors.white,
                  ),
                ),
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.favorite_border,
                size: 30.0,
                color: Colors.grey,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.person_outline,
                size: 30.0,
                color: Colors.grey,
              ),
              title: Text(''),
            ),
          ],
        ),
      ),
      body: _children [_currentIndex] ,

    );
  }
}

Thank you very much for your answers,

regards

Answer 1

here is how to go about adding bottom navigation in flutter

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = ' Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    ScreenOne(),
    ScreenTwo(),
    ScreenThree()
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
//handle your selection here
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],

        onTap: _onItemTapped,
      ),
    );
  }
}