Implement Custom Window Header for Desktop Platforms

[esmaeil-ahmadipour]

Overview

Feature Description

This feature involves customizing the window header on the desktop version of the app by using the window_manager package. The goal is to implement a custom header with user-defined controls. (only on registration route & according figma design)

For the development of this feature, the window_manager package in Flutter will be used.

Design Reference

• Figma Design:

• Link to Figma Design / Custom Window Header (Light Mode)

• Link to Figma Design / Custom Window Header (Dark Mode)

Screenshot : Custom Window Header (Light Mode) 🖼️

Screenshot : Custom Window Header (Dark Mode) 🖼️

Platform-Specific Implementations

• Windows: Ensure that the custom header aligns well with the Windows desktop environment and functions as expected when dragging or resizing the window.
• Linux: Ensure compatibility and consistency with Linux desktop environments, making sure custom controls are functional.
• macOS: Ensure that the custom header integrates well with macOS's window management and styling, while also supporting window dragging and resizing.
• Web: There is currently no Figma design available for Web .HOLD
• Android: There is currently no Figma design available for Android.HOLD
• iOS: There is currently no Figma design available for iOS .HOLD

Related Issues

• Create and Document ToolbarLogo and Theme Switcher UI Components for Reusable and Consistent Implementation #35
• Implement custom window header for dashboard screen #49

[phoenixit99]

Hi @esmaeil-ahmadipour
I have some concerns about the feature. I see that the header has two scenarios:

Without Completed Setup: (Theme switcher, minimize, maximize, close icons)
Already Set Up: (Dashboard page: Transaction, Wallet, Logs icons)
Does this PR cover both scenarios, or should we create another issue?

[PouriaMoradi021]

📊 Current Status:

Progress: 90%

• ✔️ Completed Tasks:

  • Task 1: add/update interTextStyles according to new changes by design team in Figma
  • Task 2: update AppThemeData & add lightTypography & darkTypography in it
  • Task 3: make windows header curved (Doing in another issue)
  • Task 3: customized windows header for registeration scenario that has (Theme switcher, minimize, maximize, close icons)
  • Task 4: add documents according to mark down standards
  • Task 5: reformat / code styles

🚧 Challenges/Blockers:

• Not identified

🛤️ Next Steps:

• Estimated time for completion: 1D

❓ Questions/Requests:

• Not identified

---

@esmaeil-ahmadipour

[esmaeil-ahmadipour]

Does this PR cover both scenarios, or should we create another issue?
Thank you for your attention @phoenixit99 ! .This requires separate development, and a related issue will be created based on this comment. (new issue #49 )

[PouriaMoradi021]

Open points that require decision-making :

1- The window opened rounding. The application needs more time to search and prepare its data, which should be examined in a separate issue.

---

• To implement the toggle switch related to changing the theme in the app, the corresponding barcode was implemented using a widget in Fluent UI, but due to a conflict between the material in the theme and Fluent UI, I was unable to implement the methods related to changing the theme so that the theme could be implemented based on Fluent UI.

---

@esmaeil-ahmadipour