Copy Playground

The Copy Playground is a simple template example suitable for testing themes that you copy-paste from the Themes Playground. It is intended to be used as a quick and simple app that you can use for experimenting with themes you configured in the Themes Playground and want to test on a device build.

The source code for this template is available in the example sub folder, in folder /example_copy_paste_from_playground.

You can, of course, test with a plain vanilla counter app too, or any app where you want to try a theme. You may, however, find the Copy Playground helpful. It includes presentation of all ColorScheme and ThemeData colors, as well as all commonly used Flutter Material UI widgets. This makes it easy to see and verify that the theme looks as intended with a large number of UI elements.

Demonstration

The screen recording below demonstrates how to copy-paste a theme from the Themes Playground and try in the Copy Playground.

At the start the Copy Playground app is set to use the default Material-2 design guide theme created using ThemeData.from the Material-2 guide light and dark theme examples.

As we jump into the Themes Playground, we start with the same scheme selected in it just for illustration purposes.

We then turn ON FlexColorscheme and modify some settings, like border radius on ElevatedButton and BottomSheet. We add some surface blending and even use seed generated ColorScheme. We have opted to keep the main color of the selected built-in scheme Pink Sakura, that we select as our scheme for the generated ColorScheme.

When we are done configuring our scheme, we COPY the generated setup code, and PASTE it into the Copy Playground app into the MaterialApp widget, making sure to comment or delete any existing theme and darkTheme definitions.

If you are doing this in your own app, you will need to first add the flex_color_scheme package to your application and import it. In the Copy Playground template this is already done. Even the Google fonts package is imported, so we can easily also use the same NotoSans font that the Themes Playground app uses. This is done in this demo just to create and exact match of the result on the mobile device.

When we hot-reload the Copy Playground app, we can see how it changes to use the theme we just configured in the Themes Playground. It is almost magical. In the Playground, we can use the Widget Showcase to compare the colors and UI widget styles in the Themes Playground and in the Copy Playground. We can see and verify that they are the same.