Saving theme in flutter with Hive

Question

so i tried changing theme with provider and heres my main.dart

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:provider/provider.dart';
import 'package:themetestnew/homepage.dart';
import 'package:themetestnew/theme/theme_provider.dart';


void main() async {
  await Hive.initFlutter();
  await Hive.openBox('myBox');
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProviderNew(),
      child: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      theme: Provider.of<ThemeProviderNew>(context).themeData,
    );
  }
}

and this is my theme provider

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:themetestnew/theme/theme.dart';

class ThemeProviderNew with ChangeNotifier {
  final _myBox = Hive.box('myBox');
  bool chosenTheme = false;
  ThemeData _themeData = lightMode;

  ThemeData get themeData => _themeData;

  set themeData(ThemeData themeData) {
    _themeData = themeData;
    notifyListeners();
  }

  void toggleTheme() {
    if (themeData == lightMode) {
      themeData = darkMode;
      chosenTheme = false;
    } else {
      themeData = lightMode;
      chosenTheme = true;
    }
    _myBox.put('theme', chosenTheme);
  }
}

how can i save theme and load it at start? i used hive to save a bool but can load theme based on that bool at start i can only change it with a button

Answer 1

with some little changes it worked because hive cant store ThemeData

ThemeProviderNew() {
    // if the saved theme is null return the default theme otherwise return the saved one.
    chosenTheme = _myBox.get('theme') ?? true;
    if (chosenTheme) {
      _themeData = lightMode;
    } else {
      _themeData = darkMode;
    }
  }

Answer 2

Just add this line of code inside your class constructor to load the saved theme on app first launch.

_themeData = _myBox.get('theme') ?? lightMode;
chosenTheme = _themeData == lightMode;

Check full code below.

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:themetestnew/theme/theme.dart';

class ThemeProviderNew with ChangeNotifier {
  ThemeProviderNew() {
    // if the saved theme is null return the default theme otherwise return the saved one.
    _themeData = _myBox.get('theme') ?? lightMode;
    chosenTheme = _themeData == lightMode;
  }

  final _myBox = Hive.box('myBox');
  bool chosenTheme = false;
  ThemeData _themeData = lightMode;

  ThemeData get themeData => _themeData;

  set themeData(ThemeData themeData) {
    _themeData = themeData;
    notifyListeners();
  }

  void toggleTheme() {
    if (themeData == lightMode) {
      themeData = darkMode;
      chosenTheme = false;
    } else {
      themeData = lightMode;
      chosenTheme = true;
    }
    _myBox.put('theme', chosenTheme);
  }
}