I'd like to change screens on my flutter app using the navigation bar that I made below

I learnt how to make this navigation bar on Youtube for my app but I'm struggling implementing navigation and routing from other tutorials online to the navigation bar that I created.

As you can see below, I've created the bottom navigation bar and called it BottomNavyBar() . As I press each Icon I'd like it to go to a new screen made from a separate dart file to show that each icon goes to a new route.

        import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  double xOffset = 0;
  double yOffset = 0;
  double scaleFactor = 1;

  bool isDrawerOpen = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(microseconds: 250),
      transform: Matrix4.translationValues(xOffset, yOffset, 0)
        ..scale(scaleFactor),
      child: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Align(
                  alignment: Alignment.topCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      isDrawerOpen
                          ? IconButton(
                              icon: Icon(Icons.arrow_back_ios),
                              onPressed: () {
                                setState(() {
                                  xOffset = 0;
                                  yOffset = 0;
                                  scaleFactor = 1;
                                  isDrawerOpen = false;
                                });
                              },
                            )
                          : IconButton(
                              icon: Icon(Icons.menu),
                              onPressed: () {
                                setState(() {
                                  xOffset = 230;
                                  yOffset = 150;
                                  scaleFactor = 0.6;
                                  isDrawerOpen = true;
                                });
                              },
                            ),
                      Text(
                        'nghbrly',
                        style: GoogleFonts.quicksand(
                            color: const Color(0xff8fc6bb), fontSize: 45),
                      ),
                      Image(image: AssetImage('assets/images/letterbox.png')),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavyBar(),
      ),
    );
  }
}

class NghbrlySideMenu extends StatefulWidget {
  @override
  _NghbrlySideMenuState createState() => _NghbrlySideMenuState();
}

class _NghbrlySideMenuState extends State<NghbrlySideMenu> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class BottomNavyBar extends StatefulWidget {
  @override
  _BottomNavyBarState createState() => _BottomNavyBarState();
}

class _BottomNavyBarState extends State<BottomNavyBar> {
  int selectedIndex = 0;
  Color backgroundColor = Colors.white;

  List<NavigationItem> items = [
    NavigationItem(
        Icon(
          const IconData(0xe904, fontFamily: 'nghbrly'),
        ),
        Text('  Borrow')),
    NavigationItem(
        Icon(
          const IconData(0xe9c8, fontFamily: 'nghbrlyfullicons'),
        ),
        Text('    Lend')),
    NavigationItem(
        Icon(
          const IconData(0xe97a, fontFamily: 'nghbrlyfullicons'),
        ),
        Text(' Favorites')),
    NavigationItem(
        Icon(
          const IconData(0xe996, fontFamily: 'nghbrlyfullicons'),
        ),
        Text(' Nghbrs')),
    NavigationItem(
        Icon(
          const IconData(0xe9cc, fontFamily: 'nghbrlyfullicons'),
        ),
        Text('   Cart')),
  ];

  Widget _buildItem(NavigationItem item, bool isSelected) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 270),
      height: double.maxFinite,
      width: isSelected ? 125 : 50,
      padding: isSelected
          ? EdgeInsets.only(left: 16, right: 16)
          : EdgeInsets.only(left: 13, right: 8),
      decoration: isSelected
          ? BoxDecoration(
              color: const Color(0xff8fc6bb),
              borderRadius: BorderRadius.all(Radius.circular(50)))
          : null,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              IconTheme(
                data: IconThemeData(
                  size: 24,
                  color: isSelected ? backgroundColor : const Color(0xff655454),
                ),
                child: item.icon,
              ),
              Padding(
                padding: const EdgeInsets.only(left: 5),
                child: isSelected
                    ? DefaultTextStyle.merge(
                        style: TextStyle(
                          color: backgroundColor,
                        ),
                        child: item.title)
                    : Container(),
              )
            ],
          )
        ],
      ),
    );
  }

  //int _currentIndex = 0;
  //final List<Widget> _children = [];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: true,
      child: Container(
        height: 56,
        padding: EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
        decoration: BoxDecoration(color: backgroundColor, boxShadow: [
          BoxShadow(
            color: Colors.white,
            blurRadius: 0,
          )
        ]),
        width: MediaQuery.of(context).size.width,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: items.map((item) {
            var itemIndex = items.indexOf(item);

            return GestureDetector(
              onTap: () {
                setState(() {
                  selectedIndex = itemIndex;
                });
              },
              child: _buildItem(item, selectedIndex == itemIndex),
            );
          }).toList(),
        ),
      ),
    );
  }
}

Another thing that I'd like to find out if possible is, what if I wanted to place the navigation bar below the app heading "nghbrly" like in this picture . I'd really appreciate it.