Different results for ColorScheme in Flutter?

71 views Asked by At

I try to get the dominant color from the web image, and for it I use the fromImageProvider method from the ColorScheme class. However I got two different results on iOS and on the web flutter platform. Could you help me to figure out this strange issue?

This is my helper:

class BackgroundGenerator {
  Future<ColorScheme> updateImage(ImageProvider provider) async {
    final ColorScheme newColorScheme = await ColorScheme.fromImageProvider(
      provider: provider,
    );

    return newColorScheme;
  }
}

This is an output of newColorScheme for the web platform:

{ColorScheme#cb8c7(primary: Color(0xff005ac1), primaryContainer: Color(0xffd8e2ff), onPrimaryContainer: Color(0xff001a41), secondary: Color(0xff575e71), onSecondary:
Color(0xffffffff), secondaryContainer: Color(0xffdbe2f9), onSecondaryContainer: Color(0xff141b2c), tertiary: Color(0xff715573), onTertiary: Color(0xffffffff),
tertiaryContainer: Color(0xfffbd7fc), onTertiaryContainer: Color(0xff29132d), error: Color(0xffba1a1a), errorContainer: Color(0xffffdad6), onErrorContainer:
Color(0xff410002), background: Color(0xfffefbff), onBackground: Color(0xff1b1b1f), surface: Color(0xfffefbff), onSurface: Color(0xff1b1b1f), surfaceVariant:
Color(0xffe1e2ec), onSurfaceVariant: Color(0xff44474f), outline: Color(0xff74777f), outlineVariant: Color(0xffc4c6d0), inverseSurface: Color(0xff303033), onInverseSurface:
Color(0xfff2f0f4), inversePrimary: Color(0xffadc6ff), primaryVariant: Color(0xff005ac1), secondaryVariant: Color(0xff575e71), surfaceTint: Color(0xff005ac1)), COLORTHEME}

This is an output of newColorScheme for the iOS:

flutter: {ColorScheme#327f6(primary: Color(0xff266c2c), primaryContainer: Color(0xffb6f2af), onPrimaryContainer: Color(0xff002204), secondary: Color(0xff52634f), onSecondary: Color(0xffffffff), secondaryContainer: Color(0xffd5e8cf), onSecondaryContainer: Color(0xff101f10), tertiary: Color(0xff38656a), onTertiary: Color(0xffffffff), tertiaryContainer: Color(0xffbcebf1), onTertiaryContainer: Color(0xff001f23), error: Color(0xffba1a1a), errorContainer: Color(0xffffdad6), onErrorContainer: Color(0xff410002), background: Color(0xfffcfdf6), onBackground: Color(0xff1a1c19), surface: Color(0xfffcfdf6), onSurface: Color(0xff1a1c19), surfaceVariant: Color(0xffdee5d8), onSurfaceVariant: Color(0xff424940), outline: Color(0xff72796f), outlineVariant: Color(0xffc2c9bd), inverseSurface: Color(0xff2f312d), onInverseSurface: Color(0xfff0f1eb), inversePrimary: Color(0xff8ed88a), primaryVariant: Color(0xff266c2c), secondaryVariant: Color(0xff52634f), surfaceTint: Color(0xff266c2c)), COLORTHEME}

Also I have screens for both cases:

mobile

desktop

PS: On the web version background is blue, but the default color must be gray.

0

There are 0 answers