Improve design system: new widgets, bug fixes, no more black window at launch

New widgets: OmarchyDialog (+showOmarchyDialog/showOmarchyConfirmDialog),
OmarchyContextMenuArea/showOmarchyContextMenu, showOmarchyToast,
OmarchySlider, OmarchyRadio and OmarchyBadge, all covered in the gallery
example and by widget tests.

Fixes across existing components: tab close buttons now invoke onClose,
command panel keyboard navigation works, select highlights the selected
option, PanelSize.absolute resolves to its own size, split panel honors
min/max sizes and vertical orientation, status bar trailing grouping,
divider orientation semantics, button style equality, and several
controller/focus-node lifecycle fixes.

The Linux runners (example, examples/app) and the omarchy_app template now
only show the GTK window after Flutter renders its first frame, removing
the black window at startup; documented in the README.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VuFFumwANFHGJH6eHFmcjD

Author: aloisdeniel

examples/app/packages/app/linux/runner/my_application.cc

@@ -14,6 +14,13 @@ struct _MyApplication {
 
 G_DEFINE_TYPE(MyApplication, my_application, GTK_TYPE_APPLICATION)
 
+// Called when the first Flutter frame is received. The window is only shown
+// at this point, so the user never sees the default (black) surface that
+// backs the Flutter view before rendering starts.
+static void first_frame_cb(MyApplication* self, FlView* view) {
+  gtk_widget_show(gtk_widget_get_toplevel(GTK_WIDGET(view)));
+}
+
 // Implements GApplication::activate.
 static void my_application_activate(GApplication* application) {
   MyApplication* self = MY_APPLICATION(application);
@@ -48,7 +55,6 @@ static void my_application_activate(GApplication* application) {
   }
 
   gtk_window_set_default_size(window, 1280, 720);
-  gtk_widget_show(GTK_WIDGET(window));
 
   g_autoptr(FlDartProject) project = fl_dart_project_new();
   fl_dart_project_set_dart_entrypoint_arguments(project, self->dart_entrypoint_arguments);
@@ -57,6 +63,12 @@ static void my_application_activate(GApplication* application) {
   gtk_widget_show(GTK_WIDGET(view));
   gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(view));
 
+  // Show the window when Flutter renders its first frame. The view must be
+  // realized so rendering can start while the window is still hidden.
+  g_signal_connect_swapped(view, "first-frame", G_CALLBACK(first_frame_cb),
+                           self);
+  gtk_widget_realize(GTK_WIDGET(view));
+
   fl_register_plugins(FL_PLUGIN_REGISTRY(view));
 
   gtk_widget_grab_focus(GTK_WIDGET(view));

packages/flutter_omarchy/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.3.0
+
+### New widgets
+
+* `OmarchyDialog`, `showOmarchyDialog` and `showOmarchyConfirmDialog` for modal dialogs.
+* `OmarchyContextMenuArea` and `showOmarchyContextMenu` for right-click context menus (with icons, shortcut hints, accents, disabled items and dividers).
+* `showOmarchyToast` for transient notifications stacked at the bottom right of the screen.
+* `OmarchySlider`, a horizontal slider with divisions and keyboard support.
+* `OmarchyRadio`, a radio button for single-choice groups.
+* `OmarchyBadge`, a small status/count label (filled and outlined).
+
+### Improvements
+
+* `OmarchyTab.closable` now actually invokes `onClose` when the close icon is pressed (with its own hover feedback).
+* `OmarchyCommandPanel` keyboard navigation (arrows, Enter, Escape) now works, and the item list refreshes when `items` changes.
+* `OmarchySelect` now highlights the currently selected option in the dropdown.
+* `OmarchyCheckbox`, `OmarchyToggle` and the new `OmarchyRadio` accept a `focusNode` and show a focus highlight; `OmarchyButton` gained `autofocus`.
+* `OmarchyTile` gained a `trailing` widget slot.
+* `OmarchyResizeDivider` uses the correct resize cursor for vertical splits.
+* `OmarchySplitPanel` respects `minPanelSize`/`maxPanelSize` while dragging and sizes the panel correctly in vertical orientation.
+* `PanelSize.absolute` now resolves to its own size instead of the available space.
+* `OmarchyStatusBar` renders `trailing` statuses with proper grouping.
+* The Linux runner of the example (and the `omarchy_app` template) now waits for Flutter's first frame before showing the window, removing the black window at startup. See the README section "Avoid the Black Window at Startup".
+* Lifecycle fixes: external `OmarchySidePanelController`s are no longer disposed by the panel, `OmarchyFocusBorder` disposes its internal focus node, and theme config reloads no longer call `setState` after unmount.
+
+### Breaking changes
+
+* `OmarchyDivider` semantics were inverted and have been fixed: `direction` is now the axis along which the line extends (`OmarchyDivider.horizontal()` is a full-width line for columns, `OmarchyDivider.vertical()` a full-height line for rows). The default is now horizontal.
+* Removed the unused `padding` parameter of `OmarchyButton` (use the style's `padding` instead).
+* Removed the unused `alignment` parameter of `OmarchyPopOverContainer`.
+* Removed the unimplemented `OmarchyBordered` placeholder.
+
 ## 0.2.0
 
 * Support for the latest Omarchy theming system: colors are now read from the canonical `~/.local/state/omarchy/current/theme/colors.toml` palette.

packages/flutter_omarchy/README.md

@@ -37,7 +37,7 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return OmarchyApp(
       home: OmarchyScaffold(
-        body: Center(
+        child: Center(
           child: OmarchyButton(
             onPressed: () {},
             child: Text('Hello Omarchy!'),
@@ -102,41 +102,90 @@ Omarchy provides a rich set of widgets:
 
 #### Basic Widgets
 
-- `OmarchyButton`: Terminal-style button
+- `OmarchyButton`: Terminal-style button (outline, filled and bar styles)
 - `OmarchyTextInput`: Text input field
 - `OmarchyCheckbox`: Checkbox component
+- `OmarchyRadio`: Radio button for single-choice groups
+- `OmarchyToggle`: On/off toggle switch
+- `OmarchySlider`: Horizontal slider with keyboard support
+- `OmarchySelect`: Dropdown selection
 - `OmarchyTile`: List tile component
+- `OmarchyBadge`: Small status or count label
+- `OmarchyProgressBar`: Progress indicator
+- `OmarchyLoader`: Animated loading indicator
 
 #### Navigation
 
 - `OmarchyScaffold`: Main layout container
-- `OmarchyNavigationBar`: Side navigation bar
-- `OmarchyTabs`: Tabbed interface
+- `OmarchyNavigationBar`: Top navigation bar with leading/trailing actions
+- `OmarchyTabs`: Tabbed interface with closable tabs
 - `OmarchyStatusBar`: Status bar for displaying app state
+- `OmarchyTree`: Tree view for hierarchical data
 
 #### Layout
 
 - `OmarchyDivider`: Horizontal or vertical divider
+- `OmarchySplitPanel`: Resizable two-pane layout
+- `OmarchySidePanel`: Overlay side panel (drawer)
 - `OmarchyResizeDivider`: Resizable divider for split views
 
-#### Utility
+#### Overlays
 
 - `OmarchyTooltip`: Tooltip component
 - `OmarchyPopOver`: Popup overlay
+- `OmarchyDialog` / `showOmarchyDialog` / `showOmarchyConfirmDialog`: Modal dialogs
+- `OmarchyContextMenuArea` / `showOmarchyContextMenu`: Right-click context menus
+- `showOmarchyToast`: Transient notifications stacked at the bottom right
+- `OmarchyCommandPanel` / `showOmarchyCommandPanel`: Command palette
 
 ## Bundling the app for Omarchy
 
 To bundle and run your Flutter Omarchy application on Linux, follow these steps:
 
 ### Remove the Title Bar
 
-Flutter Linux apps are GTK windows. To remove the default title bar, edit `linux/runner/my_application.cc`.
+Flutter Linux apps are GTK windows. To remove the default GTK header bar, edit `linux/runner/my_application.cc` and disable it:
 
-Remove the code related to the title bar:
+```c
+gboolean use_header_bar = FALSE;
+```
+
+Under Hyprland (Omarchy's compositor) windows are tiled and undecorated, so this is all that is needed for a clean, borderless window. Rebuild the app to apply the change. The `omarchy_app` mason template applies this automatically.
+
+### Avoid the Black Window at Startup
+
+By default, older Flutter Linux runners show the GTK window immediately, before Flutter has rendered anything. Since the Flutter view's surface defaults to black, the window appears filled with black for a moment at startup, before the theme background is painted.
+
+The fix is to keep the window hidden until Flutter has rendered its first frame, using the `first-frame` signal of `FlView`. Recent Flutter versions (3.22+) generate a `linux/runner/my_application.cc` that already does this. If your runner was generated by an older Flutter version, update `my_application_activate` in `linux/runner/my_application.cc`:
+
+```c
+// Called when the first Flutter frame is received: only show the
+// window at this point to avoid a black window at startup.
+static void first_frame_cb(MyApplication* self, FlView* view) {
+  gtk_widget_show(gtk_widget_get_toplevel(GTK_WIDGET(view)));
+}
+
+static void my_application_activate(GApplication* application) {
+  // ...
+  gtk_window_set_default_size(window, 1280, 720);
+  // Do NOT call gtk_widget_show(GTK_WIDGET(window)) here.
+
+  FlView* view = fl_view_new(project);
+  gtk_widget_show(GTK_WIDGET(view));
+  gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(view));
 
-> TODO
+  // Show the window when Flutter renders its first frame. The view must be
+  // realized so rendering can start while the window is still hidden.
+  g_signal_connect_swapped(view, "first-frame", G_CALLBACK(first_frame_cb),
+                           self);
+  gtk_widget_realize(GTK_WIDGET(view));
+
+  fl_register_plugins(FL_PLUGIN_REGISTRY(view));
+  gtk_widget_grab_focus(GTK_WIDGET(view));
+}
+```
 
-Rebuild the app, and you’ll have a clean, borderless window.
+The `omarchy_app` mason template applies this patch automatically when the generated runner does not already handle it.
 
 ### Building the Linux Bundle
 
@@ -242,9 +291,10 @@ flutter run --app=pomodoro
 * Preconfigured HJKL shortcuts for navigation
 * Specific ormarchy theme configuration (colors, hide nav bar, ...)
 * Widgets 
-  * Toasts
-  * Progress
   * Skeleton
+  * Menu bar
+  * Date/time pickers
+  * Table / data grid
 * Examples
   * Todo list
   * AI Chat

packages/flutter_omarchy/example/lib/calculator/app.dart

@@ -94,7 +94,7 @@ class _CalculatorPageState extends State<CalculatorPage> {
             child = Row(
               children: [
                 Expanded(child: FadeIn(child: HistoryPane())),
-                OmarchyDivider.horizontal(),
+                OmarchyDivider.vertical(),
                 SizedBox(width: 1000, child: child),
               ],
             );