Install Widgetbook in a Flutter project

Create UI documentation for your project

• https://demo.widgetbook.io/#/?path=features/basket/views/basketview/non-empty

// single app
flutter_app
└─── lib
| └─── feature.dart
│ └─── main.dart
│ └─── main.widgetbook.dart
└─── pubspec.yaml

// separate app
flutter_app
└─── feature_1
└─── app
|    └───lib
|    |    └─── main.dart
|    └─── pubspec.yaml
└─── widgetbook_app
|    └─── lib
|    |    └─── main.widgetbook.dart
|    └─── pubspec.yaml

Install Widgetbook Package

• Add the packages to pubspec.yaml

dependencies:
   // ... your other dependencies
   widgetbook_annotation: ^3.2.0
   widgetbook: ^3.9.0

dev_dependencies:
  build_runner:
  widgetbook_generator: ^3.9.0

• Run flutter pub get

• Create a widgetbook.dart file in your lib folder

• Paste these code

// lib/widgetbook.dart
// widgetbook.dart 

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

// Import the generated directories variable
import 'widgetbook.directories.g.dart';

void main() {
  runApp(const WidgetbookApp());
}

// The @App annotation generates a file containing
// a single variable called directories.
@widgetbook.App()
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      // Use the generated directories variable
      directories: directories,
    );
  }
}

• Create another file to test out your widget. For example, custom_button.dart

• Paste these code

// lib/components/custom_button.dart
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

class CustomButton extends StatelessWidget {
  const CustomButton({
    super.key,
    required this.title,
    this.onPressed,
  });

  final String title;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(title),
    );
  }
}

@widgetbook.UseCase(
  name: 'Enabled',
  type: CustomButton,
)
CustomButton enabledButton(BuildContext context) {
  return CustomButton(
    title: 'Enabled',
    onPressed: () {},
  );
}

@widgetbook.UseCase(
  name: 'Disabled',
  type: CustomButton,
)
CustomButton disabledButton(BuildContext context) {
  return const CustomButton(
    title: 'Disabled',
  );
}

• Run the following command to generate the main.directories.g.dart file that has the directories variable:

$ flutter pub run build_runner build --delete-conflicting-outputs

$ dart run build_runner build -d

$ flutter run -d chrome -t lib/widgetbook.dart

Resources

• www.widgetbook.io

  www.widgetbook.io

• YouTubeUnleashing WidgetBook : The Ultimate Flutter Widget Organizer
  

  Unleashing WidgetBook : The Ultimate Flutter Widget Organizer

  Welcome to "Unleashing Widgetbook: The Ultimate Flutter Widget Organizer" a comprehensive YouTube tutorial designed for Flutter developers who are looking to streamline their widget management and enhance their team's efficiency. In this engaging and detailed guide, we dive deep into the world of Widgetbook, a game-changing tool that organizes, documents, and simplifies the workflow of Flutter widget development. 🔍 What You'll Learn: Introduction to Widgetbook: Discover what Widgetbook is and why it's a critical tool for managing a large number of widgets in extensive Flutter projects. Setting Up Widgetbook: Step-by-step instructions on installing and configuring Widgetbook in your existing Flutter projects. Organizing Your Widgets: Learn the best practices for adding, categorizing, and documenting widgets within Widgetbook to enhance reusability and clarity. Customizing Environments: Master setting up different environments in Widgetbook, catering to varied use cases like diverse screen sizes or platforms. Collaboration with Teams: Explore how Widgetbook serves as a vital collaboration tool, maintaining consistency across team members. Live Hot Reload Feature: Experience the efficiency of Widgetbook’s live hot reload feature, enabling instant reflection of changes in widgets. Sharing and Feedback: Understand how to utilize Widgetbook for sharing widgets with stakeholders and gathering crucial feedback. Real-World Example: Follow a practical example that demonstrates the entire process of integrating a common widget into Widgetbook. 🔖 Chapters: 00:00 Story Time 01:00 Introduction To WidgetBook 01:42 Why WidgetBook? 03:32 Sample App Walkthrough 04:34 Installation and Setup 07:28 Fixing Star Rating Widget 09:06 WidgetBook - Understanding Components and UseCase 10:39 WidgetBook - Knobs 13:14 WidgetBook - Addons 13:47 Example UseCases 15:30 Star Rating WidgetBook Demo 16:30 WidgetBook Example of FoodBasket App 18:12 Architecting WidgetBook For Your Own Complex App 21:12 Things to take care of 22:26 Outro 🌟 Who Should Watch: This tutorial is perfect for Flutter developers of all levels who aim to optimize their development process, UI/UX designers looking for a better way to collaborate with developers, and team leads seeking to maintain consistency in large-scale projects. 📈 Benefits: By the end of this session, you'll be equipped to leverage Widgetbook effectively, ensuring your development process is more efficient, consistent, and collaborative. Say goodbye to the chaos of managing numerous widgets, code duplication and hello to a streamlined, organized workflow. ✨ Stay Tuned: Don't forget to like, share, and subscribe for more Flutter tips and tricks. Your journey to becoming a Widgetbook wizard starts here! Join us in this transformative journey and redefine the way you handle Flutter widgets. Happy coding 🚀

  YouTube

• Widgetbook Docs
  

  Widgetbook Docs

  Build your Design System's widgets in isolation.