This guide consists of:
The frontend consists of 3 projects:
frontend
is the playground app itself.frontend/playground_components
is the package with common code for Playground and Tour of Beam.frontend/playground_components_dev
is common code for tests of Playground and Tour of Beam.Playground uses the app_state package for state management. The standalone playground and the embedded playground are two screens within the same app, chosen by the URL at runtime.
The main state object is PlaygroundController
, created in both of those screens. It is hung in the widget tree with the provider package for historical reasons, and we aim to remove that if we do further refactoring. New code should pass it directly from widget to widget for compile-time safety.
A URL is parsed into one of the subclasses of PagePath
, most of which contain an ExamplesLoadingDescriptor
object, which in turn may contain multiple ExampleLoadingDescriptor
objects.
This is passed to the ExamplesLoader
object. It constructs an ExampleLoader
object for each example's descriptor, and that loader performs the actual loading.
To add a new source for examples:
ExampleLoadingDescriptor
with state and a method to parse it from a map of query string parameters.ExamplesLoadingDescriptorFactory
.ExampleLoader
and load an example there.ExampleLoaderFactory
in ExamplesLoader
.Playground app supports light and dark themes. Component themes are declared in theme.dart file.
To use specific color inside component you can use helper ThemeColors
utility:
ThemeColors.of(context).greyColor
colors.dart contains color declarations.
To add a new page, do the following steps:
app_state
package.PagePath
subclass that parses the new URL.ChangeNotifier with PageStateMixin
that holds the state of the page.StatelessWidget
as the main one for the page.StatefulMaterialPage
subclass that binds the three together.See the example in lib/pages/standalone_playground.
Please, read the following guides about the accessibility: