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

Overview

GTK ❤️ Flutter

Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines.

GTK+Flutter example screenshot

Features

  • Adwaita style Colors and icons
  • Various GTK widgets ported to flutter
  • Provides various window decorations / titlebar buttons for header bar

Usage

  • To get color from theme you can use either getGtkColor function or getAdaptiveGtkColor function.
  • If you want custom titlebar then you can follow the steps for that on bitsdojo_window package.
  • Following Widgets are currently ported to flutter:
    GtkSidebar, GtkHeaderBar, GtkHeaderButton. GtkPopupMenu, GtkTwoPane.

Additional information

This package is dependent on

Additional packages to use with this package:

Classic API Docs

License

GNU LESSER GENERAL PUBLIC LICENSE v3

Comments
  • Make package compatible with other platforms

    Make package compatible with other platforms

    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 :)

    opened by jesusrp98 14
  • Introduce `AdwButton` widget

    Introduce `AdwButton` widget

    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.

    opened by jesusrp98 12
  • (WIP) Theming of sidebar

    (WIP) Theming of sidebar

    • 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.
    opened by MalcolmMielle 10
  • version 1.0.0

    version 1.0.0

    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
    opened by prateekmedia 8
  • View Switcher Improvements

    View Switcher Improvements

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

    View Switcher: View Switcher

    View Switcher Collapsed: View Switcher collapased

    Any feedback or code suggestion is welcome.

    opened by prateekmedia 8
  • Adds system colors scheme and hover on buttons

    Adds system colors scheme and hover on buttons

    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.

    opened by MalcolmMielle 8
  • How to use

    How to use "libadwaita_bitsdojo"?

    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)

    opened by Ridhubharan 7
  • Issue figuring out setup with NativeShell

    Issue figuring out setup with NativeShell

    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.

    Minimum from project test folder
    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!')),
          ),
        );
      }
    }
    
    My attempt to implement the library into the test
    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

    opened by MostHated 7
  • Remove unofficial from title and README

    Remove unofficial from title and README

    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.

    opened by MalcolmMielle 7
  • Move color logic outside of libadwaita utils/colors into theme package

    Move color logic outside of libadwaita utils/colors into theme package

    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.

    opened by MalcolmMielle 5
  • Move adwaitatheme to external package

    Move adwaitatheme to external package

    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.

    opened by MalcolmMielle 5
  • The Popup Menu is kinda broken...

    The Popup Menu is kinda broken...

    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: image

    opened by prateekmedia 0
  • donating-to-the-project

    donating-to-the-project

    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.

    opened by mattcoding4days 2
  • Some documentation on widgets/widget uses would be nice.

    Some documentation on widgets/widget uses would be nice.

    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:

    opened by TDuffinNTU 1
