Flutter using Themedata Dark and Lightmode but in first place it should use the Device Setting

Question

theme.dart

import 'package:flutter/material.dart';

final systemTheme = ThemeMode.system;

ThemeData lightMode = ThemeData(
    brightness: Brightness.light,
    colorScheme: ColorScheme.light(
      background: Color.fromARGB(255, 215, 165, 187),
      secondary: Color.fromARGB(255, 215, 165, 187),
    ));

ThemeData darkMode = ThemeData(
    brightness: Brightness.dark,
    colorScheme: ColorScheme.dark(
      background: Colors.grey.shade900,
      secondary: Color.fromARGB(255, 52, 52, 47),
    ));

theme_provider.dart

import 'package:flutter/material.dart';
import 'package:testproject/theme/theme.dart';

class ThemeProvider with ChangeNotifier {
  ThemeData _themeData = lightMode;

  ThemeData get themeData => _themeData;

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

  void toggleTheme() {
    if (_themeData == lightMode) {
      themeData = darkMode;
    } else {
      themeData = lightMode;
    }
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:testproject/models/cart_model.dart';
import 'package:testproject/pages/cart_page.dart';
import 'package:testproject/pages/event_pages/festival.dart';
import 'package:testproject/pages/event_pages/fuji.dart';
import 'package:testproject/pages/event_pages/noodle.dart';
import 'package:testproject/pages/menu_page.dart';
import 'package:testproject/pages/start_page.dart';
import 'package:testproject/theme/theme_provider.dart';

void main() {
 runApp(
   MultiProvider(
     providers: [
       ChangeNotifierProvider(
         create: (context) => CartModel(),
         child: const MyApp(),
       ),
       ChangeNotifierProvider(
         child: const MyApp(),
         create: (context) => ThemeProvider(),
       )
     ],
     child: const MyApp(),
   ),
 );
}

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

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: StartPage(),
     theme: Provider.of<ThemeProvider>(context).themeData,
     routes: {
       '/startpage': (context) => StartPage(),
       '/menupage': (context) => MenuPage(),
       '/festivalpage': (context) => FestivalPage(),
       '/noodlepage': (context) => NoodlePage(),
       '/mountfujipage': (context) => MountFuji(),
       '/cartpage': (context) => CartPage(),
     },
   );
 }

In my Pages I can change between light and dark mode, that works great. I now want to add, that before the button got pressed the system Settings are used as standard.

Case: User Device is in dark mode, he opens the app now the app should start in darkmode too. User wants to change into lightmode, he an use the button.

How the code is, is that the app always starts in lightMode.

I hope my question is understandable, if you need other quotes from my code let me know.

Answer 1

Try changing the themeMode instead of the theme data.

Theme provider: This should set theme mode to system by default. ThemeMode.system is an enum, so it doesn't show whether it's dark or light. Brightness is used here instead, mentioned here.

class ThemeProvider with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme(BuildContext context) {
    if (Theme.of(context).brightness == Brightness.dark) {
      _themeMode = ThemeMode.light;
    } else {
      _themeMode = ThemeMode.dark;
    }
    notifyListeners();
  }
}

Material app should look like this:

MaterialApp(
  theme: lightMode,
  darkTheme: darkMode,
  themeMode: Provider.of<ThemeProvider>(context).themeMode,
...

Call toggle like so:

 Provider.of<ThemeProvider>(context, listen: false).toggleTheme(context);