Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes

ThemeData lightTheme = ThemeData(
  useMaterial3: true,
  backgroundColor: Colors.white,
  appBarTheme: AppBarTheme(
    elevation: 1000,
    backgroundColor: Colors.white,
  )
);
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);

Getx flutter when i change theme from light to dark mode and then return to light mode its not returning my custom theme its load old app bar background even theme changes


class _MyMaterialAppState extends State<MyMaterialApp> {

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: appName,
      theme: lightTheme,
      darkTheme: darkTheme,
      translations: Languages(),
      locale: Get.deviceLocale,
      fallbackLocale: const Locale('en', 'US'),
      home: const MyHomePage(),
    );
  }
}

CodePudding user response：

The documentation of GetX Itself says that you should not depend on any higher level widget than GetMaterialApp in order to update it. This can trigger duplicate keys.

I have seen your code and I tried to test this on physical devide and it works perfectly fine.

Here's the code:

import 'package:flutter/material.dart';
import 'package:get/route_manager.dart';

ThemeData lightTheme = ThemeData(
    useMaterial3: true,
    backgroundColor: Colors.white,
    appBarTheme: AppBarTheme(
      elevation: 1000,
      backgroundColor: Colors.white,
    ));
ThemeData darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.red);

void main(List<String> args) {
  runApp(MyMaterialApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: "appName",
      theme: lightTheme,
      darkTheme: darkTheme,
      // translations: Languages(),
      locale: Get.deviceLocale,
      fallbackLocale: const Locale('en', 'US'),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("data"),
      ),
      body: Column(
        children: [
          Center(
            child: TextButton(
              onPressed: () {
                Get.changeTheme(ThemeMode.dark);
                // Get.changeThemeMode(ThemeMode.dark);
              },
              child: Text("Chage"),
            ),
          ),
          Center(
            child: TextButton(
              onPressed: () {
                Get.changeThemeMode(ThemeMode.light);
              },
              child: Text("Chage light"),
            ),
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

Probably, this is because of the GetMaterialApp widget in the build method. Because the build method is called every time the widget is updated, this means that your custom theme will be overwritten. You can do something like this:

class _MyMaterialAppState extends State<MyMaterialApp> {

  GetxController<ThemeData> _themeController = GetxController(lightTheme);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<GetxController<ThemeData>>(
      init: _themeController,
      builder: (_, theme) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: appName,
          theme: theme.value,
          darkTheme: darkTheme,
          translations: Languages(),
          locale: Get.deviceLocale,
          fallbackLocale: const Locale('en', 'US'),
          home: const MyHomePage(),
        );
      },
    );
  }
}

This code uses GetBuilder to listen for changes to the _themeController and update theme property. To change the theme:

_themeController.updateValue(newTheme)