Releases(1.2.1)
  • 1.2.1(Jul 31, 2022)

  • 1.2.0(May 14, 2022)

    BREAKING

    • flapPolicy and flapPosition are now removed from FlapStyle use FlapOptions and options parameter of AdwFlap.
      • Previously
        AdwFlap(
          style: FlapStyle(
            width: ...,
            breakpoint: ...,
            flapPosition: ...,
            flapPolicy: ...,
          )
        )
        
      • Now
        AdwFlap(
          style: FlapStyle(
            width: ...,
            breakpoint: ...,
          ),
          options: FlapOptions(
            flapPosition: ...,
            flapPolicy: ...,
          )
        )
        
    • Fix spelling by renaming seperator to separator everywhere
    • AdwPopupMenu is now GtkPopupMenu
    • AdwStackSwitcher is now GtkStackSwitcher
    • AdwToggleButton is now GtkToggleButton

    DEPRECATED

    • headerbar parameter from AdwScaffold and AdwAboutWindow is deprecated
      • Previously
        AdwScaffold(
          headerbar: (viewS) => AdwHeaderBar(
            start: start,
            end: end,
            title: viewS ?? title,
          ),
          viewSwitcher: viewSwitcher,
        )
        
      • Now
        AdwScaffold(
          start: start,
          end: end,
          title: title,
          viewSwitcher: viewSwitcher,
        )
        

    ADDED

    • Add GtkDialog
    • Add appName and appVersion parameter
    • actions and controls parameter for AdwHeaderBar
    • Add ability to change horizontalTitleGap for AdwActionRow and AdwComboRow
    • Add visible property of FlapOptions
    • Add border to ViewSwitcher in mobile view
    • Init Translations

    CHANGED

    • Remove null checks from WidgetsBinding (Flutter 3.0.0)
    • Changed launch to launchUrl for url_launcher package
    • Changed default value of horizontalTitleGap to 8
    • Switch to titlebar_buttons package as window_decorations is deprecated
    • Link to external examples in example.md

    Full Changelog: https://github.com/gtk-flutter/libadwaita/compare/1.0.2...1.2.0

    Source code(tar.gz)
    Source code(zip)
  • 1.2.0-dev(Feb 24, 2022)

    BREAKING

    • flapPolicy and flapPosition are now removed from FlapStyle use FlapOptions and options parameter of AdwFlap.
      • Previously
        AdwFlap(
          style: FlapStyle(
            width: ...,
            breakpoint: ...,
            flapPosition: ...,
            flapPolicy: ...,
          )
        )
        
      • Now
        AdwFlap(
          style: FlapStyle(
            width: ...,
            breakpoint: ...,
          ),
          options: FlapOptions(
            flapPosition: ...,
            flapPolicy: ...,
          )
        )
        
    • Fix spelling by renaming seperator to separator everywhere
    • AdwPopupMenu is now GtkPopupMenu
    • AdwStackSwitcher is now GtkStackSwitcher
    • AdwToggleButton is now GtkToggleButton

    DEPRECATED

    • headerbar parameter from AdwScaffold and AdwAboutWindow is deprecated
      • Previously
        AdwScaffold(
          headerbar: (viewS) => AdwHeaderBar(
            start: start,
            end: end,
            title: viewS ?? title,
          ),
          viewSwitcher: viewSwitcher,
        )
        
      • Now
        AdwScaffold(
          start: start,
          end: end,
          title: title,
          viewSwitcher: viewSwitcher,
        )
        

    ADDED

    • Add GtkDialog
    • Add appName and appVersion parameter
    • actions and controls parameter for AdwHeaderBar
    • Add ability to change horizontalTitleGap for AdwActionRow and AdwComboRow
    • Add visible property of FlapOptions
    • Add border to ViewSwitcher in mobile view
    • Init Translations

    CHANGED

    • Changed default value of horizontalTitleGap to 8
    • Switch to titlebar_buttons package as window_decorations is deprecated
    • Link to external examples in example.md

    Full Changelog: https://github.com/gtk-flutter/libadwaita/compare/1.0.2...1.2.0-dev

    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Feb 14, 2022)

  • 1.0.0+2(Feb 14, 2022)

  • 1.0.0(Feb 13, 2022)

    What's Changed

    • Use very_good_analysis linting rules by @pablojimpas in https://github.com/gtk-flutter/libadwaita/pull/52
    • feat(popover): Make transition a simple fade by @simrat39 in https://github.com/gtk-flutter/libadwaita/pull/54
    • version 1.0.0 by @prateekmedia in https://github.com/gtk-flutter/libadwaita/pull/53
    • Trying to Fix #46 by @prateekmedia in https://github.com/gtk-flutter/libadwaita/pull/56

    BREAKING

    • AdwHeaderBar.minimal is now AdwHeaderBar.custom
    • Remove label parameter from AdwTextField
    • ViewSwitcherStyle is now ViewSwitcherPolicy
    • ViewSwitcherStyle.desktop and ViewSwitcherStyle.mobile are also renamed to ViewSwitcherPolicy.wide and ViewSwitcherPolicy.narrow

    Changes to widgets

    ComboRow

    • Dropdown is now scrollable if too many elements are there

    Flap

    • Renamed flapController to controller
    • Moved most of the things into FlapStyle class to simplify its usage in AdwScaffold

    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)

    TextField

    • Add autofocus parameter
    • Add prefixIcon parameter
    • Add onSubmitted parameter

    ViewSwitcher

    • Add badge in AdwViewSwitcher

    New Widgets

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

    Full Changelog: https://github.com/gtk-flutter/libadwaita/compare/1.0.0-rc.2...1.0.0

    Source code(tar.gz)
    Source code(zip)
  • 1.0.0+1(Feb 13, 2022)

  • 1.0.0-rc.2(Jan 9, 2022)

    BREAKING

    • AdwHeaderBarMinimal is now AdwHeaderBar.minimal
    • The start and end parameter of AdwHeaderBar are now List<Widget> instead of Widget
    • AdwTextButton is now AdwButton.flat
    • The height and expanded properties of ViewSwitcher are now deprecated

    Other Changes

    • Add AdwComboRow, AdwAvatar, AdwButton(.pill, .circular, .flat)
    • Improve Header Button
    • Update Sidebar Theming
    • Update View Switcher theming
    • Remove Scroll errors from example app by improving AdwClamp

    New Contributors

    • @jesusrp98 made their first contribution in https://github.com/gtk-flutter/libadwaita/pull/31
    • @pablojimpas made their first contribution in https://github.com/gtk-flutter/libadwaita/pull/43

    Full Changelog: c2a96ab3cd9909ca33c34416cc34963e6136d8a2...6971921aa14541bcc5b5fc5b02b7d9f2deb94ae7

    Source code(tar.gz)
    Source code(zip)
