Integrate Widgetbook with Fluent UI in Flutter Project

[esmaeil-ahmadipour]

Overview

Feature Description

Integrate and configure Widgetbook in the project using the Fluent UI Micro Framework in Flutter. The objective is to:

1. Create a simple Fluent UI widget, such as a Button.
2. Set up Widgetbook and ensure it runs successfully in the project.
3. Enable theme switching (e.g., light and dark modes) and variable adjustments using the Knob section within Widgetbook.

Click to expand the scenario

Scenario: Configuring and Running Widgetbook

A developer sets up Widgetbook in the project for efficient UI/UX testing. Steps include:

1. Install and configure Widgetbook.
2. Create a simple widget, such as a Fluent UI Button.
3. Test the widget in Widgetbook with theme-switching functionality.
4. Adjust variables like button text and color using the Knob section.

The developer ensures the widget runs perfectly in Widgetbook, enabling better collaboration and faster UI iteration.

Design Reference

• Widget Design: Fluent UI Micro Framework Documentation
  Ensure the widget adheres to Fluent UI design principles.

• Widgetbook Documentation: Widgetbook Docs
  Follow official Widgetbook guidelines for setup and configuration.

Related Issues

(No related issues currently.)

[PouriaMoradi021]

📊 Current Status:

Progress: 100%

• ✔️ Completed Tasks:

  • Task 1: Install and configure Widgetbook in the Flutter project.
  • Task 2: Create a simple Fluent UI widget, such as a Button.
  • Task 3: Set up Widgetbook and ensure it runs successfully in the project.
  • Task 4: Enable theme switching (light and dark modes) in Widgetbook.
  • Task 5: Adjust variables like button text and color using the Knob section within Widgetbook.

🚧 Challenges/Blockers:

• The requested item in this issue, namely the implementation of Widgetbook in the project, was done and this item was added to the project source code, but in order for the Widgetbook output to be accessible to anyone outside the Flutter team and to be accessible, for example, under the domain and with a link, this item was implemented in a separate repository.

The continuation of this implementation is on hold until the issue is resolved.

🛤️ Next Steps:

• Estimated time for completion: 1D

❓ Questions/Requests:

• Not identified

---

@esmaeil-ahmadipour

[esmaeil-ahmadipour]

This issue is blocked by issue #3 of WidgetBook. Once the tasks in issue #3 of WidgetBook are completed, this issue will require code refactoring to align with the new dependencies(pactus-gui-widgetbook).

Note: we use pactus-gui-widgetbook as one UI package .