Flutter changing theme using GetX?

Question

I made a changeable theme in flutter and later I made multi-language support, I used getx for theme switching, I used easy_localization for language change. When I use GetMeterialapp on the main page, it doesn't work, when I do Meterialapp it works multi-language, but the theme change does not work. import 'package:get/get.dart' on another page; i am using and when i use easy_localization here easy_localization is not working. I'm canceling getx is working. I couldn't get out of this situation. If I can't solve it, I will either give up without changing the theme or multi-language support.


     await EasyLocalization.ensureInitialized();
  runApp(EasyLocalization(supportedLocales: [
    Locale("en", "US"),
    Locale("tr", "TR"),
  ], path: "assets/Language", saveLocale: true, child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Home Page',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      theme: Themes.light,
      darkTheme: Themes.dark,
      themeMode: ThemeService().theme,
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

score 0 · Answer 1 · answered Jan 18 '22 at 09:14

Initialize GetStorage inside main method.

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await GetStorage.init(); 
  runApp(MyApp());
}

Create storage object.

final storage = GetStorage();

Set a default value if storage is null.

storage.writeIfNull('darkmode', false);

Read the theme mode value.

bool isDarkMode = storage.read('darkmode');

Apply the theme mode.

Switch(
 value: isDarkMode ,
 onChanged: (value) => storage.write('darkmode', value),
)

Full code:

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

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await GetStorage.init();  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final storage = GetStorage();  

  @override
  Widget build(BuildContext context) {
    appdata.writeIfNull('darkmode', false);
    return SimpleBuilder(
      builder: (_)
      {
        bool isDarkMode = storage.read('darkmode');
        return GetMaterialApp(
          theme: isDarkMode ? ThemeData.dark() : ThemeData.light(),
          home: Scaffold(
            appBar: AppBar(title: Text("Getx Dynamic theme change"),),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(isDarkMode ? 'images/night.png' :'images/day.png' ,width: 100,height: 100,),
                  Switch(
                    value: isDarkMode ,
                    onChanged: (value) => storage.write('darkmode', value),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

Flutter changing theme using GetX?

1 Answers1