### Flutter App Entry Point with Playbook Integration

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

Shows the main application setup in Flutter, integrating the `PlaybookGallery` widget to display generated stories and scenarios. This requires a `MaterialApp` and a `ThemeData` configuration.

```dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Playbook Demo',
      theme: ThemeData.light(),
      home: PlaybookGallery(
        title: 'Sample app',
        playbook: playbook,
      ),
    );
  }
}

```

--------------------------------

### Run Playbook Snapshot Tests in Dart

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Shows how to configure and run snapshot tests for Playbook scenarios using the Snapshot tool. This includes setting up devices, providing a MaterialApp theme, and updating golden tests. Dependencies: Flutter SDK, `test` package.

```dart
Future<void> main() async {
  testWidgets('Take snapshots', (tester) async {
    await Playbook(
      stories: [
        barStory(),
        fooWidgetStory(),
        assetImageStory(),
        homePageStory(),
        scrollableStory(),
      ],
    ).run(
      Snapshot(
        devices: [SnapshotDevice.iPhoneSE2nd],
      ),
      (widget, device) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            fontFamily: 'Roboto',
            platform: device.platform,
          ),
          home: widget,
        );
      },
    );
  });
}

```

--------------------------------

### Define Playbook Stories and Scenarios in Dart

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Demonstrates how to define UI components as stories and scenarios within the Playbook framework. It shows how to specify layout and provide child widgets for each scenario. Dependencies: Flutter SDK.

```dart
Playbook(
  stories: [
    Story(
      'Home',
      scenarios: [
        Scenario(
          'CategoryHome',
          layout: ScenarioLayout.fill(),
          child: CategoryHome(userData: UserData.stub),
        ),
        Scenario(
          'LandmarkList',
          layout: ScenarioLayout.fill(),
          child: Scaffold(
            appBar: AppBar(),
            body: LandmarkList(userData: UserData.stub),
          ),
        ),
        Scenario(
          'Container red',
          layout: ScenarioLayout.fixed(100, 100),
          child: Container(color: Colors.red),
        ),
      ],
    ),
  ],
);

```

--------------------------------

### Explore Scenario Layout Options in Dart

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Demonstrates various layout configurations for Playbook scenarios, including compressed, fill, fixed, fixed horizontal, fixed vertical, and custom sizing using `ScenarioLayoutSizing`. These options control how UI components are presented within their sandbox.

```dart
import 'package:playbook/playbook.dart';

// Compressed layout - wraps to content size
final compressedScenario = Scenario(
  'Compressed Button',
  layout: ScenarioLayout.compressed(),
  child: ElevatedButton(onPressed: () {}, child: Text('Button')),
);

// Fill layout - expands to fill available space
final fillScenario = Scenario(
  'Full Screen Widget',
  layout: ScenarioLayout.fill(),
  child: Container(color: Colors.blue),
);

// Fixed size layout - exact dimensions
final fixedScenario = Scenario(
  'Icon 48x48',
  layout: ScenarioLayout.fixed(48, 48),
  child: Icon(Icons.star),
);

// Fixed horizontal, flexible vertical
final fixedHScenario = Scenario(
  'Fixed Width',
  layout: ScenarioLayout.fixedH(
    200,
    crossAxisLayout: ScenarioLayoutCompressed(),
  ),
  child: Text('Fixed width, compressed height'),
);

// Fixed vertical, flexible horizontal
final fixedVScenario = Scenario(
  'Fixed Height',
  layout: ScenarioLayout.fixedV(
    100,
    crossAxisLayout: ScenarioLayoutFill(),
  ),
  child: Text('Fills width, fixed height'),
);

// Custom sizing with ScenarioLayoutSizing
final customScenario = Scenario(
  'Custom Layout',
  layout: ScenarioLayout.sizing(
    ScenarioLayoutFill(),
    ScenarioLayoutFixed(300),
  ),
  child: Container(color: Colors.green),
);

```

--------------------------------

### Integrate Playbook Gallery into a Flutter Application

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Shows how to integrate the `PlaybookGallery` widget into the main application structure. This involves setting up a basic `MaterialApp` and passing the `playbook` instance to the `PlaybookGallery` widget.

```dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Playbook Demo',
      theme: ThemeData.light(),
      home: PlaybookGallery(
        title: 'Sample app',
        playbook: playbook,
      ),
    );
  }
}
```

--------------------------------

### Configure Playbook Snapshot in pubspec.yaml

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Illustrates how to configure font paths and snapshot output directories within the `pubspec.yaml` file for Playbook snapshot tests. This ensures proper font loading and organized snapshot storage. Dependencies: `playbook_snapshot` package.

```yaml
playbook_snapshot:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
  # default is /snapshots
  snapshot_dir: iOS
  # default is empty
  sub_dir: service

```

--------------------------------

### Configure Snapshot Output and Custom Devices in Flutter

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Customize snapshot appearance, output paths, and define custom device configurations for visual testing in Flutter applications. This involves setting up device parameters like screen size, pixel ratio, text scaling, and orientation, as well as configuring output directories and canvas colors.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:playbook_snapshot/playbook_snapshot.dart';

Future<void> main() async {
  testWidgets('Custom snapshot configuration', (tester) async {
    // Custom device definition
    const customDevice = SnapshotDevice(
      name: 'CustomTablet',
      size: Size(768, 1024),
      safeAreaInsets: SafeAreaInsets(
        portrait: EdgeInsets.fromLTRB(0, 24, 0, 0),
        landscape: EdgeInsets.fromLTRB(24, 0, 24, 0),
      ),
      pixelRatio: 2.0,
      textScaler: TextScaler.linear(1.5),
      orientation: SnapshotDeviceOrientation.portrait,
      platform: TargetPlatform.iOS,
    );

    await myPlaybook.run(
      Snapshot(
        devices: [
          customDevice,
          // Switch device to landscape orientation
          SnapshotDevice.iPhone15(SnapshotDeviceOrientation.landscape),
        ],
        // Custom background colors
        canvasColor: Colors.grey[200],
        checkeredColor: Colors.black26,
        checkeredRectSize: 10.0,
        // Disable Material wrapper
        useMaterial: false,
        // Custom output directory
        snapshotDir: 'visual_tests',
        // Subdirectory for organization
        subDir: 'components',
        // Setup executed before each snapshot
      ),
      tester,
      (widget, device) => MaterialApp(
        theme: ThemeData(platform: device.platform),
        home: widget,
      ),
      setUpEachTest: (tester) async {
        // Perform setup before each scenario snapshot
        await tester.pumpAndSettle();
      },
    );
  });
}

// Snapshots saved to: test/visual_tests/{DeviceName}/components/{StoryTitle}/{ScenarioTitle}.png

```

--------------------------------

### Generate Flutter Stories and Scenarios

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

Demonstrates how to define stories and scenarios for Flutter widgets using the `@GenerateScenario` annotation. This includes setting titles, layouts, and widget stubs for testing.

```dart
// some_story.dart

const storyTitle = 'Home';

@GenerateScenario(
  layout: ScenarioLayout.fill(),
)
Widget $CategoryHome() => CategoryHome(userData: UserData.stub);

@GenerateScenario(
  layout: ScenarioLayout.fill(),
)
Widget $LandmarkList() => Scaffold(
      appBar: AppBar(),
      body: LandmarkList(userData: UserData.stub),
    );

@GenerateScenario(
  title: 'Container red',
  layout: ScenarioLayout.fixed(100, 100),
)
Widget containerRed() => Container(color: Colors.red);

@GenerateScenario(
  title: 'Device pixel ratio',
  layout: ScenarioLayout.fixed(300, 300),
)
Widget devicePixelRatio(BuildContext context) =>
    Text('Device pixel ratio is ${MediaQuery.of(context).devicePixelRatio}');

```

--------------------------------

### Add Dynamic Scenarios Programmatically

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Demonstrates how to programmatically add scenarios to a playbook at runtime. This allows for dynamic creation of test cases or UI variations without needing to define them statically in files.

```dart
import 'package:playbook/playbook.dart';