Owner
Prateek SU
17; git log | grep happiness
Prateek SU
An Android Launcher (having Ubuntu-Gnome flavour) build with Flutter

Ubuntu Launcher Introduction Ubuntu launcher is an custom android launcher build with Flutter with a Ubuntu-Gnome look. Though flutter is a cross plat

5hifaT 252 Dec 22, 2022
This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support.

Kitten Tricks This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free

Akveo 7k Dec 30, 2022
A Flutter package to make and use beautiful color scheme based themes.

FlexColorScheme Use FlexColorScheme to make beautiful color scheme based Flutter themes, with optional primary color surface blends. The themes are ba

Rydmike 459 Jan 1, 2023
Experiment with dark themes based on popular apps.

Fast Dark Theme This project is a Flutter web experiment. It allows you to prototype dark mode colors based on popular apps: WhatsApp, Twitter and Sha

Bernardo Ferrari 47 Dec 10, 2021
A set of Flutter widgets that makes grouping Checkboxes and Radio Buttons much easier!

grouped_buttons A set of Flutter widgets that makes grouping Checkboxes and Radio Buttons much easier! Installing Add the following to your pubspec.ya

Akshath Jain 102 Dec 28, 2022
Implements Microsoft's Fluent Design System in Flutter.

fluent_ui Design beautiful native windows apps using Flutter Unofficial implementation of Fluent UI for Flutter. It's written based on the official do

Bruno D'Luka 1.8k Dec 29, 2022
Flutter plugin that implements Android's SMS User Consent API

sms_user_consent Request user's phone number (supports dual sim) and/or consent to read SMS without adding any permissions, using Android's SMS User C

null 8 Sep 7, 2022
This is an apps that implements fundamental features of Flutter (Android Apps Only)

rpl_apps_flutter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Fakhry 0 Dec 28, 2021
Flutter package implements Sign Google redirect(working for incognito mode)

google_sign_in_web_redirect Flutter package implements Sign Google redirect(working for incognito mode). Usage Import the package dependencies: goog

null 2 Dec 15, 2022
A flutter plugin that implements google's standalone ml kit

Google's ML Kit for Flutter Google's ML Kit for Flutter is a set of Flutter plugins that enable Flutter apps to use Google's standalone ML Kit. Featur

kyle reginaldo 2 Aug 29, 2022
The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.

Flutter Rounded Date Picker The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes. Installing Add

benznest 313 Dec 22, 2022
A Package to implement, change and use Themes in Flutter

Modern Themes Github: https://github.com/Jules-Media/Modern_Themes Pub.dev: https://pub.dev/packages/modern_themes About With this Plugin you can impl

Jules Media 2 Jun 22, 2022
A set of utilities, themes and components for RTU MIREA applications by Mirea Ninja.

rtu-app-core - это красиво оформленный пакет компонентов графического интерфейса и многоцелевой набор утилит, разработанный для Flutter. rtu-app-core

Mirea Ninja 3 Aug 10, 2022
🎨 An opinionated, effective and correct way to provide multiple themes to your app.

theming This is an opinionated and effective way to provide multi-theme choice for your app. theming depends on provider and shared_preference for sta

Chinyeaka Chinonso 3 Nov 28, 2022
Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI Only a PART of code available, for complete code ping here Features of the app - Light Mode + Dark Mode 4 different color themes - pink/te

Deepa Pandey 31 Oct 5, 2022
Extended theme - Extended themes for Flutter

Extended Theme This package will allow you to extend theming in Flutter so you c

Stephan E.G. Veenstra 5 Apr 21, 2022
Flutter themes consistent with GitHub's Primer style guidelines

primer_flutter Flutter themes consistent with Primer style guidelines DISCLAIMER: This project is not affiliated with the Primer or GitHub organizatio

Reuben Turner 6 Aug 24, 2022
A Flutter package for simple and easy to use actions like buttons, checkboxes and switches.

Easy Actions Overview A Flutter package for simple and easy to use actions like buttons, checkboxes and switches. Features Elevated Button Outlined Bu

Ashish Bhakhand 3 Jun 25, 2022