Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

Hi I'm the developer of the flutter_gtk package, and I really like this package!

The way gtk picks the theme from the GNOME DE via the gsettings plugin is genious, an incredible feature to build GTK apps with Flutter.

However this comes with a huge downside: no other platform is supported, apart from Linux.

What I think I'd build is some sort of 'default' theme (maybe light & dark), for when the app runs in an environment where no GTK config file is available. You can easily download the adwaita css files and place them inside the project, and use them when needed.

Let me know what you think :)

This PR introduces a new widget RawAdwTarget. This widget could be useful when you want to build a button or any clickable widget: AdwSidebarItem, AdwTextButton etc.

• It handles its state internally (hover, enabled, active) and allows you to change its background color and child depending on the state.
• This is based on the work done on the AdwHeaderButton and various other widgets around the app.
• It allows to reuse common logic and system for this kind of situations.

Included in this PR is a rework on the AdwHeaderButton using this new widget, in order to illustrate how this new widget could be used.

Let me know what you think about this widget and its use in the app.

• Add Welcome page and list page.
• Change in the theming of the sidebar to conform with libadwaita demo.
• Add combo row element.
• Changed popover to allow uniform card color in dark theme.

BREAKING

• AdwHeaderBar.minimal is now AdwHeaderBar.custom
• Remove label parameter from AdwTextField

Changes to widgets

HeaderBar

• Now the AdwHeaderBar is not dependent on any package, windowDecor object is now optional
• Add isTransparent parameter => Makes AdwHeaderBar's background and border color

Popover

• Revisit popup menu by using popover_gtk package (popover package with fade transition) (#35)

ViewSwitcher

• Add badge in AdwViewSwitcher

New Widgets

• AdwSwitch => port of GtkSwitch from gtk4
• AdwAboutWindow => port of upcoming AdwAboutWindow from libadwaita

• Use AdwButton.flat as base for View switcher tab
• Looks almost similar to the libadwaita one

View Switcher:

View Switcher Collapsed:

Any feedback or code suggestion is welcome.

Hi thanks for doing a good gtk/flutter package.

I started to do something similar a couple of months ago, but I cannot maintain or finish it. I've tried porting some of the stuff I did to your library, and would like to know what you think of it, but it might not be the cleanest code for now (sorry about that). If it seems interesting to you, I could clean up the code a bit for a better merge request.

It basically adds a class able to "parse" the color of the gtk theme enabled (even if other than Adwaita) and apply it generally and the whole app through the theme attributes of MaterialApp. Furthermore, I have added a parameter to the headerbar and headerbutton to use either default Adwaita or the system colors parse by GnomeTheme. Finally, the commit adds hover to the header buttons.

Instructions are not clear. Where am I supposed to put the following(as per https://github.com/gtk-flutter/libadwaita_plugins/tree/main/libadwaita_bitsdojo#usage)?

AdwHeaderBar.bitsdojo(
    appWindow: appWindow,
    ...
)

The 'headerbar' used in the 'AdwScaffold' widget is deprecated. (https://github.com/gtk-flutter/libadwaita_plugins/blob/main/libadwaita_bitsdojo/example/example.md)

Hey there, I am having a bit of an issue figuring out exactly where these components are supposed to go within the overall application hierarchy. I tried to look for other projects on github which might be using the mixture of NativeShell and this library, but to my surprise, the only thing that came up was this repo's readme and the actual implementation within the library. Unfortunately, that didn't give me much to try and compare with. If at all possible, could I be pointed in the right direction on what needs to go where? Below is the bare minimum NativeShell setup necessary to produce a working window, which I was using from the Test folder of NativeShell. I wanted to start as minimal as possible to make sure things would work as expected before trying to build out anything, but I can't seem to get a window to load once I try and implement this library. I am most certainly missing a silly detail on where the AdwHeaderBar.minimalNativeshell() needs to actually go, but I just can't quite put my finger on where.

P.S. I tried using fix46, as I was looking at other repos that used this lib without NativeShell, so I figured it was worth a go since it had a header / body field, but unfortunately that would not build with NativeShell, something about the url_launcher it doesn't seem to like. The main branch at least build and "runs", even if I can't see it, so I figure best to probably stick with that.

import 'package:flutter/material.dart';
import 'package:nativeshell/nativeshell.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTextStyle(
        style: TextStyle(
          color: Colors.white,
          fontSize: 14,
        ),
        child: Container(
          color: Colors.black,
          child: WindowWidget(
            onCreateState: (initData) {
              WindowState? state;
              state ??= MainWindowState();
              return state;
            },
          ),
        ),
      ),
    );
  }
}

