getx icon indicating copy to clipboard operation
getx copied to clipboard

GetMaterialApp not changing Theming Dynamically

Open lcsvcn opened this issue 3 years ago • 7 comments

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:

  1. Create a Simple Page (First) with some text and apply the displaySmall text theme (example: "First")
  2. Create a Simple Page (Second) with some text and apply the displaySmall text theme (example: "Second")
  3. Open your app and try to alter the theme (in iOS use Shift+CMD+A or search for Features > Toggle Appearance at Simulator)
  4. 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,
              ), 
            ),
          ),
        );
      },
    );

lcsvcn avatar Nov 18 '22 21:11 lcsvcn

use context.theme not Get.theme

prologikus avatar Dec 13 '22 17:12 prologikus

use context.theme not Get.theme

can you explain better?

lcsvcn avatar Dec 16 '22 15:12 lcsvcn

Theme.of(context).textTheme.displaySmall

twocolors avatar Jan 18 '23 14:01 twocolors

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.

lcsvcn avatar Jan 31 '23 15:01 lcsvcn

Issue reproducible at:

get: ^4.6.5

lcsvcn avatar Mar 01 '23 02:03 lcsvcn

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

princer007-GoS avatar Mar 24 '23 21:03 princer007-GoS

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()

KamathVishak96 avatar Jan 21 '25 10:01 KamathVishak96