CupertinoTheme support

[alanmeier]

Will you be looking at CupertinoTheme support as well in the future ?

[rydmike]

I was planning to look into practical side of it, I was just unsure if there is a need for it or interest in it.

I don't actually think it would be difficult at all to add add support for it, so that FlexColorScheme could also generate CupertinoThemeData from all the existing color schemes.

The CupertinoThemeData class is in fact much smaller and simpler than ThemeData, this also means it has much less nuances when it comes to color schemes, it cannot fully represent the themes in FlexColorScheme. One reason I have not looked into adding it yet was mostly because I did not think FlexColorScheme could offer as much benefits for the current CupertinoThemeData class in Flutter, since it can only represent and use a fraction of the colors in it. Using CupertinoThemeData is also much easier than ThemeData, so the benefits of using a package to assist with it are more limited.

Still I guess there is no reason why I could not add support for in some form. For example something like FlexCupertinoThemeData.light and CupertinoThemeData.dark that are driven via FlexColorScheme.toCupertino method or something like that should work fine and be simple to add.

I will look into and consider it for a future release. 😃

Thanks for the interest in this feature and for the suggestion 👍🏻

[rydmike]

For info:

A poll for this feature was added to discussions here #69 and it is also mentioned in docs here https://docs.flexcolorscheme.com/future_features.

[romanr]

I'd like to suggest that it is not appropriate to leave it to consideration, vote or poll. Isn't the whole point Flutter exists is to be a cross platform solution?
According to a survey conducted by Google in 2020, 70% of Flutter developers build apps for both Android and iOS platforms, while 17% of Flutter developers build apps exclusively for Android, and 13% of Flutter developers build apps exclusively for iOS.

I was so happy to discover this library, for about 5 minutes until I found that Cupertino is not supported. Out of those 5 minutes I spent most of time in Playground demo very confused. Demo defaults to iPhone device and I couldn't understand why it doesn't show Cupertino controls, even somehow simulated.

Still want to use it in project, hoping for Cupertino support in the future.
Did anyone ship cross platform apps with flex_color_scheme, what are specifics of implementation? or maybe there are any examples? Or maybe the way to go is to create a theme that mimics iOS controls?

[rydmike]

What is expected concerning CupertinoThemeData?

Glad to see some comments on this topic. 👍🏻 😄

I'm looking for and hoping for some input on what devs would like to see when it comes to Cupertino / iOS support in FlexColorScheme?

If you use CupertionApp, there is no ThemeData, only CupertinoThemeData with like 5 properties, so not so much to theme, no huge amount of colors, no "50" widget component themes to figure out.

You can use FlexColorScheme.toScheme, pick out the desired colors and put the color values into the few color properties in a CupertinoThemeData if so desired.

Maybe FlexColorScheme.toCupertinoTheme?

Are you looking for something like FlexColorScheme.toCupertinoTheme to do that for you? There is not much to do to accomplish that. It can certainly be added, but it won't bring any fancy theming features to Cupertino widgets, just a few colors from FlexColorScheme.

Cupertino widgets in MaterialApp?

If you are referring to when making an iOS style app, but actually using a MaterialApp, and mixing in some Cupertino widgets in a MaterialApp in some select cases where it makes sense to adaptively do so on iOS platform. For those there is somethings you can adjust, but still very little.

There is in ThemeData and thus also in FlexColorScheme in a MaterialApp an automatically inherited CupertinoTheme with its CupertinoThemeData. It gets its colors automatically from the active Theme using sensible default mappings, basically this thing:

