Как реализовать Flutter нижнюю навигацию и ящик?

Question

Я новичок во Флаттере и хочу иметь нижнюю панель навигации для навигации по разным страницам, а также ящик для навигации по разным страницам.

В моей нижней навигации у меня есть 4 иконки меню, Главная (HomePage.dart), Поиск (SearchPage.dart), Канал (ChannelPage.dart) и другие (MorePage.dart)

В моем ящике у меня есть три фрагмента списка 1,2,3, которые ведут на каждую страницу .

Когда у меня есть только нижняя панель навигации, навигация между 4 страницами меню работает нормально, но когда я использую ящик для переноса на другие страницы, я не позволю перейти к фрагменту. страницы с помощью Drawer.

Вот так я получаю доступ к списку ящиков / перемещаюсь по нему

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new FirstFragment();
      case 1:
        return new SecondFragment();
      case 2:
        return new ThirdFragment();

      default:
        return new Text("Error");
    }
  }

Вот так я получаю доступ / пользуюсь навигацией по нижнему меню

final List<Widget> _children = [
    HomePage(),
    SettingsPage(),
    ContactPage(),
    HomePage()
  ];

Проблема, с которой я столкнулся, заключается в тело. Я не могу использовать оба одновременно

   body: _children.elementAt(_currentIndex),  // navigate to 4 bottom navigation pages

или

   body: _getDrawerItemWidget(_currentIndex), // navigate to 3 drawer pages

Это полный код, если вы хотите проверить его.

import 'package:flutter/material.dart';
import 'package:testing2/pages/ContactPage.dart';
import 'package:testing2/pages/HomePage.dart';
import 'package:testing2/pages/SettingsPage.dart';
import 'package:testing2/pages/MorePage.dart';
import 'placeholder_widget.dart';
import 'package:testing2/fragments/first_fragment.dart';
import 'package:testing2/fragments/second_fragment.dart';
import 'package:testing2/fragments/third_fragment.dart';

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.title, this.icon);
}

class MyHomePage extends StatefulWidget {
    final drawerItems = [
    new DrawerItem("Fragment 1", Icons.rss_feed),
    new DrawerItem("Fragment 2", Icons.local_pizza),
    new DrawerItem("Fragment 3", Icons.info)
  ];
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _currentIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new FirstFragment();
      case 1:
        return new SecondFragment();
      case 2:
        return new ThirdFragment();

      default:
        return new Text("Error");
    }
  }
    _onSelectItem(int index) {
    setState(() => _currentIndex= index);
    Navigator.of(context).pop(); // close the drawer
  }

  final List<Widget> _children = [
    HomePage(),
    SettingsPage(),
    ContactPage(),
    MorePage()
  ];

  void onTappedBar(int index){
    index == 4
    ? _scaffoldKey.currentState.openDrawer()
    : setState((){
      _currentIndex = index;

    });
  }

  @override
  Widget build(BuildContext context) {
     var drawerOptions = <Widget>[];
     for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(
        new ListTile(
          leading: new Icon(d.icon),
          title: new Text(d.title),
          selected: i == _currentIndex,
          onTap: () => _onSelectItem(i),
        )
      );
    }
    return new Scaffold(
      body: _children[_currentIndex],
      drawer: new Drawer(
                child: new Column(
          children: <Widget>[
            new UserAccountsDrawerHeader(
                accountName: new Text("John Doe"), accountEmail: null),
            new Column(children: drawerOptions)
          ],
        ),
      ),
      appBar: new AppBar(
        leading: new Container(),
        actions: <Widget>[
        IconButton(
          icon: Icon(
            Icons.dashboard,
            color: Colors.white,
          ),
          onPressed: (){

          },
        )],
        title: Text('Maxis Mobile')),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blueGrey,

        type: BottomNavigationBarType.fixed,
        onTap: onTappedBar,
        currentIndex: _currentIndex,
        items: <BottomNavigationBarItem> [
          BottomNavigationBarItem(icon: new Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)), title: new Text('Home', style: TextStyle(color: Colors.white),), ),
          BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text('Explore')),
          BottomNavigationBarItem(icon: new Icon(Icons.device_hub), title: new Text('Channels')),
          BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('More')),

        ],

      ),

    );
  }
}
class Page extends StatelessWidget {
  const Page({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}