Theme not working on flutter web

[Macacoazul01]

I can't customize both my light and dark themes on flutter web. Even changing the colors the app is stuck with the default options.

Also changing the theme only works if i set themeMode: ThemeMode.light, on GetMaterialApp

Currently using get: 4.6.5 with flutter: 3.0.5

My flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [versao 10.0.22000.795], locale pt-BR)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.69.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

Sample code:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      themeMode: ThemeMode.light,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.red,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> 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: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

[Macacoazul01]

on android the theme changing button works without the themeMode: ThemeMode.light, on GetMaterialApp

But the color isnt changing

[Macacoazul01]

Noticed something bizarre changing the code.

Right after the start, changing blue to amber:

Clicked on the button, it changed to dark but not with the expected color:

After clicking again on the button, it should return to the yellow theme. Instead it became blue:

[8138976373]

i think. you need to change color property of app bar using ThemeData

ThemeData( dividerColor: darkBlueColor, primaryColor: darkBlueColor, primaryColorDark: white, selectedRowColor: blueColor, cardColor: cardColordark, canvasColor: canvasbgdarkColor, splashColor: splashColordark, secondaryHeaderColor: tableRow1Color, hoverColor: tableRow2Color, unselectedWidgetColor: Colors.white,

// ignore: deprecated_member_use buttonColor: cardBlueColor, primaryTextTheme: const TextTheme( bodyText1: TextStyle( fontWeight: FontWeight.w500, color: white, fontSize: 13, ), ), textTheme: const TextTheme( headline1: TextStyle( fontWeight: FontWeight.w600, color: white, fontSize: 16, ), headline2: TextStyle( fontWeight: FontWeight.w500, color: white, fontSize: 15, ), subtitle1: TextStyle( fontWeight: FontWeight.w500, color: white, fontSize: 15, ), subtitle2: TextStyle( fontWeight: FontWeight.w500, color: white, fontSize: 14, ), bodyText1: TextStyle( fontWeight: FontWeight.w500, color: white, fontSize: 13, ), bodyText2: TextStyle( fontWeight: FontWeight.w500, color: white, fontSize: 10, ), ), iconTheme: const IconThemeData(color: white, size: 15), bottomNavigationBarTheme: const BottomNavigationBarThemeData( selectedIconTheme: IconThemeData(color: black, size: 12), unselectedIconTheme: IconThemeData(color: midGrey, size: 10), selectedLabelStyle: TextStyle( fontSize: 12, color: black, fontWeight: FontWeight.w500, ), unselectedLabelStyle: TextStyle( fontSize: 12, color: midGrey, fontWeight: FontWeight.w500, )), appBarTheme: const AppBarTheme( elevation: 0, backgroundColor: black, titleTextStyle: TextStyle( fontWeight: FontWeight.w600, color: black, fontSize: 19, ), ), tabBarTheme: const TabBarTheme( labelStyle: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 16, ), unselectedLabelStyle: TextStyle( fontWeight: FontWeight.w500, color: midGrey, fontSize: 16, ), ), scaffoldBackgroundColor: darkBlueColor, ); ThemeData lightTheme = ThemeData( dividerColor: dividerColor, primaryColor: white, primaryColorDark: black, selectedRowColor: blueColor, cardColor: cardbgColor, canvasColor: white, splashColor: blueColor, secondaryHeaderColor: tableRow1ColorLite, hoverColor: tableRow2Colorlite, unselectedWidgetColor: Colors.black,

primaryTextTheme: const TextTheme( bodyText1: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 14, ), ), textTheme: const TextTheme( headline1: TextStyle( fontWeight: FontWeight.w600, color: black, fontSize: 13, ), headline2: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 15, ), subtitle1: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 14, ), subtitle2: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 13, ), bodyText1: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 13, ), bodyText2: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 10, ), ), iconTheme: const IconThemeData(color: midGrey, size: 15), bottomNavigationBarTheme: const BottomNavigationBarThemeData( selectedIconTheme: IconThemeData(color: black, size: 12), unselectedIconTheme: IconThemeData(color: midGrey, size: 10), selectedLabelStyle: TextStyle( fontSize: 12, color: black, fontWeight: FontWeight.w500, ), unselectedLabelStyle: TextStyle( fontSize: 12, color: midGrey, fontWeight: FontWeight.w500, )), appBarTheme: const AppBarTheme( elevation: 0, titleTextStyle: TextStyle( fontWeight: FontWeight.w600, color: black, fontSize: 19, ), ), tabBarTheme: const TabBarTheme( labelStyle: TextStyle( fontWeight: FontWeight.w500, color: black, fontSize: 16, ), unselectedLabelStyle: TextStyle( fontWeight: FontWeight.w500, color: midGrey, fontSize: 16, ), ), scaffoldBackgroundColor: lightbgColor, );

