Flutter test: How to check the background color of a widget during integration test

Viewed 429

I have a simple flutter app available on github having both Light and dark themes with a "Theme switch" button. On the main page, I have a Scaffold widget that takes it's background color property from the theme. Is there a way to check the background color of the Scaffold before and after switching themes during integration test with driver ?

Tried checking the active theme before and after switching themes, but fails:

 group('Theme Test', () {
    final themeButton = find.byValueKey('Button');
    final themeProvider = ThemeProvider();

    test('Switch between light and dark themes', () async {
      expect(themeProvider.mode, ThemeMode.light); //check initial theme
      await driver.tap(themeButton);
      expect(themeProvider.mode, ThemeMode.dark);  //check new theme
    });
  });

Full integration test here

My goal is getting the background color of the Scaffold before and after switching themes with driver

1 Answers

You are creating a new instance of the ThemeProvider() in your test group. The driver is creating your app, but won't be using the ThemeProvider() you created in the test.

It is not easy to communicate with your running app in Flutter Driver (you'll have to use driver request_data, but I don't recommend that for this problem).

You might want to look into the new integration tests for Flutter using the integration_test package. The new Integration tests are a combination of widgetTests and flutter driver tests. More info here; https://flutter.dev/docs/testing/integration-tests

The new integration test package will make it possible to communicate with the ThemeProvider() instance created by your app if you make it accessible. It will be possible to read the themeProvider.mode value then / check if the actual background color changed.

Related