getx icon indicating copy to clipboard operation
getx copied to clipboard

Get.changeTheme is not working when the device is in dark mode

Open lurcas opened this issue 4 years ago • 9 comments

Describe the bug Get.changeTheme is not working when the device is in dark mode. Tested on Android devices.

Reproduction code

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    Get.changeTheme(_counter.isEven ? ThemeData.dark() : ThemeData.light());
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

To Reproduce Steps to reproduce the behavior:

  1. Create Flutter Starter Project
  2. Add Getx 4.1.4
  3. Change MaterialApp with GetMaterialApp
  4. Add Get.changeTheme(_counter.isEven ? ThemeData.dark() : ThemeData.light()); to the _incrementCounter() method

Expected behavior When the device is not in dark mode, the app works as expected. In dark mode changing the theme is not working.

Flutter Version: Channel stable, 2.0.6

Getx Version: 4.1.4

Describe on which device you found the bug: Pixel 4 (API 30), Android Studio Emulator (Pixel C (API 29), Pixel 4 (API 30))

lurcas avatar May 08 '21 22:05 lurcas

I can confirm that this also happens on iOS with activated dark mode.

When dark mode is active on an iOS device, the Theme of the app won't change when using Get.changeTheme(themeData). As soon as the iOS device is changed to the light mode, the change of the theme works as expected.

jonaspoxleitner avatar May 25 '21 06:05 jonaspoxleitner

The behaviour is similar for the web as well. Thought might just add that here. And a deprecation warning comes up when switching from light to dark

Warning: The support for configuring the foreground color of FloatingActionButtons using ThemeData.accentIconTheme has been deprecated. Please use ThemeData.floatingActionButtonTheme instead. See https://flutter.dev/go/remove-fab-accent-theme-dependency. This feature was deprecated after v1.13.2.
Warning: The support for configuring the foreground color of FloatingActionButtons using ThemeData.accentIconTheme has been deprecated. Please use ThemeData.floatingActionButtonTheme instead. See https://flutter.dev/go/remove-fab-accent-theme-dependency. This feature was deprecated after v1.13.2.
Warning: The support for configuring the foreground color of FloatingActionButtons using ThemeData.accentIconTheme has been deprecated. Please use ThemeData.floatingActionButtonTheme instead. See https://flutter.dev/go/remove-fab-accent-theme-dependency. This feature was deprecated after v1.13.2.
Warning: The support for configuring the foreground color of FloatingActionButtons using ThemeData.accentIconTheme has been deprecated. Please use ThemeData.floatingActionButtonTheme instead. See https://flutter.dev/go/remove-fab-accent-theme-dependency. This feature was deprecated after v1.13.2.

ashishbeck avatar Jun 25 '21 07:06 ashishbeck

I found a temporary solution, GetMaterialApp( //Add this line: themeMode: ThemeMode.light, )

vicentemrb avatar Jun 28 '21 00:06 vicentemrb

But I need it to default to ThemeMode.dark and this isn't working as of now. When I try to use Get.changeTheme after setting ThemeMode.dark as themeMode in GetMaterialApp, nothing works ! I was losing my mind until I decided to come and check for issues here.

I'm using v4.3.6

bossbeagle1509 avatar Aug 12 '21 11:08 bossbeagle1509

But I need it to default to ThemeMode.dark and this isn't working as of now. When I try to use Get.changeTheme after setting ThemeMode.dark as themeMode in GetMaterialApp, nothing works ! I was losing my mind until I decided to come and check for issues here.

I'm using v4.3.6

set the theme to dark and themeMode to light. Works on me.

theme: ThemeData.dark(),
themeMode: ThemeMode.light,

alfancodes avatar Jan 24 '22 23:01 alfancodes

I think it is a version 4 bug.

There is no way to reproduce this problem in latest release candidate

jonataslaw avatar Apr 04 '23 19:04 jonataslaw

I found a temporary solution, GetMaterialApp( //Add this line: themeMode: ThemeMode.light, )

This works. Setting the themeMode to either dark or light works like a charm.

aivantuquero avatar Oct 05 '23 12:10 aivantuquero

this happings to me now. if themeMode is dark when initialized, Get.changeTheme to light is not working.

themeMode: isDark ? ThemeMode.dark : ThemeMode.light,

main.dart

import 'dart:io';

import 'package:echo_cloud/consts/config.dart';
import 'package:echo_cloud/pages/chat/index.dart';
import 'package:echo_cloud/pages/index/index_page.dart';
import 'package:echo_cloud/pages/me/index.dart';
import 'package:echo_cloud/pages/take_photos/index.dart';
import 'package:echo_cloud/routes/app_routes.dart';
import 'package:echo_cloud/theme/app_themes.dart';
import 'package:echo_cloud/utils/methods/audio_service.dart';
import 'package:echo_cloud/utils/methods/storage.dart';
import 'package:echo_cloud/utils/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await StorageHelper.init();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Future<bool> _loadTheme() async {
    return StorageHelper.getBool(Config.darkModeKey) ?? false;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: _loadTheme(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const MaterialApp(
            home: Scaffold(body: Center(child: CircularProgressIndicator())),
          );
        }

        // Get theme config
        bool isDark = snapshot.data ?? false;

        return ScreenUtilInit(
          designSize: const Size(393, 852),
          minTextAdapt: true,
          splitScreenMode: true,
          builder: (_, child) {
            return GetMaterialApp(
              title: 'CloudEcho',
              theme: AppTheme.lightTheme,
              darkTheme: AppTheme.darkTheme,
              themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
              getPages: AppPage.routes,
              defaultTransition: Transition.rightToLeft,
            );
          },
        );
      },
    );
  }
}

thatsgolden avatar Dec 13 '24 13:12 thatsgolden