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?