void main() {
  final playbook = Playbook(stories: []);

  // Add scenarios dynamically
  playbook.addScenariosOf(
    'Dynamic Components',
    scenarios: [
      Scenario(
        'Generated at Runtime',
        layout: ScenarioLayout.compressed(),
        child: Text('This was added dynamically'),
      ),
      Scenario(
        'Another Dynamic Scenario',
        child: Container(
          width: 100,
          height: 100,
          color: Colors.purple,
        ),
      ),
    ],
  );

  // playbook now contains the new story
}

```

--------------------------------

### Playbook Generator Build Configuration (build.yaml)

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

Configures the Playbook generator using `build.yaml`. Specifies the input Dart files (glob pattern) and the output file name for generated stories. Default values are provided.

```yaml
targets:
  $default:
    builders:
      playbook_generator:stories:
        options:
          input: lib/**.dart
          output: generated_playbook.dart

```

--------------------------------

### Define Playbook Stories and Scenarios in Dart

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

This snippet demonstrates how to define UI components as stories and scenarios using the Playbook library in Dart. It shows how to set up different scenarios with various layouts and child widgets, including using stub data for user information.

```dart
Playbook(
  stories: [
    Story(
      'Home',
      scenarios: [
        Scenario(
          'CategoryHome',
          layout: ScenarioLayout.fill(),
          child: CategoryHome(userData: UserData.stub),
        ),
        Scenario(
          'LandmarkList',
          layout: ScenarioLayout.fill(),
          child: Scaffold(
            appBar: AppBar(),
            body: LandmarkList(userData: UserData.stub),
          ),
        ),
        Scenario(
          'Container red',
          layout: ScenarioLayout.fixed(100, 100),
          child: Container(color: Colors.red),
        ),
      ],
    ),
  ],
);
```

--------------------------------

### Use Scenario Builder Pattern with BuildContext in Dart

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Illustrates how to create scenarios that require `BuildContext`, such as accessing `MediaQuery` or `Theme`, using the `Scenario.builder` constructor. This pattern is useful for components that depend on the widget tree's context.

```dart
import 'package:flutter/material.dart';
import 'package:playbook/playbook.dart';

final contextScenario = Scenario.builder(
  'Device Pixel Ratio',
  layout: ScenarioLayout.fixed(300, 300),
  builder: (BuildContext context) {
    final pixelRatio = MediaQuery.of(context).devicePixelRatio;
    return Center(
      child: Text('Device pixel ratio: $pixelRatio'),
    );
  },
);

final themeScenario = Scenario.builder(
  'Themed Widget',
  layout: ScenarioLayout.compressed(),
  builder: (context) {
    final theme = Theme.of(context);
    return Container(
      color: theme.primaryColor,
      padding: EdgeInsets.all(16),
      child: Text(
        'Uses theme color',
        style: theme.textTheme.bodyLarge?.copyWith(color: Colors.white),
      ),
    );
  },
);

```

--------------------------------

### Configure Fonts for Playbook Snapshots in YAML

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_generator/README.md

This YAML configuration snippet demonstrates how to specify font assets for Playbook snapshot tests within the 'pubspec.yaml' file. It can be configured under either 'playbook_snapshot' or the main 'flutter' section. This ensures that custom fonts are loaded correctly during snapshot generation.

```yaml
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
```

```yaml
playbook_snapshot:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
```

--------------------------------

### Configure Playbook Generator Build Settings in build.yaml

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Illustrates how to configure the `playbook_generator` in a `build.yaml` file. This allows customization of the input glob pattern for Dart files and the output file name for generated code. The default input is `lib/**.dart` and output is `generated_playbook.dart`.

```yaml
targets:
  $default:
    builders:
      playbook_generator:stories:
        options:
          input: lib/**.dart
          output: generated_playbook.dart
```

--------------------------------

### Display Playbook Scenarios in a Flutter Gallery

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Integrates the Playbook UI to display a searchable gallery of defined scenarios within a Flutter application. This requires the 'playbook_ui' package and a configured 'Playbook' instance.

```dart
import 'package:flutter/material.dart';
import 'package:playbook/playbook.dart';
import 'package:playbook_ui/playbook_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Playbook Gallery Demo',
      theme: ThemeData.light(),
      home: PlaybookGallery(
        title: 'My Component Library',
        playbook: Playbook(
          stories: [
            Story('Buttons', scenarios: [
              Scenario('Primary', child: ElevatedButton(onPressed: () {}, child: Text('Primary'))),
              Scenario('Secondary', child: OutlinedButton(onPressed: () {}, child: Text('Secondary'))),
            ]),
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Configure Playbook Snapshot Settings in pubspec.yaml

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

This YAML snippet shows how to configure Playbook snapshot settings within the pubspec.yaml file. It specifies font assets and customizes the snapshot output directory and subdirectory for organized storage of generated images.

```yaml
playbook_snapshot:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
  # default is /snapshots
  snapshot_dir: iOS
  # default is empty
  sub_dir: service
```

--------------------------------

### Generate Flutter Stories and Scenarios with PlaybookGenerator

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Demonstrates how to use the `@GenerateScenario` annotation to define stories and scenarios for Flutter widgets. This includes setting titles, layouts, and providing stub data for widgets. The `playbook` instance can be referenced within your application.

```dart
// some_story.dart

const storyTitle = 'Home';

@GenerateScenario(
  layout: ScenarioLayout.fill(),
)
Widget $CategoryHome() => CategoryHome(userData: UserData.stub);

@GenerateScenario(
  layout: ScenarioLayout.fill(),
)
Widget $LandmarkList() => Scaffold(
      appBar: AppBar(),
      body: LandmarkList(userData: UserData.stub),
    );

@GenerateScenario(
  title: 'Container red',
  layout: ScenarioLayout.fixed(100, 100),
)
Widget containerRed() => Container(color: Colors.red);

@GenerateScenario(
  title: 'Device pixel ratio',
  layout: ScenarioLayout.fixed(300, 300),
)
Widget devicePixelRatio(BuildContext context) =>
    Text('Device pixel ratio is ${MediaQuery.of(context).devicePixelRatio}');
```

--------------------------------

### Configure Snapshot Output and Fonts in pubspec.yaml

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Define default snapshot output paths and load custom fonts for your Flutter project by configuring the `playbook_snapshot` section in your `pubspec.yaml` file. This allows you to set global snapshot directories and include custom font assets.

```yaml
# pubspec.yaml
playbook_snapshot:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont.ttf
  # Default output directory (default: snapshots)
  snapshot_dir: iOS
  # Additional subdirectory path (default: empty)
  sub_dir: service

# Font files can alternatively be defined in flutter section
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

```

--------------------------------

### Configure Flutter Fonts in pubspec.yaml

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/packages/playbook_ui/README.md

Shows an alternative method to configure custom fonts for Flutter applications, which Playbook snapshot tests can also utilize. This involves specifying font families and their asset paths. Dependencies: Flutter SDK.

```yaml
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

```

--------------------------------

### Generate Playbook Snapshots for Visual Regression Testing

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Automates the generation of snapshot images for all Playbook scenarios across multiple device configurations using the 'playbook_snapshot' package. This facilitates visual regression testing. The command 'flutter test --update-goldens' is used to generate or update the golden files.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:playbook/playbook.dart';
import 'package:playbook_snapshot/playbook_snapshot.dart';

Future<void> main() async {
  testWidgets('Take snapshots', (tester) async {
    await Playbook(
      stories: [
        Story('Buttons', scenarios: [
          Scenario('Primary', child: ElevatedButton(onPressed: () {}, child: Text('Button'))),
          Scenario('Disabled', child: ElevatedButton(onPressed: null, child: Text('Disabled'))),
        ]),
        Story('Cards', scenarios: [
          Scenario('Basic Card', layout: ScenarioLayout.fixed(300, 200), child: Card(
            child: Padding(padding: EdgeInsets.all(16), child: Text('Card Content')),
          )),
        ]),
      ],
    ).run(
      const Snapshot(
        devices: [
          SnapshotDevice.iPhoneSE2nd,
          SnapshotDevice.iPhone15,
          SnapshotDevice.pixel6,
        ],
      ),
      tester,
      (widget, device) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            fontFamily: 'Roboto',
            platform: device.platform,
          ),
          home: widget,
        );
      },
    );
  });
}

// Run with: flutter test --update-goldens
// Generates snapshots in: test/snapshots/{DeviceName}/{StoryTitle}/{ScenarioTitle}.png

```

--------------------------------

### Create Playbook with Stories and Scenarios in Dart

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Defines a Playbook containing multiple stories, each with various scenarios. Scenarios can have different layouts and children, allowing for isolated UI component development and testing. This is the core API for structuring UI components within Playbook.

```dart
import 'package:flutter/material.dart';
import 'package:playbook/playbook.dart';

// Define a playbook with multiple stories
final myPlaybook = Playbook(
  stories: [
    Story(
      'Home',
      scenarios: [
        Scenario(
          'CategoryHome',
          layout: ScenarioLayout.fill(),
          child: CategoryHome(userData: UserData.stub),
        ),
        Scenario(
          'LandmarkList',
          layout: ScenarioLayout.fill(),
          child: Scaffold(
            appBar: AppBar(),
            body: LandmarkList(userData: UserData.stub),
          ),
        ),
        Scenario(
          'Container red',
          layout: ScenarioLayout.fixed(100, 100),
          child: Container(color: Colors.red),
        ),
      ],
    ),
    Story(
      'Buttons',
      scenarios: [
        Scenario(
          'Primary Button',
          layout: ScenarioLayout.compressed(),
          alignment: Alignment.center,
          child: ElevatedButton(
            onPressed: () {},
            child: Text('Click Me'),
          ),
        ),
      ],
    ),
  ],
);

```

--------------------------------

### Generate UI Component Snapshots with PlaybookSnapshot in Dart

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

This Dart code snippet illustrates how to use PlaybookSnapshot to automatically generate snapshots of UI components. It integrates with Flutter's testWidgets function to run tests, simulate device environments, and capture visual regressions.

```dart
Future<void> main() async {
  testWidgets('Take snapshots', (tester) async {
    await Playbook(
      stories: [
        barStory(),
        fooWidgetStory(),
        assetImageStory(),
        homePageStory(),
        scrollableStory(),
      ],
    ).run(
      Snapshot(
        devices: [SnapshotDevice.iPhoneSE2nd],
      ),
      (widget, device) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            fontFamily: 'Roboto',
            platform: device.platform,
          ),
          home: widget,
        );
      },
    );
  });
}
```

--------------------------------

### Configure Flutter Fonts in pubspec.yaml

Source: https://github.com/playbook-ui/playbook-flutter/blob/main/README.md

This YAML snippet demonstrates how to configure font assets for a Flutter project within the pubspec.yaml file. It specifies the font family name and the asset path for the font file, ensuring it's available for use in the application.

```yaml
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
```

--------------------------------

### Generate Scenarios from Annotations in Flutter

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Automatically generate playbook stories and scenarios from annotated Flutter functions and classes using PlaybookGenerator. This simplifies the process of creating visual test cases by allowing you to define scenarios directly within your widget code.

```dart
// lib/components/buttons.story.dart
import 'package:flutter/material.dart';
import 'package:playbook/playbook.dart';

// Required: Define story title as const
const storyTitle = 'Buttons';

// Generate scenario from function with $ prefix (title auto-generated from function name)
@GenerateScenario(
  layout: ScenarioLayout.compressed(),
)
Widget $PrimaryButton() => ElevatedButton(
  onPressed: () {},
  child: Text('Primary Button'),
);

// Generate scenario with custom title
@GenerateScenario(
  title: 'Secondary Button',
  layout: ScenarioLayout.compressed(),
)
Widget secondaryButton() => OutlinedButton(
  onPressed: () {},
  child: Text('Secondary'),
);

// Generate scenario with BuildContext parameter
@GenerateScenario(
  title: 'Themed Button',
  layout: ScenarioLayout.compressed(),
)
Widget themedButton(BuildContext context) {
  final theme = Theme.of(context);
  return ElevatedButton(
    style: ElevatedButton.styleFrom(backgroundColor: theme.primaryColor),
    onPressed: () {},
    child: Text('Themed'),
  );
}

// Generate scenario from Widget class
@GenerateScenario(
  layout: ScenarioLayout.fixed(200, 100),
)
class CustomCard extends StatelessWidget {
  const CustomCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(child: Center(child: Text('Custom Card'))); 
  }
}

// Manual scenario function (not generated, but included)
Scenario disabledButton() {
  return Scenario(
    'Disabled Button',
    child: ElevatedButton(onPressed: null, child: Text('Disabled')),
  );
}

// Generate multiple scenarios from function returning List<Scenario>
List<Scenario> variousButtons() {
  return ['Small', 'Medium', 'Large'].map((size) {
    return Scenario(
      size,
      child: ElevatedButton(
        onPressed: () {},
        child: Text(size),
      ),
    );
  }).toList();
}

```

--------------------------------

### Customize PlaybookGallery Appearance and Functionality

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Demonstrates how to customize the PlaybookGallery in Flutter, including theme switching (dark/light mode), external search control, canvas and background colors, thumbnail scaling, and custom action buttons. It utilizes the 'playbook_ui' package.

```dart
import 'package:flutter/material.dart';
import 'package:playbook_ui/playbook_ui.dart';

class CustomGalleryApp extends StatefulWidget {
  @override
  State<CustomGalleryApp> createState() => _CustomGalleryAppState();
}

class _CustomGalleryAppState extends State<CustomGalleryApp> {
  bool _isDarkMode = false;
  final _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: PlaybookGallery(
        title: 'Component Gallery',
        playbook: myPlaybook,
        // Custom canvas color for scenarios
        canvasColor: Colors.grey[100],
        // Custom checkered background for transparent widgets
        checkeredColor: Colors.blue[50],
        // Scale for thumbnail previews (0.0 to 1.0)
        scenarioThumbnailScale: 0.25,
        // Control search externally
        searchTextController: _searchController,
        // Add custom action button (settings icon by default)
        onCustomActionPressed: () {
          setState(() {
            _isDarkMode = !_isDarkMode;
          });
        },
        // Add additional custom action buttons
        otherCustomActions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              setState(() {});
            },
          ),
        ],
        // Customize scenario widget wrapper
        scenarioWidgetBuilder: (scenario, child) {
          return Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red),
            ),
            child: child,
          );
        },
      ),
    );
  }
}
```

--------------------------------

### Using Generated Playbook in Flutter App

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Integrates an auto-generated playbook into a Flutter application. It imports the generated playbook file and uses PlaybookGallery to display the components. Ensure you run the build runner to generate the playbook file.

```dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:playbook_ui/playbook_ui.dart';
// Import generated file
import 'generated_playbook.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Generated Playbook Demo',
      theme: ThemeData.light(),
      home: PlaybookGallery(
        title: 'Component Library',
        // Use auto-generated playbook
        playbook: playbook,
      ),
    );
  }
}

// Run code generation with: dart run build_runner build --delete-conflicting-outputs

```

--------------------------------

### Custom Test Tool for Accessibility Checks

Source: https://context7.com/playbook-ui/playbook-flutter/llms.txt

Implements a custom test tool, `AccessibilityChecker`, to perform accessibility checks on UI components within the playbook. It iterates through stories and scenarios, renders them using `WidgetTester`, and asserts accessibility guidelines like text contrast and tap target size.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:playbook/playbook.dart';
import 'package:playbook_snapshot/playbook_snapshot.dart';

// Custom test tool implementation
class AccessibilityChecker implements TestTool {
  @override
  Future<void> run(
    Playbook playbook,
    WidgetTester tester,
    PlaybookBuilder builder, {
    ScenarioWidgetBuilder? scenarioWidgetBuilder,
    Future<void> Function(WidgetTester tester)? setUpEachTest,
  }) async {
    for (final story in playbook.stories) {
      for (final scenario in story.scenarios) {
        final widget = builder(
          ScenarioWidget(scenario: scenario),
          SnapshotDevice.iPhoneSE2nd,
        );

        await tester.pumpWidget(widget);
        await tester.pumpAndSettle();

        // Verify accessibility
        await expectLater(tester, meetsGuideline(textContrastGuideline));
        await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));

        print('✓ ${story.title} - ${scenario.title} passed accessibility checks');
      }
    }
  }
}

// Usage in test
Future<void> main() async {
  testWidgets('Check accessibility', (tester) async {
    await myPlaybook.run(
      AccessibilityChecker(),
      tester,
      (widget, device) => MaterialApp(home: widget),
    );
  });
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.