Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Why don't my colors in the app match the colors in the IDE and tutorial?

I am learning Flutter. I am following the beginner’s codelab and video tutorial.

I am using Colors.deepOrange for my color scheme, as shown in the tutorial. The color in my IDE and YouTube video match pretty close:
enter image description here
enter image description here

But when I run the app (in browser, Windows, or Android emulator), the color is very dark:
enter image description here

This applies to other colors, such as blue and green also. I looked into it, and came across P3 support, which seems to be offered now. And since I am seeing different colors on the same monitor, I would not expedct this to be the case. But if it is relevant, I am on a Windows computer with a 5 year old monitor, and the tutorial is on a Mac.

My theme just follows the tutorial:

theme: ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
),

as does my card:

return Card(
  color: theme.colorScheme.primary,
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: Text(
      pair.asLowerCase,
      style: style,
      semanticsLabel: pair.asPascalCase,
    ),
  ),

I have tried everything I can think of, but can’t figure it out. Any ideas what I am doing wrong to get this blah color?

Tags:

2

Answers


  1. 0

    The Card color in Flutter using Material 3 is not only determined by the color parameters but also by its elevation and the color of the item it is drawn on, using a complicated formula. If you draw a Container with your deep orange color that should show as you’d expect (deep Orange). Card colors in my experience are impossible to predict and best left unset so it follows the color scheme and elevation automatically.

    Login or Signup to reply.
  2. 0

    The color you’re seeing, #8f4c38, is the correct primary color for a color scheme using Colors.deepOrange as the seedColor. This is influenced by the default DynamicSchemeVariant.tonalSpot and Brightness.light.

    Colors.deepOrange Light ColorScheme

    It’s possible that the difference in color between your app and the video/codelab screenshots is due to filters or post-processing effects applied to the video or images. You can verify this by comparing the color of the DEBUG badge in the video/screenshots with the one in your running code.

    Here’s an explanation of your theme setup:

    theme: ThemeData(
  useMaterial3: true, // Enabling Material 3 for the modern design language.
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange), // Generates a color scheme based on deep orange.
),

    The color you’re seeing is part of how Flutter’s Material 3 design system adjusts colors to be more "tonal" when using ColorScheme.fromSeed(). The deep orange will look different from what you may expect, but this is intended by the tonal system.

    If you’d like to have a more vivid color, you can try using ColorScheme.fromSwatch() or explicitly setting the color without using a seed:

    theme: ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.light(primary: Colors.deepOrange), // Directly using deep orange as primary color.
),

    This would give you a brighter version of deep orange, closer to what you’re seeing in the tutorial. However, it won’t use the Material 3 tonal system for color variations.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search