gtk_window 0.0.2

A package that add some missing gtk4 windowing features to flutter.

GTK Window

A package that add some missing gtk4 windowing features to flutter. Works for linux but it can also work for MacOS and Windows.

Before	After

Features

• Window Command buttons like Maximize, Minimize, and Close
• Back button when there's a view that can be poped
• Custom leading and trailing widgets
• PreferedSize bottom widgets
• Light and Dark mode
• Headerbar reacts to the window focus state
• On window resize call allows you to add custom logic in reaction to the window resize
• Curved corners (thanks to handy_window)

Getting started

Linux:

We first need to remove the native title_bar.

Edit the linux/my_application.cc file as the following and just comment out the code below

//gboolean use_header_bar = TRUE;
// #ifdef GDK_WINDOWING_X11
//   GdkScreen* screen = gtk_window_get_screen(window);
//   if (GDK_IS_X11_SCREEN(screen)) {
//     const gchar* wm_name = gdk_x11_screen_get_window_manager_name(screen);
//     if (g_strcmp0(wm_name, "GNOME Shell") != 0) {
//       use_header_bar = FALSE;
//     }
//   }
// #endif
//   if (use_header_bar) {
//     GtkHeaderBar* header_bar = GTK_HEADER_BAR(gtk_header_bar_new());
//     gtk_widget_show(GTK_WIDGET(header_bar));
//     gtk_header_bar_set_title(header_bar, "example");
//     gtk_header_bar_set_show_close_button(header_bar, TRUE);
//     gtk_window_set_titlebar(window, GTK_WIDGET(header_bar));
//   } else {
//     gtk_window_set_title(window, "example");
//   }

Then move the two lines to the end of the my_application_activate class from:

gtk_window_set_default_size(window, 1280, 720);
//gtk_widget_show(GTK_WIDGET(window));

FlView* view = fl_view_new(project);
//gtk_widget_show(GTK_WIDGET(view));
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(view));

to:

static void my_application_activate(GApplication* application) {
...

gtk_widget_show(GTK_WIDGET(window));
gtk_widget_show(GTK_WIDGET(view));
}

Usage of GTKHeaderBar

It's a drop in replacment for the AppBar widget. So It allows you to just replace the Material with it for desktop clients.

Basic title

import 'package:gtk_window/gtk_window.dart';
Scaffold(
    appBar: GTKHeaderBar
        middle: Text('example title'),
      ),
)

Basic title with overflow hamburger menu:

import 'package:gtk_window/gtk_window.dart';
Scaffold(
    appBar: GTKHeaderBar
        middle: Text('example title'),
        trailing: ElevatedButton(
            child: Icon(child: Icons.menu,)
        ),
      ),
)

Basic title with search bottom:

import 'package:gtk_window/gtk_window.dart';
Scaffold(
    appBar: GTKHeaderBar
        middle: Text('Settings'),
        trailing: GTKButton(
            child: Icon(child: Icons.menu,)
        ),
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(48),
            child: TextField()
        )
      ),
)

Complicated split view with bottom search_bar:

Check out this fork

Current limitations

• The OS doesn't treat the appbar natively so it can't be hidden in the case of using a window manager.
• Currenlty right-clicking on the header does nothing
• You need to edit native code to hide the native appbar as flutter doesn't supprt it yet see #31373

Why not just use the native headerbar provided by flutter?

Due to the wide array of supported platforms that the flutter team mantain, they have to bundle features together to work on as much platforms as they can to simplify development. So they made the GTK appbar version to be just like MacOS's and Windows' as they just hover over the content without having so muchcontrol over them. In GTK the appbar's can have lots of widgets contained in them, which without this package you would have no control over them.

Disclaimer

I not very profecient with GTK itself and every suggestion is welcome.

Used plugins

I actually didn't write any platform specific codes for this package. I relied on the amazing work done by handy_window and window_manager maintainers.