Flutter Theme Flickers Briefly Before Switching to Light Mode

Question

I'm experiencing an issue in my Flutter app where the theme momentarily flickers to dark mode before switching to the correct light mode upon hot restart and app launch. I'm utilizing SharedPreferences to persist the theme preference and Bloc for state management.

Cubit class:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:shared_preferences/shared_preferences.dart';

class ThemeModeCubit extends Cubit<ThemeMode> {
  ThemeModeCubit() : super(ThemeMode.dark) {
    _loadThemeMode(); // Load saved theme mode on initialization
  }

  void _loadThemeMode() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    bool isDark = sharedPreferences.getBool('isDark') ??
        false; // Default to light if not saved
    emit(isDark ? ThemeMode.dark : ThemeMode.light);
  }

  void toggleModes() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    if (state == ThemeMode.dark) {
      emit(ThemeMode.light);
      sharedPreferences.setBool('isDark', false);
    } else {
      emit(ThemeMode.dark);
      sharedPreferences.setBool('isDark', true);
    }
  }
}

Main class:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:notes_revision/cubits/theme_mode_cubit.dart/theme_mode_cubit.dart';
import 'package:notes_revision/views/home_view.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ThemeModeCubit(),
      child: Builder(builder: (context) {
        return BlocBuilder<ThemeModeCubit, ThemeMode>(
          builder: (context, state) {
            return MaterialApp(
              title: 'Notes App',
              darkTheme: ThemeData.dark(),
              themeMode: state,
              debugShowCheckedModeBanner: false,
              home: const HomeView(),
            );
          },
        );
      }),
    );
  }
}

Home view:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:notes_revision/cubits/theme_mode_cubit.dart/theme_mode_cubit.dart';
import 'package:notes_revision/widgets/notes_item.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            BlocProvider.of<ThemeModeCubit>(context).toggleModes();
          },
          icon: Icon(Icons.toggle_off),
        ),
        title: const Text('Notes'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return const NotesItem();
        },
      ),
    );
  }
}

I did try to :

1. Set default mode to light.
2. turn on dark mode in system settings.

Changing the system theme and default app theme did nothing to fix the flicker.