class MainWindowState extends WindowState {
  @override
  WindowSizingMode get windowSizingMode =>
      WindowSizingMode.atLeastIntrinsicSize;

  @override
  Widget build(BuildContext context) {
    return WindowLayoutProbe(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Center(child: Text('Welcome to NativeShell!')),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:nativeshell/nativeshell.dart';
import 'package:adwaita/adwaita.dart';
import 'package:get/get.dart';
import 'package:libadwaita/libadwaita.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: AdwaitaThemeData.dark(), // <--- added theme here
      home: DefaultTextStyle(
        style: TextStyle(
          color: Colors.white,
          fontSize: 14,
        ),
        child: Container(
          color: Colors.black,
          child: WindowWidget(
            onCreateState: (initData) {
              WindowState? state;
              state ??= MainWindowState();
              return state;
            },
          ),
        ),
      ),
    );
  }
}

class MainWindowState extends WindowState {
  @override
  WindowSizingMode get windowSizingMode =>
      WindowSizingMode.atLeastIntrinsicSize;

// I tried several different overall setups, but could not get any to work. 
// Such as putting the bar ^ up in the parent class wrapping the WindowWidget
// also a few variations of what you see here below, but so far everything
// I have tried results in no window actually loading.

  @override
  Widget build(BuildContext context) {
    return AdwHeaderBar.minimalNativeshell(  // <---- Header here?
      window: Window.of(context)  , // .parentWindow, currentWindowMenu
      start: [
        WindowLayoutProbe( // <--- Does this go in start? 
          child: Container(
            padding: EdgeInsets.all(20),
            child: Center(child: Text('Welcome to NativeShell!')),
          ),
        ),
      ],
    );
  }
}

Any help would be greatly appreciated! Thanks, -MH

I'm thinking that the unofficial make it sound bad? Since everything is LGPLv3 that precision is not needed.

Maybe replacing

Unofficial implementation of Libadwaita Widgets in Flutter.

with:

An implementation of Libadwaita Widgets in Flutter.

Is enough.

For now, the colors used for avatars are hardcoded in utils/colors.dart. The color logic should be delegated to the theme (e.g. yaru or adwaita) and moved out of libawaita.

I think Adwaita theme should be a separate package as is done for yaru. That way we could easily update it outside of GTK and other could use the theme in their apps.

We could also add the retro-compat with gtk3 css in it.

Let me know if it's of interest and if you have time to do it otherwise I'll start with that.

The current implementation of popup menu is not good as it doesn't detect the screen edge hence sometimes goes out of the screen and with the Roundness coming in from #73 It's like we will have a broken popup menu situtation as shown below:

Hi, I'd just like to say I think this is an amitious library, and I am really enjoying using it, so thank-you for your hard work, something like libadwaita for flutter will be a key building block in building robust Linux applications quickly and furthering Linux mainstream adoption. For this reason I was wondering how programmers like my self could donate to the project monetarily? Pay pal links? Crypto wallet addresses? I would propose an update to the README with these types of links.

A few examples would be:

• screenshots showing the appearance of widgets in their docstrings. Using flutter_goldens for this could work!
• mentioning dependencies for certain apps, such as AdwScaffold.actions requiring the `libadwaita_bitsdojo' package installed
• examples of usage for widgets (just a few lines would do just fine)

I'd be happy to have a go at some of this :+1: