Bottom sheet content not reacting to theme change

[mdccxv]

Describe the bug I am using Get.bottomSheet to contain a widget with some app settings, including a toggle for light/dark theme. Get.changeTheme is used for theme change. When the theme is toggled the screen underneath the bottom sheet changes appearance, but the bottom sheet does not.

Reproduction code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('This shows bottom sheet'),
            onPressed: () {
              Get.bottomSheet(BottomSheetContent());
            },
          ),
        ),
      ),
    );
  }
}

class BottomSheetContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).scaffoldBackgroundColor,
      height: 300,
      child: Center(
        child: RaisedButton(
          child: Text('This toggles the theme'),
          onPressed: () => Get.changeTheme(
            Get.isDarkMode ? ThemeData.light() : ThemeData.dark(),
          ),
        ),
      ),
    );
  }
}

To Reproduce

1. Click 'This shows bottom sheet', bottom sheet will appear.
2. Click on 'This toggles the theme'
3. Observe the theme changing in the background view, but not on the bottom sheet itself

Expected behavior Theme change should apply to the content of bottom sheet

Flutter Version: 1.22.6

Getx Version: 3.24.0

Describe on which device you found the bug: iPhone 12 Pro Max

[oliverbytes]

I second this. Patiently waiting for a fix

[JonathanRhein]

Same here, any solution available?

[mdccxv]

@JonathanRhein I ended up using just a regular showModalBottomSheet instead of Get.bottomSheet. Didn't find a solution though

[JonathanRhein]

@mdccxv Thank you! Yes, I will have to do the same which is a bit unfortunate... let's hope there comes a fix soon :-) How do you make the modalBottomSheet reactive to theme changes without using setState() or a StatefulBuilder in this case? showModalBottomSheet cannot be wrapped with GetBuilder in order to be updated on update()...

[mdccxv]

@JonathanRhein Get.changeThemeMode works well provided you have set up theme and darkTheme in your GetMaterialApp. It works globally on all the widgets in your app, including modalBottomSheet you're calling the change from.

[JonathanRhein]

That is what I did and all other widgets are updated accordingly when I call Get.changeThemeMode, but for some reason it does not change the backgroundColor property of showModalBottomSheet. So I specified a Container in the builder of the showModalBottomSheet to contain all rest of my bottomSheet and made this Container's color property the theme dependent color (using Get.context.theme.scaffoldBackgroundColor) and it works now. Don't understand though why using backgroundColor of showModalBottomSheet does not work... but thank you for your help @mdccxv!!

[przbadu]

In this example I am checking if Dark mode is available and setting Container background color accordingly. In next example I just used container inside Bottom sheet without any additional theme configuration (second screencast).

Get.bottomSheet(
  Container(
    child: Wrap(
      children: [
        ListTile(
          leading: const Icon(Icons.wb_sunny_outlined),
          title: Text('Light Theme'),
          onTap: () => {Get.changeTheme(ThemeData.light())},
        ),
        ListTile(
          leading: const Icon(Icons.wb_sunny),
          title: Text('Dark Theme'),
          onTap: () => {Get.changeTheme(ThemeData.dark())},
        )
      ],
    ),
  ),
  backgroundColor:
      Get.isDarkMode ? Colors.black : Colors.white);
},

Result:

[Faiz-rhm]

any updates on this issue??

[Ugikie]

Also having the same issue with this setup... haven't found a fix if anyone has one please share!

[Souhaibbek]

any updates for this issue ?

[Zheer03]

Any updates on this issue ?

[tom-xy]

Any updates on this issue?

[tom-xy]

My solution: Wrap the Get.bottomSheet() function

// [Bottom sheet content not reacting to theme change](https://github.com/jonataslaw/getx/issues/1084)
Future<T?> showAppBottomSheet<T>(
  Widget bottomsheet, {
  RouteSettings? settings,
}) {
  return Get.bottomSheet<T>(
    Builder(builder: (context) {
      final ThemeData data;
      switch (MediaQuery.of(context).platformBrightness) {
        case Brightness.dark:
          data = darkTheme();
          break;
        case Brightness.light:
          data = lightTheme();
          break;
      }
      return Theme(data: data, child: bottomsheet);
    }),
    backgroundColor: Colors.transparent,
    isScrollControlled: true,
    settings: settings,
  );
}

[saprahits]

I am also facing the same issue with using Get.bottomSheet. The above solution isn't effective when using a bottom navigation bar. Could you please provide an alternative solution?

[kriem2000]

Any solution provided yet ?

[kriem2000]

I just wrapped my widget inside the Get.bottomSheet with the StatefulBuilder provided by flutter and uses the setModalState only for that scope solved the problem...

Get.bottomSheet(
      StatefulBuilder(
        builder: (BuildContext context, StateSetter setModalState) {
          return Container(
            child: IconButton(
              onPressed: () {
                // your bottomSheet reactive logic
                setModalState(() {
                  // ...
                });
                // your parent widget reactive logic
                setState(() {
                  // ...
                });
              },
              icon: const Icon(Icons.abc),
            ),
          );
        },
      ),
    );

[AmirAshvins]

I am still facing the same issue at this time. This is truly frustrating, though there are multiple ways of getting around it; the time it takes to just understand that the issue stems from Get's is indeed wasted.

Hope we can get an update on this matter