[Macacoazul01]

@8138976373 I'm already using themeData as shown on the samples above

[8138976373]

I think your problem is color of appbar did not changed yet. I sujjest change to appbar theme like

appBarTheme: appBarTheme,

Example:. appBarTheme: AppBarTheme( color: Colors.transparent, brightness: Brightness.light, elevation: 0, //I want the defaults, which is why I'm copying an 'empty' ThemeData //perhaps there's a better way to do this? textTheme: theme.textTheme, iconTheme: theme.iconTheme, ),

On Tue, Jul 26, 2022, 5:46 AM Gian @.***> wrote:

@8138976373 https://github.com/8138976373 Im already using themeData` as shown on the samples above

— Reply to this email directly, view it on GitHub https://github.com/jonataslaw/getx/issues/2462#issuecomment-1194805433, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIJSLXZNTAMKWMJ637FKYUDVV4U5DANCNFSM54F2QPAQ . You are receiving this because you were mentioned.Message ID: @.***>

[Macacoazul01]

@jonataslaw the only way of solving the problem was explicit setting the theme on the function with final variables instead of ThemeData.dark() and ThemeData.light()

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

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

final tema1 = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.red,
  appBarTheme: AppBarTheme(color: Colors.amber)
);

final tema2 = ThemeData(
  brightness: Brightness.dark,
  appBarTheme: AppBarTheme(color: Colors.red)
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      themeMode: Theme.of(context).brightness == Brightness.dark ? ThemeMode.dark : ThemeMode.light,
      theme: tema1,
      darkTheme: tema2,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    Get.changeTheme(_counter.isEven ? tema2 : tema1);
    setState(() {
      _counter++;
    });
  }

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

[Macacoazul01]

I think your problem is color of appbar did not changed yet. I sujjest change to appbar theme like appBarTheme: appBarTheme, Example:. appBarTheme: AppBarTheme( color: Colors.transparent, brightness: Brightness.light, elevation: 0, //I want the defaults, which is why I'm copying an 'empty' ThemeData //perhaps there's a better way to do this? textTheme: theme.textTheme, iconTheme: theme.iconTheme, ),

@8138976373 it isn't:

Noticed something bizarre changing the code.

Right after the start, changing blue to amber:

[lcsvcn]

Same issue here.

System theming (ThemeMode.system) is not changing the theme for the initial screen on web application. Enforcing theme with ThemeMode.light and ThemeMode.dark are still working. But I want to use system theming and atm that is not working for the initial screen.

If I do navigate to any screen from initial screen, the system theming works perfectly. Only from initial screen that is not working.

That issue started when I added GetPages and started using Get to navigate in my app.

I was using before a simple implementation of Flutter Navigator with named routes and it was working.

Before:

GetMaterialApp(
...
initialRoute: RouteName.HOME,
onGenerateRoute: RouteGenerator.generateRoute,
...
),

After:

GetMaterialApp(
...
home: const Home(),
getPages: [
  GetPage(name: '/screen1', page: () => const Screen1()),
  GetPage(name: '/screen2', page: () => const Screen2()),
],
...
),

Hope these info is helpful to debug the cause of this issue :)

[Macacoazul01]

@lcsvcn if you remove the const parameter from the Getpage and the widget it works?

[lcsvcn]

@lcsvcn if you remove the const parameter from the Getpage and the widget it works?

Using this:

GetMaterialApp(
...
home:  Home(),
getPages: [
  GetPage(name: '/screen1', page: () =>  Screen1()),
  GetPage(name: '/screen2', page: () =>  Screen2()),
],
...
),

or

GetMaterialApp(
...
home:  Home(),
getPages: [
  GetPage(name: '/screen1', page: () =>  const Screen1()),
  GetPage(name: '/screen2', page: () =>  const Screen2()),
],
...
),

System theming works, but not as intended. It shows inverted theming.

For example:

• If dark system theming is selected, it shows the light theme.
• If light system theming is selected, it shows the dark theme.

Again, this happens only for the initial screen. Other screens are not affected.

[Macacoazul01]

Can you send a sample zip app here, so then i can help you testing? If you force the theme on the first screen instead of depending only on the GetMaterialApp, it works?

[razfazz]

i have the same issue on Flutter Web Get.changeTheme is doing nothing

[Macacoazul01]

👀

[lcsvcn]

Can you send a sample zip app here, so then i can help you testing? If you force the theme on the first screen instead of depending only on the GetMaterialApp, it works?

I dont have a zip file that I can share. But you can try the code I provided. I am still having issues.