Flutter: Identical Colors Appear Different on Scaffold and NavigationBar

I'm experiencing an unexpected issue in Flutter where setting the same background color for both a Scaffold and a NavigationBar results in a slight difference in shade between the two, even though the exact same color value is used. This occurs not only with orange but with any color I choose. Here's a simplified version of my code that demonstrates the problem:

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
        bottomNavigationBar: MyNavigationBar(),
        backgroundColor: Colors.orange,
      ),
    );
  }
}

class MyNavigationBar extends StatefulWidget {
  const MyNavigationBar({super.key});

  @override
  State<MyNavigationBar> createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      selectedIndex: currentPageIndex,
      onDestinationSelected: (int index) => setState(() => currentPageIndex = index),
      destinations: const <Widget>[
        NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
        NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
      ],
      backgroundColor: Colors.orange,
      indicatorColor: Colors.white,
    );
  }
}

In this code, both the Scaffold and the NavigationBar are set to Colors.orange for their backgroundColor. Despite this, the colors displayed on the emulator/screen do not match exactly, showing a noticeable difference.

What could be causing the difference in colors, and how can it be resolved to ensure the colors match perfectly? I do not want the NavigationBar to stand out.

Thank you for any insights or solutions!

Add elevation : 0, that make identical as per the scaffold

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
        bottomNavigationBar: MyNavigationBar(),
        backgroundColor: Colors.orange,
      ),
    );
  }
}

class MyNavigationBar extends StatefulWidget {
  const MyNavigationBar({super.key});

  @override
  State<MyNavigationBar> createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
        selectedIndex: currentPageIndex,
        onDestinationSelected: (int index) =>
            setState(() => currentPageIndex = index),
        destinations: const <Widget>[
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings')
        ],
        backgroundColor: Colors.orange,
        indicatorColor: Colors.white,
        elevation: 0);
  }
}