getx
getx copied to clipboard
GetMaterialApp not changing Theming Dynamically
ATTENTION: DO NOT USE THIS FIELD TO ASK SUPPORT QUESTIONS. USE THE PLATFORM CHANNELS FOR THIS. THIS SPACE IS DEDICATED ONLY FOR BUGS DESCRIPTION. Fill in the template. Issues that do not respect the model will be closed.
Describe the bug A clear and concise description of what the bug is.
Reproduction code NOTE: THIS IS MANDATORY, IF YOUR ISSUE DOES NOT CONTAIN IT, IT WILL BE CLOSED PRELIMINARY)
example:
// main.dart
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
home: const First(),
getPages: [
GetPage(name: '/first', page: () => const First()),
GetPage(name: '/second, page: () => const Second()),
],
theme: ThemeData(
textTheme: TextTheme(
displaySmall: const TextStyle(color: Colors.black, fontWeight: FontWeight.w900, fontSize: 38),
),
),
darkTheme: ThemeData.dark().copyWith(
textTheme: TextTheme(
displaySmall: const TextStyle(color: Colors.white, fontWeight: FontWeight.w900, fontSize: 38),
),
),
);
}
To Reproduce Steps to reproduce the behavior:
- Create a Simple Page (First) with some text and apply the displaySmall text theme (example: "First")
- Create a Simple Page (Second) with some text and apply the displaySmall text theme (example: "Second")
- Open your app and try to alter the theme (in iOS use Shift+CMD+A or search for Features > Toggle Appearance at Simulator)
- You will notice that the app text not changed, if you navigate to screen Second or close and reopen the app the theme will be apply. If you change again on page Second, same issue (the issue is that Text and other components doesnt change with theming changing)
Expected behavior Text color should change dynamically when changing system theming it using GetMaterialApp.
Screenshots https://we.tl/t-0e69YkEuBR
Here is a screen record. I have reloaded app in the middle of test (to show same behaviour of closing and reopening makes theme apply or even navigation with GetX).
Flutter Version: Enter the version of the Flutter you are using 3.3.8
Getx Version: 4.6.5
Describe on which device you found the bug: ex: Moto z2 - Android. iOS and Android
Minimal reproduce code Same as example and put:
// First Screen - first.dart
@override
Widget build(BuildContext context) {
return ViewModelBuilder<LoginViewModel>.reactive(
viewModelBuilder: () => _viewModel,
onModelReady: (viewModel) => _viewModel.onModelReady(),
onDispose: (viewModel) => viewModel.onDispose(),
builder: (context, viewModel, child) {
return Scaffold(
body: WillPopScope(
onWillPop: viewModel.onWillPop,
child: SafeArea(
child: Text(
"First",
style: Get.textTheme.displaySmall,
),
),
),
);
},
);
// Second Screen - second.dart
@override
Widget build(BuildContext context) {
return ViewModelBuilder<LoginViewModel>.reactive(
viewModelBuilder: () => _viewModel,
onModelReady: (viewModel) => _viewModel.onModelReady(),
onDispose: (viewModel) => viewModel.onDispose(),
builder: (context, viewModel, child) {
return Scaffold(
body: WillPopScope(
onWillPop: viewModel.onWillPop,
child: SafeArea(
child: Text(
"Second",
style: Get.textTheme.displaySmall,
),
),
),
);
},
);
use context.theme not Get.theme
use context.theme not Get.theme
can you explain better?
Theme.of(context).textTheme.displaySmall
Why do I need to use:
Theme.of(context).textTheme.displaySmall instead of Get.textTheme.displaySmall?
Get.textTheme.displaySmall should retrieve the textTheme without using context.
This seems like a bug if I need to use Theme.of(context).textTheme.displaySmall , since the whole purpose of using GetX is to be able to retrieve everything using the package GetX.
Issue reproducible at:
get: ^4.6.5
This is not an issue nor a bug. Documentation lacks explanations. Replace all instances of Get.theme with context.theme, do the same for textTheme
This is what I observed. When I call the Get.changeThemeMode method followed be Get.forceAppUpdate(), The background and colors of the text where we aren't defining the color like this color: Get.theme.colorScheme.primary changes. But wherever we have defined the color, it doesn't change until either the Page is refreshed, or we do a hot reload.
Text("text", style: Get.textTheme.displayLarge) - Works
Text("text", style: TextStyle()) - Works
Text("text", style: TextStyle(color: Get.theme.colorScheme.primary)) - Only updates on Hot reload or manual page refresh.
Text("text", style: Get.textTheme.displayLarge.copyWith(color: Get.theme.colorScheme.primary)) - Only updates on Hot reload or manual page refresh.
This is what fixed it for me:
Get.changeThemeMode()
await Future.delayed(500ms)
Get.forceAppUpdate()