Checkbox does not render properly when MacosApp.theme is set

[driftwoodstudio]

Description

When .theme property is set when declaring MacosApp() widget, it causes checkbox rendering to be wrong when checkbox is true/on.

I have verified the the example app renders a "checked" checkbox fine when no .theme value is specified for MacosApp() widget.

Steps To Reproduce

1. Edit your own macos_ui example file: /example/lib/main.dart
2. Find declaration of of MacosUIGalleryApp() [currently line 39 in file]
3. Find instance of MacosApp() inside that widget's build [currently line 48 in file]
4. Add the following line to the MacosApp parameter list:
5. " theme: MacosThemeData.light(), "
6. Run the example
7. In the Buttons page, find the checkbox instances
8. Check the first checkbox so it is on/true
9. Observe that rendering of "on" state is incorrect
10. Observe that this happens whether app is in light or dark mode

Code sample

macos_ui/example/lib/main.dart
Starting at line 39:

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => AppTheme(),
      builder: (context, _) {
        final appTheme = context.watch<AppTheme>();
        return MacosApp(

          theme: MacosThemeData.light(),   //        <-- ADD THIS LINE
          
          title: 'macos_ui Widget Gallery',
          themeMode: appTheme.mode,
          debugShowCheckedModeBanner: false,
          home: const WidgetGallery(),
        );
      },
    );
  }
}

Expected behavior

When I add this line, rendering of checkbox should not change.

Actual behavior
Checkbox appears with fully white interior. Looks like it might actually be trying to render a white circle (?). The expected checkmark icon does not appear.

Screenshots

When example is run unmodified (no .theme value specified for MacosApp() widget):

When MacosApp( ... theme: MacosThemeData.light(), ...) is added:

Logs

Log text volume is too long to include in this issue report (can't submit). I can get them to you by email or something if needed. There are no errors.

This is your own Example application, so you can of course generate the log yourself.

ill@Mac-Mini-M2-Pro example % flutter analyze
Analyzing example...                                                    

   info • The import of 'package:flutter/material.dart' is unnecessary because all of the used elements are also provided by the import of 'package:flutter/cupertino.dart' •
          lib/pages/sliver_toolbar_page.dart:2:8 • unnecessary_import

1 issue found. (ran in 1.2s)
bill@Mac-Mini-M2-Pro example % 

bill@Mac-Mini-M2-Pro example % flutter doctor -v
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.1.1 24B91 darwin-arm64, locale en-US)
    • Flutter version 3.27.1 on channel stable at /Users/bill/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (9 weeks ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/bill/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.97.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.104.0

[✓] Connected device (4 available)
    • iPhone Mini (mobile)            • 00008101-001E6D9A0188001E • ios            • iOS 18.3.1 22D72
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 132.0.6834.111

[✓] Network resources
    • All expected network resources are available.

• No issues found!
bill@Mac-Mini-M2-Pro example % 

[driftwoodstudio]

Note: I poked around in the source, traced while running in debugger, but couldn't find any obvious reason for this behavior. As far as I could see, values for checkbox graphic, fill color generation and icon selection seemed to be "fine".

I'd be happy to fix this and submit a pull request, but I can't find the issue on my own.

[Adrian-Samoticha]

Wait a second, why is your checkbox red when all other widgets are blue?

[driftwoodstudio]

Sorry! Red I put in to make it easier to see what I was referring to in screenshots. Meant to mention in my comments, and forgot. I can see how that would raise a red flag (if you'll pardon the pun).

Modified:

lib/src/buttons/checkbox.dart : 115 
    accentColor: accentColor,
to
    accentColor: AccentColor.red,

Full context: 

class MacosCheckbox extends StatelessWidget {
  ...
  build() {
    ...
    return GestureDetector(
    ...
    child: SizedBox.expand(
      ...
       child: _DecoratedContainer(
         accentColor: AccentColor.red,
         isDisabled: isDisabled,
         ...
  }
}

I changed that only for the screenshot. No other mods to source files.

If you run your sample project with my added Theme line and don't see the behavior, that in itself would be interesting. But I tested both by using as a dependency in my own project, and with cloned stand-alone download of the full repo by running that example code directly. Same behavior.

Lots of debugging and experimenting to eventually figure out what the source of the issue was, but don't know how directly the MacosWindow + Theme connects directly to the actual underlying issue. May just be triggering some infrequently used bit of code elsewhere.

Edits: fixed wording/spelling.

[driftwoodstudio]

Additional information from further testing:

If I add the line to MacosWindow declaration as:

        return MacosApp(

          theme: MacosThemeData.light(),   //        <-- ADD THIS LINE
          
          title: 'macos_ui Widget Gallery',
          themeMode: appTheme.mode,
          debugShowCheckedModeBanner: false,
          home: const WidgetGallery(),
        );

Then it has two notable effects:

1. The checkbox rendering, as described in this issue report
2. Accent color of all controls changed from my mac's system setting (green) to Blue

I think (2) is expected, as it creates a default theme instance with default Blue accent color setting.

But even if I change the Theme accent color as follows, all controls in example still render in Blue rather than the specified (and system setting) color Green:

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => AppTheme(),
      builder: (context, _) {
        final appTheme = context.watch<AppTheme>();
        return MacosApp(
          
          // theme: MacosThemeData.light(),
          theme: MacosThemeData(
            brightness: Brightness.light,
            accentColor: AccentColor.green,   //          <-- Attempt to specify color
          ),

          title: 'macos_ui Widget Gallery',
          themeMode: appTheme.mode,
          debugShowCheckedModeBanner: false,
          home: const WidgetGallery(),
        );
      },
    );
  }

Mac blue is lovely... but if I specify a theme value then it should either inherit my system setting (green) as the default, or at least let me specify a value explicitly. Neither works. If I set any .theme value at all, I get Blue.

[Adrian-Samoticha]

I unfortunately currently have little bandwidth to tend to this issue, but if what you’re trying to achieve is simply changing the accent color of the app, you can follow this guide to do so.

If you’re trying to override the lightness of the app, the radio buttons in the example seem to do just that (correctly, as far as I can tell), so you could just check how they’re implemented.

[driftwoodstudio]

I understand. Not a paid job, and it's a community contribution as-is, so certainly not entitled to any demand on your time.

[Edit: removed comment that starts a different discussion. Separate issue.]

I understand there's no time to work on this, but if someone could confirm that adding the theme line causes the issue with the checkbox, that would help. That would let me know whether it's an actual issue, or "just me."

Also: no, not trying to change the accent color. Accent color was just to provide more facts about effects and side-effects. Trying to fix an issue (if it exists) starts with being able to reproduce it. Was just trying to find other effects that could be checked/traced as a path towards finding something reproducible.

[driftwoodstudio]

Fixed by giving up on themes entirely while using macos_ui.