decorators property

Decorators are a mechanism to wrap a component in arbitrary markup when rendering a story. Components are often created with assumptions about ‘where’ they render. Your styles might expect a theme or layout wrapper, or your UI might expect specific context or data providers.

A simple example is adding padding to a component’s stories. Accomplish this using a decorator that wraps the stories in a padding widget, like so:

const meta = Meta(
  component: Button,
  decorators: [
    (context, story) => Padding(
      padding: EdgeInsets.all(8),
      child: story,
    ),
  ],
);