Flutter 3.16 is breaking goldens background color

[TesteurManiak]

Is there an existing issue for this?

• [X] I have searched the existing issues.

Version

0.7.0

Description

After upgrading from Flutter 3.13.8 to 3.16.0 my golden test is breaking because of the background color.

Steps to reproduce

Minimal reproducible example

main.dart

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: false),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

home_golden_test.dart

const iphoneSE = Size(320, 568);

void main() {
  goldenTest(
    'HomePage',
    fileName: 'home_page',
    builder: () {
      return GoldenTestGroup(children: [
        GoldenTestScenario(
          constraints: BoxConstraints.tight(iphoneSE),
          name: 'default',
          child: Theme(
            data: ThemeData(useMaterial3: false),
            child: const HomePage(),
          ),
        ),
      ]);
    },
  );
}

Steps to reproduce

1. Run flutter test --update-goldens with Flutter 3.13.8
2. Switch to Flutter 3.16.0
3. Run flutter test -t golden

Expected behavior

The test should not fail.

Screenshots

3.13.8	3.16.0

Additional context and comments

I must admit that I never understood why the background color was based off the theme data considering that it could break after any bump of the SDK like here 🤔

[Bassiuz]

Hello @TesteurManiak,

I encountered the same problem; and figured out it had to do with the forced Material3 used in Flutter themes starting from 3.16. You can use a theme in the widgets you render, but you can also provide a theme to the Alchemist configuration itself to render widgets in that theme.

If you use this in your flutter_test_config.dart it should render in the old background color

return AlchemistConfig.runWithConfig(
    config: AlchemistConfig(
      theme: ThemeData(useMaterial3: false),
      ),
    ),
    run: testMain,
  );

[krispypen]

I prefer the old way, so with the blue background. When it has a background color which is not white or black it's easier to spot transparent issues (for example rounded corners which should be transparent), and it's easier to see the "size" of the widget

[vanlooverenkoen]

I don't think we should be relying on material but have a custom AlchemistTheme where we can set

• borderColor
• backgroundColor
• textTheme (AlchemistTextTheme)

And stay away from anything related to material. Especially when you want to have consistently generated golden files. You don't want to be bother by material that is used by the testing framework you are using.