Question 76976 in Flutter Question posted in
The official Flutter documentation can be found here.

Getx flutter change theme when i change theme dark and then return light mode its not loading my custom theme

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
enter image description here

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(),
    );
  }
}
Tags:

2

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 0

    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"),
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search