/// A [CupertinoThemeData] that defers unspecified theme attributes to an
/// upstream Material [ThemeData].
///
/// This type of [CupertinoThemeData] is used by the Material [Theme] to
/// harmonize the [CupertinoTheme] with the material theme's colors and text
/// styles.
///
/// In the most basic case, [ThemeData]'s `cupertinoOverrideTheme` is null and
/// descendant Cupertino widgets' styling is derived from the Material theme.
///
/// To override individual parts of the Material-derived Cupertino styling,
/// `cupertinoOverrideTheme`'s construction parameters can be used.
///
/// To completely decouple the Cupertino styling from Material theme derivation,
/// another [CupertinoTheme] widget can be inserted as a descendant of the
/// Material [Theme]. On a [MaterialApp], this can be done using the `builder`
/// parameter on the constructor.
///
/// See also:
///
///  * [CupertinoThemeData], whose null constructor parameters default to
///    reasonable iOS styling defaults rather than harmonizing with a Material
///    theme.
///  * [Theme], widget which inserts a [CupertinoTheme] with this
///    [MaterialBasedCupertinoThemeData].
// This class subclasses CupertinoThemeData rather than composes one because it
// _is_ a CupertinoThemeData with partially altered behavior. e.g. its textTheme
// is from the superclass and based on the primaryColor but the primaryColor
// comes from the Material theme unless overridden.
class MaterialBasedCupertinoThemeData extends CupertinoThemeData {
  /// Create a [MaterialBasedCupertinoThemeData] based on a Material [ThemeData]
  /// and its `cupertinoOverrideTheme`.
  ///
  /// The [materialTheme] parameter must not be null.
  MaterialBasedCupertinoThemeData({
    required ThemeData materialTheme,
  }) : this._(
    materialTheme,
    (materialTheme.cupertinoOverrideTheme ?? const CupertinoThemeData()).noDefault(),
  );

  MaterialBasedCupertinoThemeData._(
    this._materialTheme,
    this._cupertinoOverrideTheme,
  ) : // Pass all values to the superclass so Material-agnostic properties
      // like barBackgroundColor can still behave like a normal
      // CupertinoThemeData.
      super.raw(
        _cupertinoOverrideTheme.brightness,
        _cupertinoOverrideTheme.primaryColor,
        _cupertinoOverrideTheme.primaryContrastingColor,
        _cupertinoOverrideTheme.textTheme,
        _cupertinoOverrideTheme.barBackgroundColor,
        _cupertinoOverrideTheme.scaffoldBackgroundColor,
        _cupertinoOverrideTheme.applyThemeToAll,
      );

  final ThemeData _materialTheme;
  final NoDefaultCupertinoThemeData _cupertinoOverrideTheme;

  @override
  Brightness get brightness => _cupertinoOverrideTheme.brightness ?? _materialTheme.brightness;

  @override
  Color get primaryColor => _cupertinoOverrideTheme.primaryColor ?? _materialTheme.colorScheme.primary;

  @override
  Color get primaryContrastingColor => _cupertinoOverrideTheme.primaryContrastingColor ?? _materialTheme.colorScheme.onPrimary;

  @override
  Color get scaffoldBackgroundColor => _cupertinoOverrideTheme.scaffoldBackgroundColor ?? _materialTheme.scaffoldBackgroundColor;

  /// Copies the [ThemeData]'s `cupertinoOverrideTheme`.
  ///
  /// Only the specified override attributes of the [ThemeData]'s
  /// `cupertinoOverrideTheme` and the newly specified parameters are in the
  /// returned [CupertinoThemeData]. No derived attributes from iOS defaults or
  /// from cascaded Material theme attributes are copied.
  ///
  /// This [copyWith] cannot change the base Material [ThemeData]. To change the
  /// base Material [ThemeData], create a new Material [Theme] and use
  /// [ThemeData.copyWith] on the Material [ThemeData] instead.
  @override
  MaterialBasedCupertinoThemeData copyWith({
    Brightness? brightness,
    Color? primaryColor,
    Color? primaryContrastingColor,
    CupertinoTextThemeData? textTheme,
    Color? barBackgroundColor,
    Color? scaffoldBackgroundColor,
    bool? applyThemeToAll,
  }) {
    return MaterialBasedCupertinoThemeData._(
      _materialTheme,
      _cupertinoOverrideTheme.copyWith(
        brightness: brightness,
        primaryColor: primaryColor,
        primaryContrastingColor: primaryContrastingColor,
        textTheme: textTheme,
        barBackgroundColor: barBackgroundColor,
        scaffoldBackgroundColor: scaffoldBackgroundColor,
        applyThemeToAll: applyThemeToAll,
      ),
    );
  }

