Starting navbar

main.dart

import 'package:flutter/material.dart';

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

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

class Root extends StatefulWidget {
  @override
  State<Root> createState() => _RootState();
}

class _RootState extends State<Root> {
  int currentPageIndex = 0;
  
  // Destinations are the pieces of the bottom bar displayed
  // Label does not have to be displayed but is required for accessibility
  final destinations = const [
    NavigationDestination(
            icon: Icon(Icons.home),
            selectedIcon: Icon(Icons.home, color: Colors.blue),
            label: 'Home',
            tooltip: '',
          ),
    NavigationDestination(
            icon: Icon(Icons.business),
            selectedIcon: Icon(Icons.business, color: Colors.blue),
            label: 'Home',
            tooltip: '',
          )];
    
  final pages = const [Home(destinationIndex: 0), Center(child: Text('Business Page'))];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        backgroundColor: Colors.transparent,
        indicatorColor: Colors.transparent,
        overlayColor: MaterialStateProperty.all(Colors.transparent),
        surfaceTintColor: Colors.transparent,
        selectedIndex: currentPageIndex,
        labelBehavior:  NavigationDestinationLabelBehavior.alwaysHide,
        destinations: destinations
      ),
      body: pages[currentPageIndex],
    );
  }
}

class Home extends StatelessWidget {
  final int destinationIndex;
  
  const Home({Key? key, required this.destinationIndex}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go to List Page'),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => ListPage(),
            ));
          },
        ),
      ),
    );
  }
}

class ListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('List Page')),
      body: const Center(
        child: Text('Welcome to List Page'),
      ),
    );
  }
}