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

Updated to Flutter 3.22 and no color is shown in cards and navbars background

I just updated two of my apps to Flutter 3.22, and the colors of cards and bottom navigation bars have disappeared. Now the background color is transparent on these elements. Any solutions on how to fix it?

As I saw in the release notes, they made changes to theming, but nothing should have impacted it.

I tried updating the theme with the new material theme builder but nothing have changed.

Here is a example code of the widgets:

@override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: InkWell(
        onTap: () {
          // [...]
        },
        borderRadius: BorderRadius.circular(12),
        child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // List of widgets like ListTiles, rows of text, etc
              ],
            )),
      ),
    );
  }

This is one of the cards, but the problem is across all widgets that envolves Theme.of(context).colorScheme.surfaceTint. I think is some bug with the update.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out the problem! The theme was provided by the official Material Theme Builder website, and appears that the builder is missing some parameters

    In the generated file the parameter surfaceContainerLow and others aren't declared in the toColorScrheme() function, inside the MaterialTheme class.

    I added these parameters to the builder function myself and now everything is working!


  2. 0

    Thanks for your answer Vicente, it helped me to point in the right direction.

    In my case, on top of the colors not being shown in those widgets. My app got darker after upgrading to Flutter 3.22. So, I followed these instructions from Ryd Mike.

    To summarize, add flex_seed_scheme package and add these ColorSchemes to your ThemeData objects:

       // Make a light ColorScheme from a seeds using variant style fidelity.
final ColorScheme schemeLight = SeedColorScheme.fromSeeds(
  brightness: Brightness.light,
  primary: primarySeedColor,
  primaryKey: primarySeedColor,
  tones: FlexTones.vivid(Brightness.light),
);
// Make a dark ColorScheme from a seeds using variant style fidelity.
final ColorScheme schemeDark = SeedColorScheme.fromSeeds(
  brightness: Brightness.dark,
  primaryKey: primarySeedColor,
  tones: FlexTones.vivid(Brightness.dark),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search