  @override
  CupertinoThemeData resolveFrom(BuildContext context) {
    // Only the cupertino override theme part will be resolved.
    // If the color comes from the material theme it's not resolved.
    return MaterialBasedCupertinoThemeData._(
      _materialTheme,
      _cupertinoOverrideTheme.resolveFrom(context),
    );
  }
}

What more is needed?

Is this not already sufficient? One already get as much of the used colors from the FlexColorScheme generated ThemeData in this CupertinoThemeData as it can use, which of course is not a lot, almost nothing.

Basically Cupertino widgets cannot be themed the same way like the Material widgets can, they can typically only change their one single primary color, but that is about it. They already get the same matching color for that, basically the primary color in the FCS generated ThemeData.

Sure one could customize which ColorScheme color from FCS is mapped to what color in the CupertinoThemeData with the cupertinoOverrideTheme, but it honestly does not get much better than the defaults.

Typically the primary and background colors in CupertinoThemeData should match what you have in ThemeData so that the widgets fits in the same theme.

Still a mapping could certainly be added to enable overriding the default mappings.

Cupertino Widget Presentations?

Are you just looking for a presentation of what the Cupertino Widgets look like with the default color mapping applied in the Playground app?

Which is basically just primary color in FlexColorScheme.

Sure I guess that could be added to the Playground as well. I started preparing for it in the Playground in v7, but did not complete it yet. It is just a strawman for it at this stage. I was thinking of just adding a Cupertino page where one could do the color mapping overrides and then show at least key Cupertino widgets using the color mapping.

---

Happy to hear more input and thoughts about what would be expected of CupertinoTheme support in FlexColorScheme.

When I look at it, I feel like we cannot really do anything with CupertinoThemeData, beyond assigning 5 color properties, so it feels very limited and thus a bit pointless, or at least like its results and utility would be quite disappointing.

[rydmike]

When it comes to making adaptive Material3 themes that looks different when using Material 3 in Android and on iOS, FCS and Playground already supports this.

You can create a MaterialApp that gets M3 design on Android, but where those very opinionated Material 3 designs look different e.g. on iOS and macOS, like different (less) border radius and no elevation tint on iOS. These things can look quite alien on iOS, so you might prefer a more agnostic deign used at least on iOS.

I still recommend sprinkling in at least platform aware dialogs on iOS as well. The New M3 switch looks very similar to iOS switches, so personally I think that is less critical, but certainly an option too still use the adaptive version.

Now that M3 design also favors background colored AppBar by default, it is also less of an eye sore on iOS. FCS can remove the scroll under AppBar elevation and tint in iOS and still keep it in Android in M3 design.

Look in the demo for pre-made designs and check out what the adaptive example does:

https://twitter.com/RydMike/status/1642621071466672128

There will probably be more configurable platform adaptive properties in future FCS versions. Version 7 is the first one to have them and I am certainly looking for feedback on them:

https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexAdaptive-class.html

[rydmike]

I still have no real insights into what users expect from Cupertino support, since basically Cupertino has no real theming supporting in Flutter apart from a few colors. ThemeData from MaterialApp already by default maps its theme colors to those colors in the very limited Cupertino theme.

FlexColorScheme can make Material theme with different styles e.g. iOS while keeping another style on Android. So it now even have more support for iOs adaptive theming than any other ThemeData help I have seen.

Still grateful for any input and thoughts. I have added this for the Playground V10 milestone.