Backgroundcolor NavigationBar and Scaffold differ

Question

The code below represents a reproducible example of the following problem. I want the background color of my navigation bar to be identical to that of my scaffold. However, when I set those colors to be orange (or any other color) they differ slightly even though the exact same color was chosen.

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,
    );
  }
}

What am I missing?

Thank you!

All the best

Answer 1

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);
  }
}

Answer 2

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      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
  void initState() {
    // TODO: implement initState
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.orange,
          systemNavigationBarIconBrightness: Brightness.dark,
          statusBarColor: Colors.orange,
          systemNavigationBarDividerColor: Colors.orange,
        ),
      );
    });
  }

  @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,
      elevation: 0,
      indicatorColor: Colors.white,
    );
  }
}

If you want the system bottom navigation to have the same color as bottomNavigationBar, add the following code:

SystemChrome.setSystemUIOverlayStyle(
  const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.orange,
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarColor: Colors.orange,
    systemNavigationBarDividerColor: Colors.orange,
  ),
)

If you want the bottomNavigationBar to have the same color as the Scaffold background, set elevation to 0.