[PR #6648] [MERGED] chore(flutter_desktop): set standard visual density for entire app #7503

New issue

Closed

opened 2026-03-23 23:19:55 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:19:55 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/6648
Author: @richardshiue
Created: 10/28/2024
Status: ✅ Merged
Merged: 10/29/2024
Merged by: @richardshiue

Base: main ← Head: chore/visual-density

📝 Commits (10+)

117afa1 chore: set standard visual density for entire app
d872874 fix: pixel overflow
fe31a57 fix: pixel overflow
6e65295 fix: pixel overflow
7837ae0 fix: pixel overflow
f45a888 fix: text button padding
511db0c chore: merge remote-tracking branch 'upstream/main' into chore/visual-density
c933f3b chore: slash menu fixes
d217b01 chore: slash menu fixes
604bea5 ditto

📊 Changes

15 files changed (+21 additions, -25 deletions)

View changed files

📝 frontend/appflowy_flutter/integration_test/desktop/document/document_with_date_reminder_test.dart (+0 -2)
📝 frontend/appflowy_flutter/integration_test/desktop/document/document_with_outline_block_test.dart (+0 -1)
📝 frontend/appflowy_flutter/integration_test/desktop/document/document_with_toggle_heading_block_test.dart (+1 -1)
📝 frontend/appflowy_flutter/integration_test/shared/database_test_op.dart (+4 -2)
📝 frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_page.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/filter_button.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/sort_button.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart (+7 -8)
📝 frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_text_cell.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/plugins/database/widgets/setting/setting_button.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart (+6 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/settings_dropdown.dart (+0 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart (+3 -3)
📝 frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart (+0 -1)
📝 frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart (+0 -1)

📄 Description

The compact visual density which Flutter automatically sets for desktop platforms makes implementing the pixel-perfect UI difficult because the decreased spacing is unexpected.

/// Returns a [VisualDensity] that is adaptive based on the given [platform].
///
/// For desktop platforms, this returns [compact], and for other platforms, it
/// returns a default-constructed [VisualDensity].
static VisualDensity defaultDensityForPlatform(TargetPlatform platform) {
  return switch (platform) {
    TargetPlatform.android || TargetPlatform.iOS || TargetPlatform.fuchsia => standard,
    TargetPlatform.linux || TargetPlatform.macOS || TargetPlatform.windows => compact,
  };
}

An example would be the "Text" and "TextField" widgets when provided with the same padding/content padding. Check this dartpad and toggle the visual density parameter.

https://dartpad.dev/?id=d402ab47c0494afa536548ce10aeb763

Feature Preview

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/6648 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 10/28/2024 **Status:** ✅ Merged **Merged:** 10/29/2024 **Merged by:** [@richardshiue](https://github.com/richardshiue) **Base:** `main` ← **Head:** `chore/visual-density` --- ### 📝 Commits (10+) - [`117afa1`](https://github.com/AppFlowy-IO/AppFlowy/commit/117afa14dae1df96dd18e7ecb30465c77d838751) chore: set standard visual density for entire app - [`d872874`](https://github.com/AppFlowy-IO/AppFlowy/commit/d872874e1cdeaf94fd58bdc3078be394fad0ae8c) fix: pixel overflow - [`fe31a57`](https://github.com/AppFlowy-IO/AppFlowy/commit/fe31a570de399f1f7c23912d7771071126d8d56e) fix: pixel overflow - [`6e65295`](https://github.com/AppFlowy-IO/AppFlowy/commit/6e652951c0b5ad62357a920e84ab62debebed5ce) fix: pixel overflow - [`7837ae0`](https://github.com/AppFlowy-IO/AppFlowy/commit/7837ae033b44c419cb583e618b368c82ca0ddaac) fix: pixel overflow - [`f45a888`](https://github.com/AppFlowy-IO/AppFlowy/commit/f45a888f762983a90bd79f58637c4abfe717892e) fix: text button padding - [`511db0c`](https://github.com/AppFlowy-IO/AppFlowy/commit/511db0c7fe54258d829d9bed8437b5b07be1f8ba) chore: merge remote-tracking branch 'upstream/main' into chore/visual-density - [`c933f3b`](https://github.com/AppFlowy-IO/AppFlowy/commit/c933f3bdf4aded69b749f3a079319e451dd3243c) chore: slash menu fixes - [`d217b01`](https://github.com/AppFlowy-IO/AppFlowy/commit/d217b014ae5cb8c5e5864034f000216ae4a9740a) chore: slash menu fixes - [`604bea5`](https://github.com/AppFlowy-IO/AppFlowy/commit/604bea5710e1ac5fe467390a9b1cf319e66cce96) ditto ### 📊 Changes **15 files changed** (+21 additions, -25 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/integration_test/desktop/document/document_with_date_reminder_test.dart` (+0 -2) 📝 `frontend/appflowy_flutter/integration_test/desktop/document/document_with_outline_block_test.dart` (+0 -1) 📝 `frontend/appflowy_flutter/integration_test/desktop/document/document_with_toggle_heading_block_test.dart` (+1 -1) 📝 `frontend/appflowy_flutter/integration_test/shared/database_test_op.dart` (+4 -2) 📝 `frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_page.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/filter_button.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/sort_button.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart` (+7 -8) 📝 `frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_text_cell.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/plugins/database/widgets/setting/setting_button.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart` (+6 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/settings_dropdown.dart` (+0 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart` (+3 -3) 📝 `frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart` (+0 -1) 📝 `frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart` (+0 -1) </details> ### 📄 Description The compact visual density which Flutter automatically sets for desktop platforms makes implementing the pixel-perfect UI difficult because the decreased spacing is unexpected. ```dart /// Returns a [VisualDensity] that is adaptive based on the given [platform]. /// /// For desktop platforms, this returns [compact], and for other platforms, it /// returns a default-constructed [VisualDensity]. static VisualDensity defaultDensityForPlatform(TargetPlatform platform) { return switch (platform) { TargetPlatform.android || TargetPlatform.iOS || TargetPlatform.fuchsia => standard, TargetPlatform.linux || TargetPlatform.macOS || TargetPlatform.windows => compact, }; } ``` An example would be the "Text" and "TextField" widgets when provided with the same padding/content padding. Check this dartpad and toggle the visual density parameter. https://dartpad.dev/?id=d402ab47c0494afa536548ce10aeb763 ### Feature Preview  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [ ] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>