Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Backgroundcolor NavigationBar and Scaffold differ

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

Tags:

2

Answers


  1. 0 
    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.

    Login or Signup to reply.
  2. 0

    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);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search