[UI][MACOS] some widgets (Text widget, progess bar) are black with black background, so invisible

[ande4485]

Which at_widget package you find issue with?

at_onboarding_flutter

On what platforms did you experience the issue?

MacOS

What version are you using?

6.0.2 ( I'm on trunk)

What happened?

I use at_onboarding_flutter to start onboarding on an macos App.
On first time I have an onboarding screen with multiple choice.
But every choices are invisible ( text is black with a black background in dark mode)

Steps to reproduce

1. You need macOs
2. You have to show Onboarding panel ( You can configure AtOnboarding.onboard with isSwitchingAtsign : true to force this panel to appear)
3. You'll see my screenshot

Additional info

UI AtOnboarding has to be redefined because you define background color, color ...
It'll be better to not change TextStyle and color and let the general ThemeData to style different widget like TextWidget, CircularProgressIndicator etc...
Examples:

• In AtSyncIndicator ( at_sync_ui_flutter package) :
  you have :

CircularProgressIndicator(
          value: value,
          backgroundColor: backgroundColor ??
              (color ?? _kDefaultActiveTickColor).withAlpha(46),
          color: (color ?? _kDefaultActiveTickColor).withAlpha(146),
          strokeWidth: radius / _kDefaultIndicatorRadius * 2,
        ),

Why do you set a color for background and not let ProgressIndicatorThemeData.color of main ThemeData?
I use Material3 and dark mode and for me I don't see the progressbar.

• at_onboarding_home_screen.dart:
  You have too many :

TextStyle(
                          fontSize: AtOnboardingDimens.fontLarge,
                          color: Platform.isIOS || Platform.isAndroid
                              ? Theme.of(context).brightness == Brightness.light
                                  ? Colors.white
                                  : Colors.black
                              : null,

This is why I have this bug, I'm on mac and TextSyle.color is null, so it's overriding my Theme and everything is black so I don't see the text.
If you want, I can remove all your style and create a PR if you don't have time. If yes, why it's important for you to set color like you did ?

Relevant log output

No response

Flutter analyze output

No response

Flutter doctor output

[✓] Flutter (Channel stable, 3.7.7, on macOS 13.2.1 22D68 darwin-arm64, locale fr-FR)
    • Flutter version 3.7.7 on channel stable at /Users/antoine/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2ad6cd72c0 (8 days ago), 2023-03-08 09:41:59 -0800
    • Engine revision 1837b5be5f
    • Dart version 2.19.4
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/antoine/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = /Users/antoine/Library/Android/sdk
    • Java binary at: /Library/Java/JavaVirtualMachines/jdk-17.0.4.1.jdk/Contents/Home/bin/java
    • Java version Java(TM) SE Runtime Environment (build 17.0.4.1+1-LTS-2)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

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

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 111.0.5563.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[sachins-geekyants]

@ande4485 Thanks for bringing it to our notice.
If you have already made changes, can you raise a PR? Otherwise, we will pick it up.

[ande4485]

@sachins-geekyants I'll try to do the PR before the end of this week. But are you sure about potential UI regression of AtSign apps ?

[sonle-geekyants]

Last time, I edited and added color to the config of onboarding in branch feature/edit-onboarding
Could you checkout to that branch and check it @ande4485?

[ande4485]

@sonle-geekyants and @sachins-geekyants thank you for your message but may be it's not clear.
The problem is :

Enregistrement.de.l.ecran.2023-03-22.a.16.37.45.mov

When I remove all your style with color attribute on AtOnboardingButton or AtSyncIndicator, I have this:

Enregistrement.de.l.ecran.2023-03-22.a.16.49.14.mov

And for me it's good.
May be you add this style for a branding style. If I remove it in my PR some apps like Dude, Wapi etc ... will have may be some UI troubles.
My main question is why you don't use, for example in Dude app or wapi app the themeData to set textButton/ProgressIndicator color in dark/light mode instead of setting textButton and ProgressIndicator color in AtOnboarding package?
Thank you

[sonle-geekyants]

Yes, because Onboarding has a branding UI and just lets the user change the primary color only.
Don't allow custom button/text style,...
And sorry, I have a PR that fixed all the above issues and it's in review new.
I will let you know after it is merged. 
@ande4485

[ande4485]

Thank you @sonle-geekyants , I'll wait for this PR

[sachins-geekyants]

Fix released with at_onboarding_flutter: ^6.1.0