Skip to content
Docs
Blog

Widgetbook Integration

Widgetbook 🔗 is a powerful tool for developing Flutter widgets in isolation. Vyuh provides first-class integration with Widgetbook through the vyuh_widgetbook package, making it easy to preview and test your content types.

Benefits

Section titled “Benefits”

🎯 Isolated Development

Section titled “🎯 Isolated Development”

Develop and test your content types in isolation, without the complexity of your full application. This makes it easier to:

  • Focus on specific components
  • Test different states and variations
  • Iterate quickly on designs

🔄 Live Preview

Section titled “🔄 Live Preview”

See your changes in real-time as you develop:

  • Preview content types with different layouts
  • Test light and dark themes
  • View content at different sizes

🧪 Testing Made Easy

Section titled “🧪 Testing Made Easy”

The isolated environment makes it easier to:

  • Verify content type behavior
  • Test different data scenarios
  • Ensure consistent styling
  • Debug layout issues

Installation

Section titled “Installation”

Add the widgetbook package to your project:

dependencies:
  vyuh_widgetbook: ^1.0.0

Usage

Section titled “Usage”

Create a new Flutter app for your widgetbook. Here’s an example from our Content Explorer 🔗 app:

import 'package:design_system/design_system.dart';
import 'package:feature_conference/feature_conference.dart' as conference;
import 'package:feature_counter/feature_counter.dart' as counter;
import 'package:feature_food/feature_food.dart' as food;
import 'package:feature_misc/feature_misc.dart' as misc;
import 'package:feature_puzzles/feature_puzzles.dart' as puzzles;
import 'package:feature_tmdb/feature_tmdb.dart' as tmdb;
import 'package:feature_unsplash/feature_unsplash.dart' as unsplash;
import 'package:feature_wonderous/feature_wonderous.dart' as wonderous;
import 'package:flutter/widgets.dart';
import 'package:vyuh_feature_auth/vyuh_feature_auth.dart' as auth;
import 'package:vyuh_feature_onboarding/vyuh_feature_onboarding.dart' as onboarding;
import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;
import 'package:vyuh_widgetbook/vyuh_widgetbook.dart';


void main() {
  // Initialize Flutter bindings if needed
  WidgetsFlutterBinding.ensureInitialized();


  runWidgetBook(
    features: () => [
      // Add your features here
      system.feature,
      counter.feature,
      tmdb.feature,
      food.feature,
      wonderous.feature,
      puzzles.feature,
      misc.feature,
      unsplash.feature,
      onboarding.feature,
      auth.feature(),
      conference.feature,
    ],
    // Optional: Use your design system themes
    lightTheme: DesignSystem.lightTheme,
    darkTheme: DesignSystem.darkTheme,
  );
}

Using in Your App

Section titled “Using in Your App”

To use Widgetbook in your own Vyuh app:

  1. Create a new Flutter app for your widgetbook (e.g., my_app_widgetbook)
  2. Add the vyuh_widgetbook dependency
  3. Import your features and their content types
  4. Use runWidgetBook to start the app
import 'package:flutter/widgets.dart';
import 'package:vyuh_widgetbook/vyuh_widgetbook.dart';
import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;
import 'package:my_feature_one/my_feature_one.dart' as feature1;
import 'package:my_feature_two/my_feature_two.dart' as feature2;


void main() {
  runWidgetBook(
    features: () => [
      system.feature,
      feature1.feature,
      feature2.feature,
    ],
    lightTheme: MyAppTheme.light,
    darkTheme: MyAppTheme.dark,
  );
}
Section titled “Navigation”

The widgetbook app organizes your content by:

  1. Features: Your app’s features are listed in the left sidebar
  2. Content Types: Each feature’s content types are shown under it
  3. Layouts: Each content type can have multiple layouts

Best Practices

Section titled “Best Practices”
  1. Preview Data: Use realistic preview data in your content types:
static final typeDescriptor = TypeDescriptor<MyContent>(
  schemaType: schemaName,
  title: 'My Content',
  fromJson: MyContent.fromJson,
  preview: () => MyContent(
    id: 'preview',
    title: 'Preview Title',
    description: 'This is a preview of my content type',
  ),
);

  1. Theme Testing: Always test your content types in both light and dark themes

  2. Size Testing: Test your content at different sizes to ensure responsive behavior

Next Steps

Section titled “Next Steps”