Getx Theme Change
.png)
Hi Coders,
Hope you all doing great,
This is the 6th part of Flutter Getx Series and in this article we will gonna learn about how to update or change the app theme in Flutter using Getx.
watch this article in youtube 👉 YouTube
Why ?
Getx provide the app theme info so why not to use that as i saw many developers who make variable globally to change theme and call in every screen even when they are using the Getx State Management
so as a developer its our responsibility to share this tip with everyone.
Step 1:
in main file you just need to update the theme and dark theme parameters data as shown below and here i am using default theme so you can update that with your custom and soon i will also upload a new video and article about custom theme change.
main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
locale: const Locale('en', 'US'),
translations: LocalString(),
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
// theme: ThemeData(
// colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
// useMaterial3: true,
// ),
initialRoute: AppPages.initial,
getPages: AppPages.routes,
);
}
}
Step 2:
Here we will make a variable to toggle the value of switch button and method to update the theme
and also getx will provider the best and simple way to check and update theme withoput any complexity
class HomepageController extends GetxController {
final RxInt counter = 0.obs;
int counter2 = 0;
RxBool isDark = false.obs;
//udate theme
updateTheme() {
log("is Dark:--> ${isDark.value}");
log("is Dark from Getx :--> ${Get.isDarkMode}");
Get.changeTheme(Get.isDarkMode ? ThemeData.light() : ThemeData.dark());
// Get.changeThemeMode()
isDark.value = !isDark.value;
update();
}
}
Step 3:
Now its time to update the Ui
Here we will just update the text and and use switch button to update the theme
class HomepageView extends StatelessWidget {
const HomepageView({super.key});
@override
Widget build(BuildContext context) {
// HomepageController homepageController = Get.put(HomepageController());
return GetBuilder(
builder: (HomepageController homepageController) {
return Scaffold(
appBar: AppBar(
title: Text(
homepageController.isDark.value ? "Dark Theme" : "LightTheme"),
actions: [
Switch(
value: homepageController.isDark.value,
onChanged: (value) {
homepageController.updateTheme();
},
)
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"With Rx".tr,
style: const TextStyle(fontSize: 45.0),
),
Text(
"Without Rx".tr,
style: const TextStyle(fontSize: 45.0),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
/// hindi
ElevatedButton(
onPressed: () {
homepageController.changeLanguage(
lang: 'hi', countryCode: 'IN');
},
child: const Text("Hindi")),
// english
ElevatedButton(
onPressed: () {
homepageController.changeLanguage(
lang: 'en', countryCode: 'US');
},
child: const Text("English"))
],
)
],
),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {
homepageController.redirectToTesting();
},
child: const Text("Go to Testing Screen"))
],
),
);
},
);
}
}
