Flutter bottom navigation bar background color issue

Question

I'm working on Dark Theme and Light theme in my Flutter project. The issue that I'm having is some reason when ever a user installed the app for the first time, the screen background is white and which is good but the problem is at the bottom navigation bottom bar background.

It's in Dark theme for some reason. It work normal only after I switch back and forth in my App setting.

I'm trying to debug what might be the issue but couldn't figure out yet so I would be really appreciated if I can get any help or suggesiton.

Dashboard.dart

  Widget build(BuildContext context) {
    provider.Provider.of(context).themeGetter();

    return Scaffold(
      key: _scaffoldKey,
      body: PersistentTabView(
        context,
        controller: controller,
        confineInSafeArea: true,
        backgroundColor:
            provider.Provider.of(context, listen: true)
                    .themeSwitch
                ?Colors.white
                : Color(0xff151515),     
        handleAndroidBackButtonPress: true,
        resizeToAvoidBottomInset: true,
        stateManagement: true,
        navBarStyle: NavBarStyle.simple,
        items: _navBarsItems(),
        screens: [
          Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: Home()),
          Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: Schedule()),
          Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: SmallGroup()),
          Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: SpeakerInfo()),
          Container(
              color: Colors.white,
              height: MediaQuery.of(context).size.height,
              child: Account()),
        ],
      ),
    );

Provider_files.dart


import 'package:flutter/foundation.dart';
import 'package:hive/hive.dart';
import 'package:path_provider/path_provider.dart';

class ProviderFiles extends ChangeNotifier {
  late bool themeSwitch = true;
  themeGetter() async {
    var dir = await getApplicationDocumentsDirectory();
    Hive.init(dir.path);
    var box = await Hive.openBox('appBox');
    var color = await box.get('color');
    print('theme switch ' + themeSwitch.toString());
    if (color == 'light') {
      // print('test 1 light');
      themeSwitch = true;
      notifyListeners();
    } else {
      // print('test 1 dark');
      themeSwitch = false;
      notifyListeners();
    }
  }

  switching(String cl) async {
    if (cl == 'dark') {
      themeSwitch = false;
      notifyListeners();
    } else {
      themeSwitch = true;
      notifyListeners();
    }
  }
}

user_7822730 · Answer

It appears that you are only setting background color on theme switch using this code

provider.Provider.of(context, listen: true)
                    .themeSwitch
                ?Colors.white
                : Color(0xff151515),

The way I'm understanding it is that this listens for theme switch but on initial load there was no theme switch so it defaults to the false portion of that statement which would be your darkmode color. I would try using something similar to

Theme.of(this).brightness == Brightness.dark;

below with out context (can be used in init state of main app)

var brightness = SchedulerBinding.instance!.window.platformBrightness;
 bool isDarkMode = brightness == Brightness.dark;

or even

 var brightness = MediaQuery.of(context).platformBrightness;
 bool isDarkMode = brightness == Brightness.dark;

First and last one do required build context to work properly though. The first one I use and have in a build context extensions file where this is typically context.

Flutter bottom navigation bar background color issue

1 Answers