ubuntu / archive_yaru.dart

Ubuntu Yaru Flutter Theme

yaru.dart implements the Ubuntu Yaru design and Canonical Vanilla Design as a Flutter theme for material.dart.

Test the theme in your browser - HERE

Using Yaru

To be able to use this package follow this steps:

1. Installation

2. Import yaru.dart

   import 'package:yaru/yaru.dart';

3. Create YaruTheme

   YaruTheme(
     builder: (context, yaru, child) {
       return MaterialApp(
         theme: yaru.theme,
         darkTheme: yaru.darkTheme,
         home: Scaffold(
           appBar: AppBar(
             title: Text('Yaru Theme'),
           ),
           body: Container(),
         ),
       );
     }
   );

Variants

Yaru comes in several variants. The YaruTheme widget detects the appropriate flavor and accent color from the system on Linux, and defaults to YaruVariant.orange on other platforms. Applications may choose a specific variant by manually setting the variant propert.

YaruTheme(
  data: YaruThemeData(
    variant: YaruVariant.red,
  ),
  child: ...
)

Contributing to yaru.dart

We welcome contributions! See the contribution guide for more details.

archive_yaru.dart's Issues

[proposal] ammend PR 29

observing the changes in PR ubuntu/yaru.dart#29
I can see that

• the comment claims to fix ubuntu/yaru.dart#16 but does not only partially (see ubuntu/yaru.dart#15 and ubuntu/yaru.dart#21)

• ignores some of effective dart's guideline

  • if can be const if should be const, if cannot better calculate it than store it as final
    curiously this doesn't occur consistently

• Colors holds both ColorSwatchs and Colors without comments or distinction

  • the former offers only a partial implementation compared with the previous code

cc @Feichtmeier

Use no titlebar/headerbar or at least a ssd titlebar ontop of the example app window

It looks like the bar with the window controls ontop of the flutter window is a headerbar and not a titlebar drawn by the window manager

the ideal thing would be, if nothing at all would be put on top and flutter would draw it's own titlebars

I found this is actually could be possible with:
https://pub.dev/documentation/window_utils/latest/
https://pub.dev/packages/bitsdojo_window

alternatively it would be at least good if those would be normal titlebars which are already smaller.
Yes it is not directly related to yaru.dart but indirectly because I think that the example app does not need the headerbar.

This is also a good example why the default variant is not really needed @kenvandine

[proposal] change `final` to `const`

const offers advantages over final in terms of performance with no downsides

M3: adjust yaru switch style

• borders are too aggressive
• wrong thumb colour
• due to constant border colour the size of the light switches jump when turning them off

ElevatedButton elevation

@long-chung

Looking at all your mockups you always paint the green buttons (ElevatedButtons) to be rather flat.
Should we eventually change this here in yaru.dart (the theme package the installer and some of my personal projects for ubuntu uses)?
We already changed the elevation (as you might remember) of the AppBar down to 1.0
So we might be already somehow demonstrating our "own" material style :) ?

Currently in yaru (regular material design)

Elevation down to 1

BottomNavigationTheme does not use primary color

The purple does not work here. It is fixable with

bottomNavigationBarTheme: BottomNavigationBarThemeData(selectedIconTheme: theme.primaryIconTheme),

but...
Actually I think about skipping the purple entirely for the flutter theme and only rely on orange plus the green elevated buttons/ floating action buttons

WDYT @elbeicktalat @kenvandine ?

Button density

There are three modes for the button density for Material buttons in Flutter:

Standard

Comfortable

Compact

Which one do you prefer? @madsrh @long-chung tagggin you both because the yaru theme is used the ubuntu-installer and for the general design direction

[proposal] example should honor `best-practices` and `effective dart`

the current implementation of the example,
while demonstrating successfully the package
greatly disregards many best practices including dry, effective dart and performance best practices,
together with plain wrong initialization and unnecessary rebuilds

[proposal] Change default input decoration theme border to OutlineInputBorder

In most places I see text input fields in Ubuntu, there is an outlined border around them. I would hence propose to set the default InputDecorationTheme.border to a properly sized and shaped OutlineInputBorder. In case you think so too, you may assign me to the issue.

generated_plugin files relevant?

After using flutter 2 from flutter upgrade my vscode automatically modifies those two files

changed:       example/linux/flutter/generated_plugin_registrant.cc
changed:       example/linux/flutter/generated_plugin_registrant.h

by removing

// clang-format off

@MarcusTomlinson do we need this in master or should we put those files on .gitignore and remove them from the repository?

Improve menu contrast

the border is invisible

Proposal: Change light bg color

#f7f7f7 is currently being used

#fafafa is an idea by @madsrh

Isn't the current one lighter than the one you proposed? Sorry I have hard times actually seeing the difference xD

Regression: input focus looks different in the dark theme

This happen with new new release so either from #44 or #48
@elbeicktalat @ArishSultan any idea why this happened after your PRs?

Text Form could be orange

As in the entire system the text form is colored by orange color, also I don't think any one can read definitely good the text form title if is purple.

Text Selection color is perma blue

Text selection color is always blue, no matter what theme is selected:

@jpnurmi any idea why this is happening now? I could be wrong but I think this might be related to your recent (very awesome! thanks, again) commits :)

Change switch color dark theme

Without looking to the border, as you see in the default yaru switch is colored like so:

But actually in this project it's look like so:

Which I don't believe it's cool, because the Thumb & Track are colored in the same color.

Ok. But what can be good?
I'm not sure if the following is cool.

Also I think if both two still purple, but with different shade there'll be no any problem.

Yaru bundles 48mb of fallback fonts

• Create the default Flutter template app:

  flutter create .

  $ flutter create .
  Creating project ....
    pubspec.yaml (created)
  [...]
    .gitignore (created)
    linux/flutter/CMakeLists.txt (created)
    linux/my_application.cc (created)
    linux/main.cc (created)
    linux/CMakeLists.txt (created)
    linux/my_application.h (created)
    linux/.gitignore (created)
  Running "flutter pub get" in flutter_yaru...                     1,090ms
  Wrote 80 files.
  
  All done!
  In order to run your application, type:
  
    $ cd .
    $ flutter run
  
  Your application code is in ./lib/main.dart.

• Build the app bundle:

  flutter build linux --release

  $ flutter build linux --release
  
  💪 Building with sound null safety 💪
  
  Building Linux application...                                           

• Inspect the size of Flutter assets: (1.7mb)

  du -h

  $ du -h build/linux/x64/release/bundle/data/flutter_assets
  284K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons/assets
  288K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons
  292K	build/linux/x64/release/bundle/data/flutter_assets/packages
  1,3M	build/linux/x64/release/bundle/data/flutter_assets/fonts
  1,7M	build/linux/x64/release/bundle/data/flutter_assets

• Add yaru as a dependency in pubspec.yaml, rebuild the app bundle:

  flutter pub get && flutter build linux --release

  $ flutter pub get && flutter build linux --release
  Running "flutter pub get" in flutter_yaru...                       368ms
  
  💪 Building with sound null safety 💪
  
  Building Linux application...       

• Inspect the size of the assets again: (50mb)

  du -h

  $ du -h build/linux/x64/release/bundle/data/flutter_assets
  284K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons/assets
  288K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src/utils/fonts
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src/utils
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru
  49M	build/linux/x64/release/bundle/data/flutter_assets/packages
  1,3M	build/linux/x64/release/bundle/data/flutter_assets/fonts
  50M	build/linux/x64/release/bundle/data/flutter_assets

• List the fonts

  ls -lah

  $ ls -lah build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src/utils/fonts
  total 48M
  drwxr-xr-x 2 jpnurmi jpnurmi 4,0K Sep 27 16:27 .
  drwxr-xr-x 3 jpnurmi jpnurmi 4,0K Sep 27 16:27 ..
  -rw-r--r-- 1 jpnurmi jpnurmi 366K Sep 27 16:27 LiberationSerif-BoldItalic.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 360K Sep 27 16:27 LiberationSerif-Bold.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 365K Sep 27 16:27 LiberationSerif-Italic.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 382K Sep 27 16:27 LiberationSerif-Regular.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi  20M Sep 27 16:27 NotoSansCJK-Bold.ttc
  -rw-r--r-- 1 jpnurmi jpnurmi  20M Sep 27 16:27 NotoSansCJK-Regular.ttc
  -rw-r--r-- 1 jpnurmi jpnurmi 4,4M Sep 27 16:27 TibetanMachineUni.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 349K Sep 27 16:27 Ubuntu-BI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 326K Sep 27 16:27 Ubuntu-B.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 401K Sep 27 16:27 Ubuntu-LI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 406K Sep 27 16:27 Ubuntu-L.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 359K Sep 27 16:27 Ubuntu-MI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 334K Sep 27 16:27 Ubuntu-M.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 378K Sep 27 16:27 Ubuntu-RI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 346K Sep 27 16:27 Ubuntu-R.ttf

• According to ubuntu-21.10-beta-desktop-amd64.manifest, the following packages are installed by default:

  • fonts-noto-cjk 1:20201206-cjk+repack1-1
  • fonts-noto-color-emoji 0~20200916-1
  • fonts-noto-mono 20201225-1build1
  • fonts-tibetan-machine 1.901b-5.1build1

• Looking at text_theme.dart, these fonts are used as fallbacks. Are there other smaller alternatives?

Build issue with the Flutter snap

$ /snap/bin/flutter build linux --release
Running "flutter pub get" in example...                          2,022ms

💪 Building with sound null safety 💪

CMake Warning at flutter/ephemeral/.plugin_symlinks/handy_window/linux/CMakeLists.txt:40 (message):
  The `handy_window` package requires libglib2.0-0 >= 2.58 available in
  Ubuntu 20.04 and later.  Using normal Flutter window instead.


/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/.plugin_symlinks/yaru/linux/yaru_plugin.cc:9:1: error: unused function 'glib_listautoptr_cleanup_YaruPlugin' [-Werror,-Wunused-function]
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/.plugin_symlinks/yaru/linux/yaru_plugin.cc:9:1: error: unused function 'glib_slistautoptr_cleanup_YaruPlugin' [-Werror,-Wunused-function]
Building Linux application...                                           
Build process failed

verbose output

$ /snap/bin/flutter build linux --verbose
[  +34 ms] executing: uname -m
[  +17 ms] Exit code 0 from: uname -m
[        ] x86_64
[   +6 ms] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +4 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] e3c29ec00c9c825c891d75054c63fcc46454dca1
[        ] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git tag --points-at e3c29ec00c9c825c891d75054c63fcc46454dca1
[   +9 ms] Exit code 0 from: git tag --points-at e3c29ec00c9c825c891d75054c63fcc46454dca1
[        ] 3.3.2
[  +28 ms] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git rev-parse --abbrev-ref --symbolic @{upstream}
[   +4 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{upstream}
[        ] origin/stable
[        ] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git ls-remote --get-url origin
[   +3 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[  +22 ms] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git rev-parse --abbrev-ref HEAD
[   +4 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] stable
[  +31 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +1 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +23 ms] Artifact Instance of 'MaterialFonts' is not required, skipping update.
[        ] Artifact Instance of 'GradleWrapper' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[        ] Artifact Instance of 'FlutterSdk' is not required, skipping update.
[        ] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[   +4 ms] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FontSubsetArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'PubDependencies' is not required, skipping update.
[  +30 ms] Skipping pub get: version match.
[  +12 ms] Found plugin yaru at /home/jpnurmi/Projects/ubuntu/yaru.dart/
[   +8 ms] Found plugin handy_window at /home/jpnurmi/snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/handy_window-0.1.6/
[  +18 ms] Found plugin yaru at /home/jpnurmi/Projects/ubuntu/yaru.dart/
[   +3 ms] Found plugin handy_window at /home/jpnurmi/snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/handy_window-0.1.6/
[  +45 ms] 💪 Building with sound null safety 💪
[   +6 ms] Building Linux application...
[   +3 ms] executing: [build/linux/x64/release/] cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DFLUTTER_TARGET_PLATFORM=linux-x64 /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux
[  +31 ms] -- Checking for module 'glib-2.0'
[   +9 ms] --   Found glib-2.0, version 2.56.4
[  +44 ms] -- Checking for module 'glib-2.0>=2.58'
[        ] --   Requested 'glib-2.0 >= 2.58' but version of GLib is 2.56.4
[        ] -- Configuring done
[        ] -- Generating done
[        ] -- Build files have been written to: /home/jpnurmi/Projects/ubuntu/yaru.dart/example/build/linux/x64/release
[        ] CMake Warning at flutter/ephemeral/.plugin_symlinks/handy_window/linux/CMakeLists.txt:40 (message):
[        ]   The `handy_window` package requires libglib2.0-0 >= 2.58 available in
[        ]   Ubuntu 20.04 and later.  Using normal Flutter window instead.
[   +3 ms] executing: ninja -C build/linux/x64/release install
[   +5 ms] ninja: Entering directory `build/linux/x64/release'
[+1200 ms] [1/9] Generating /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/libflutter_linux_gtk.so,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_basic_message_channel.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_binary_codec.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_binary_messenger.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_dart_project.h, /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_engine.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_json_message_codec.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_json_method_codec.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_message_codec.h, /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_method_call.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_method_channel.h, /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_method_codec.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_method_response.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_plugin_registrar.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_plugin_registry.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_standard_message_codec.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_standard_method_codec.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_string_codec.h, /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_value.h,
/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/fl_view.h, /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/flutter_linux/flutter_linux.h, _phony_
[   +4 ms] [  +39 ms] executing: uname -m
[        ] [  +22 ms] Exit code 0 from: uname -m
[        ] [        ] x86_64
[        ] [   +3 ms] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] [   +3 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] [        ] e3c29ec00c9c825c891d75054c63fcc46454dca1
[        ] [        ] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git tag --points-at e3c29ec00c9c825c891d75054c63fcc46454dca1
[        ] [   +8 ms] Exit code 0 from: git tag --points-at e3c29ec00c9c825c891d75054c63fcc46454dca1
[        ] [        ] 3.3.2
[        ] [  +40 ms] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git rev-parse --abbrev-ref HEAD
[        ] [   +3 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] [        ] stable
[        ] [  +29 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[        ] [   +2 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[        ] [  +46 ms] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git rev-parse --abbrev-ref --symbolic @{upstream}
[        ] [   +3 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{upstream}
[        ] [        ] origin/stable
[        ] [        ] executing: [/home/jpnurmi/snap/flutter/common/flutter/] git ls-remote --get-url origin
[        ] [   +2 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] [        ] https://github.com/flutter/flutter.git
[        ] [        ] Artifact Instance of 'MaterialFonts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'GradleWrapper' is not required, skipping update.
[        ] [        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterSdk' is not required, skipping update.
[        ] [        ] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'IosUsbArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'FontSubsetArtifacts' is not required, skipping update.
[        ] [        ] Artifact Instance of 'PubDependencies' is not required, skipping update.
[        ] [  +19 ms] Initializing file store
[        ] [   +4 ms] Done initializing file store
[        ] [  +26 ms] Skipping target: gen_localizations
[        ] [   +7 ms] Skipping target: gen_dart_plugin_registrant
[        ] [ +148 ms] Skipping target: unpack_linux
[        ] [ +241 ms] Skipping target: kernel_snapshot
[        ] [  +24 ms] Skipping target: aot_elf_release
[        ] [  +22 ms] Skipping target: linux_aot_bundle
[        ] [  +48 ms] Skipping target: release_bundle_linux-x64_assets
[        ] [        ] Persisting file store
[        ] [   +4 ms] Done persisting file store
[        ] [   +2 ms] build succeeded.
[        ] [   +4 ms] "flutter assemble" took 621ms.
[        ] [ +101 ms] ensureAnalyticsSent: 99ms
[        ] [        ] Running shutdown hooks
[        ] [        ] Shutdown hooks complete
[        ] [        ] exiting with code 0
[  +35 ms] [2/8] Linking CXX shared library plugins/handy_window/libhandy_window_plugin.so
[ +173 ms] [3/8] Building CXX object CMakeFiles/yaru_test.dir/flutter/generated_plugin_registrant.cc.o
[  +44 ms] [4/8] Building CXX object plugins/yaru/CMakeFiles/yaru_plugin.dir/yaru_plugin.cc.o
[        ] FAILED: plugins/yaru/CMakeFiles/yaru_plugin.dir/yaru_plugin.cc.o 
[   +2 ms] /snap/flutter/current/usr/bin/clang++  -DAPPLICATION_ID=\"com.example.yaru_test\" -DFLUTTER_PLUGIN_IMPL -DNDEBUG -Dyaru_plugin_EXPORTS
-I/home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral -isystem /snap/flutter/current/usr/include/gtk-3.0 -isystem /snap/flutter/current/usr/include/at-spi2-atk/2.0 -isystem
/snap/flutter/current/usr/include/at-spi-2.0 -isystem /snap/flutter/current/usr/include/dbus-1.0 -isystem /snap/flutter/current/usr/lib/x86_64-linux-gnu/dbus-1.0/include -isystem
/snap/flutter/current/usr/include/gio-unix-2.0 -isystem /snap/flutter/current/usr/include/cairo -isystem /snap/flutter/current/usr/include/pango-1.0 -isystem /snap/flutter/current/usr/include/harfbuzz -isystem
/snap/flutter/current/usr/include/atk-1.0 -isystem /snap/flutter/current/usr/include/pixman-1 -isystem /snap/flutter/current/usr/include/freetype2 -isystem /snap/flutter/current/usr/include/libpng16 -isystem
/snap/flutter/current/usr/include/gdk-pixbuf-2.0 -isystem /snap/flutter/current/usr/include/glib-2.0 -isystem /snap/flutter/current/usr/lib/x86_64-linux-gnu/glib-2.0/include -O3 -DNDEBUG -fPIC
-fvisibility=hidden   -Wall -Werror -O3 -pthread -std=gnu++14 -MD -MT plugins/yaru/CMakeFiles/yaru_plugin.dir/yaru_plugin.cc.o -MF plugins/yaru/CMakeFiles/yaru_plugin.dir/yaru_plugin.cc.o.d -o
plugins/yaru/CMakeFiles/yaru_plugin.dir/yaru_plugin.cc.o -c /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/.plugin_symlinks/yaru/linux/yaru_plugin.cc
[   +1 ms] /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/.plugin_symlinks/yaru/linux/yaru_plugin.cc:9:1: error: unused function 'glib_listautoptr_cleanup_YaruPlugin'
[-Werror,-Wunused-function]
[        ] G_DEFINE_AUTOPTR_CLEANUP_FUNC(YaruPlugin, g_object_unref)
[        ] ^
[        ] /snap/flutter/current/usr/include/glib-2.0/glib/gmacros.h:462:22: note: expanded from macro 'G_DEFINE_AUTOPTR_CLEANUP_FUNC'
[        ]   static inline void _GLIB_AUTOPTR_LIST_FUNC_NAME(TypeName) (GList **_l) { g_list_free_full (*_l, (GDestroyNotify) func); } \
[        ]                      ^
[        ] /snap/flutter/current/usr/include/glib-2.0/glib/gmacros.h:443:48: note: expanded from macro '_GLIB_AUTOPTR_LIST_FUNC_NAME'
[        ] #define _GLIB_AUTOPTR_LIST_FUNC_NAME(TypeName) glib_listautoptr_cleanup_##TypeName
[        ]                                                ^
[        ] <scratch space>:57:1: note: expanded from here
[        ] glib_listautoptr_cleanup_YaruPlugin
[        ] ^
[        ] /home/jpnurmi/Projects/ubuntu/yaru.dart/example/linux/flutter/ephemeral/.plugin_symlinks/yaru/linux/yaru_plugin.cc:9:1: error: unused function 'glib_slistautoptr_cleanup_YaruPlugin'
[-Werror,-Wunused-function]
[        ] /snap/flutter/current/usr/include/glib-2.0/glib/gmacros.h:463:22: note: expanded from macro 'G_DEFINE_AUTOPTR_CLEANUP_FUNC'
[        ]   static inline void _GLIB_AUTOPTR_SLIST_FUNC_NAME(TypeName) (GSList **_l) { g_slist_free_full (*_l, (GDestroyNotify) func); } \
[        ]                      ^
[        ] /snap/flutter/current/usr/include/glib-2.0/glib/gmacros.h:445:49: note: expanded from macro '_GLIB_AUTOPTR_SLIST_FUNC_NAME'
[        ] #define _GLIB_AUTOPTR_SLIST_FUNC_NAME(TypeName) glib_slistautoptr_cleanup_##TypeName
[        ]                                                 ^
[        ] <scratch space>:58:1: note: expanded from here
[        ] glib_slistautoptr_cleanup_YaruPlugin
[        ] ^
[        ] 2 errors generated.
[  +39 ms] [5/8] Building CXX object CMakeFiles/yaru_test.dir/my_application.cc.o
[        ] ninja: build stopped: subcommand failed.
[   +9 ms] Building Linux application... (completed in 1,608ms)
[        ] "flutter linux" took 1,786ms.
[   +2 ms] Build process failed
[        ] 
           #0      throwToolExit (package:flutter_tools/src/base/common.dart:10:3)
           #1      _runBuild (package:flutter_tools/src/linux/build_linux.dart:185:5)
           <asynchronous suspension>
           #2      buildLinux (package:flutter_tools/src/linux/build_linux.dart:78:5)
           <asynchronous suspension>
           #3      BuildLinuxCommand.runCommand (package:flutter_tools/src/commands/build_linux.dart:85:5)
           <asynchronous suspension>
           #4      FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1209:27)
           <asynchronous suspension>
           #5      AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
           <asynchronous suspension>
           #6      CommandRunner.runCommand (package:args/command_runner.dart:209:13)
           <asynchronous suspension>
           #7      FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:281:9)
           <asynchronous suspension>
           #8      AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
           <asynchronous suspension>
           #9      FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:229:5)
           <asynchronous suspension>
           #10     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
           <asynchronous suspension>
           #11     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
           <asynchronous suspension>
           #12     main (package:flutter_tools/executable.dart:91:3)
           <asynchronous suspension>
           
           
[  +25 ms] ensureAnalyticsSent: 24ms
[        ] Running shutdown hooks
[        ] Shutdown hooks complete
[        ] exiting with code 1

https://github.com/canonical/workshops/actions/runs/3068195125/jobs/4955360512

[proposal] enforce `effective dart` guidelines

enforce effective dart guidelines with the linting provided by the homonym package effective_dart

Example code on pub.dev uses deprecated widgets

Great to see Yaru theme as a package for Flutter ❤️

I've noticed that code at https://pub.dev/packages/yaru/example uses deprecated widgets, namely: FlatButton and RaisedButton.

Provide the Yaru icon set in yaru.dart

Provide a material icon theme made out of our existing freedesktop icons
https://github.com/ubuntu/yaru/tree/master/icons

Inspiration: https://pub.dev/packages/line_icons

Alternatively when we found how to do this, we could also think about using this in a dedicated repository

Tabbed view text is white in the light theme

Example App: Jank Issue when app is fullscreen

When app is not in fullscreen it worked fine but as soon as i full screen the app the navigation animation and transition feel janky, especially in the bottom bar navigation you can see the glitches clearly and whole app kind a became unusable.

Support Ubuntu Flavours

Fix Flutter 3.4 + 3.5 switches, popups, checks, radios and dialogs

Density of list tiles and tables

canonical/ubuntu-desktop-installer#546 (comment)

• should we set the density globally ? I have some concerns with this
• we should end up with less big list tiles, tables and inputs, can be set individually even though it might not be as satisfying from the a dev perspective as using a global setting

The problem about setting it globally, even if the toolkit left a mechanism for this, is that the result might not be satisfying.
First of all we could achieve the recreation of the mock-ups in the installer without it and changing it now might break widget sizes we didn't want to change. Then the buttons and all widgets really need to look everywhere the same, otherwise it is obviously totally inconsistent which would be a design nightmare.

All TextStyles are same.

I just came across the following code segment. seems like every style is assigned the same value _textStyle. There is no difference between them.

final _textStyle = TextStyle(
  fontFamily: 'Ubuntu',
  package: 'yaru',
  fontFamilyFallback: [
    'Liberation Serif',
    'Noto Sans CJK',
    'Tibetan Machine Uni',
  ],
);

final _headline1Style = _textStyle;
final _headline2Style = _textStyle;
final _headline3Style = _textStyle;
final _headline4Style = _textStyle;
final _headline5Style = _textStyle;
final _headline6Style = _textStyle;
final _subtitle1Style = _textStyle;
final _subtitle2Style = _textStyle;
final _bodyText1Style = _textStyle;
final _bodyText2Style = _textStyle;
final _captionStyle = _textStyle;
final _buttonStyle = _textStyle;
final _overLineStyle = _textStyle;

final _textTheme = TextTheme(
  headline1: _headline1Style,
  headline2: _headline2Style,
  headline3: _headline3Style,
  headline4: _headline4Style,
  headline5: _headline5Style,
  headline6: _headline6Style,
  subtitle1: _subtitle1Style,
  subtitle2: _subtitle2Style,
  bodyText1: _bodyText1Style,
  bodyText2: _bodyText2Style,
  caption: _captionStyle,
  button: _buttonStyle,
  overline: _overLineStyle,
);

I was developing this design.but unfortunately the TextStyles are not yet implemented. I am going to create a PR to resolve this issue.

[proposal] consider renaming the project

the project name yaru.dart messes with anayizer

[Error - 11:45:06 PM] Request textDocument/hover failed.
  Message: Invalid file path
  Code: -32003 

consider using a foo_baz approach,
I suggest yaru_flutter

also note that dart might be misleading, as it uses flutter's material library
it won't be available to other dart projects like angulardart

org.gnome.shell.ubuntu needed?

I upgraded a machine to 22.10 and noticed that the shell is no longer following the dark scheme, looked up the gsetting and found the color-scheme key in org.gnome.shell.ubuntu with the default / prefer-dark / prefer-light keys
I wonder if we might need this too with 21.10 in yaru.dart ?

CC @jpnurmi

ColorScheme.onError

Could it be white in both themes?

Light	Dark

No information how to use the package in Readme on pub.dev

It would be helpful if the readme on pub.dev could provide more info about the package and how to use it.
It looks quit empty right now:

Transparent dialog background during theme switch

When switching between dark and light themes, Yaru-themed dialog's background color is momentarily fully transparent.

yaru-theme-switch.webm

The issue is specifically something with the dark Yaru theme. Switching between Material themes and even between Yaru light and Material dark is smooth.

material-theme-switch.webm

import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_widgets/yaru_widgets.dart';

void main() {
  final themeMode = ValueNotifier<ThemeMode>(ThemeMode.system);

  runApp(
    AnimatedBuilder(
      animation: themeMode,
      builder: (context, child) {
        return MaterialApp(
          theme: yaruLight,
          darkTheme: yaruDark,
          // darkTheme: ThemeData.dark(),
          themeMode: themeMode.value,
          home: Scaffold(
            backgroundColor: const Color(0xff380c2a),
            body: AlertDialog(
              title: const Text('Yaru'),
              content: Center(
                child: YaruPopupMenuButton<ThemeMode>(
                  initialValue: themeMode.value,
                  itemBuilder: (context) => [
                    for (final value in ThemeMode.values)
                      PopupMenuItem(
                        value: value,
                        child: Text(value.name),
                      ),
                  ],
                  onSelected: (value) => themeMode.value = value,
                  child: Text(themeMode.value.name),
                ),
              ),
            ),
          ),
        );
      },
    ),
  );
}

High-contrast theme

Could yaru.dart offer a high-contrast theme alternative?

canonical/ubuntu-desktop-installer#772

Mitigate material3 impact

• axe appbar tint withsurfaceTintColor: colorScheme.background
• reduce outlined button outline in the dark theme
• get the border back in the light theme
• eventually get the AppBar border back

Disabled check boxes and radio buttons are not visible against dark dialog background

The screenshot has the same widgets on both sides:

Source code

import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart' as yaru;

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Row(
        children: [
          Theme(
            data: yaru.lightTheme,
            child: const YaruPage('Light'),
          ),
          Theme(
            data: yaru.darkTheme,
            child: const YaruPage('Dark'),
          ),
        ],
      ),
    ),
  ));
}

class YaruPage extends StatelessWidget {
  const YaruPage(this.title, {Key? key}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(title),
      content: Column(
        children: [
          Text('Checkbox'),
          Row(
            children: [
              Checkbox(value: true, onChanged: (_) {}),
              Checkbox(value: false, onChanged: (_) {}),
              Checkbox(value: true, onChanged: null),
              Checkbox(value: false, onChanged: null),
            ],
          ),
          Text('Radio'),
          Row(
            children: [
              Radio(value: true, groupValue: true, onChanged: (_) {}),
              Radio(value: false, groupValue: true, onChanged: (_) {}),
              Radio(value: true, groupValue: true, onChanged: null),
              Radio(value: false, groupValue: true, onChanged: null),
            ],
          ),
        ],
      ),
    );
  }
}

Adapt icon button theme to material 3

Icon buttons got squashed to be pills instead of disks with flutter master and material 3 active. They changed and or added a density. If it's reduced the buttons become disks again

Regression: CircularProgressIndicator should be purple

CircularProgressIndicator switched from lightAubergine to orange with #45 but it should be lightAubergine like all progress indicators in yaru
In Gtk Yaru we will eventually switch to purple too, see ubuntu/yaru#2780

Typos in the yaru.dart flavors and Example

I notice that there are some typos in flavor's names, in yaru.dart flavors section, and in the example in section Using Yaru.

Inconsistency on page transitions between desktop platforms

An application themed with Yaru won't override the Flutter default page transitions if the platform is not Linux, which means an inconsistency (after all, a developer using Yaru wants to have the same look and feel on other platforms).

Per the conversation in canonical/ubuntu-desktop-installer#1121 we should have consistent page transitions across the desktop platforms.

Release 0.1.2?

It would be nice to have the input decoration fix for the dark theme: ubuntu/yaru.dart#82

Improve toggle buttons look

This is the toggle button from Settings

Can we override the colors (ToggleButtonsThemeData) to avoid orange text (similar style to GTK)

Error color has low contrast on the dark theme

Theme review

Hi there - thanks for porting yaru to flutter 😺

First of all two questions:

1. For the palette, would you like to stick to the canonical palette, or would you like to take the yaru palette? https://github.com/ubuntu/yaru/blob/master/gtk/src/default/gtk-3.20/_palette.scss
2. Will flutter support client side decorations? ( - [] X buttins inside the appbar ? )

So ...building this myself I noticed some limitations and problems:

1. the appbar is similar to the gtk headerbar, but the flutter desktop windows are drawn with server side decorations thus receive a titlebar on top of them.
   Thus it is not needed to divide the theme into three variants. We could just stick with the light theme and the dark theme
   

2. the light theme appbar color is too dark, I would just stick with yaruWhite here
   

3. the primary color is bound to many places, and we can not make the "suggested" buttons green without changing the primary color to green
   

4. the primary buttons do not change their text color, at least I did not manage to find how to. The orange Click me button would rather need a white text to have a better contrast against the orange.

5. Switches and checkboxes are colored purple in yaru gtk/shell - but those are the first things that come to my mind :) However, I am not "bound" to our gtk theme, and I know that every toolkit has its limitations, and you can't always just slip over some palette and expect it to fit 100% ;)

I hope I can fix some of the issues myself (if you guys want them to be fixed or agree)

Thanks for the work!

CC @madsrh @clobrano @ubuntujaggers

Ready to release 0.4.0

Flutter 3.3.2 with fixes for the infamous raster cache rendering issues is out. We're ready to release yaru.dart 0.4.0 which depends on Flutter 3.3. 😉

BorderRadius

Currently in 21.10 in gtk3 apps ubuntu uses a 4px border radius for buttons and the rest (windows, dialogs, popups) adapt to it, as does yaru.dart (which is used by the new installer).

With us (yaru team) going (even) closer to upstream roundings, we thought it would be a good idea to adapt gtk3 and gtk4 to libadwaita roundness, which uses 6px button borderradius.

Do we want this in yaru.dart to, for consistency?

4px	6px

@elioqoshi @jpnurmi @Jupi007 @Muqtxdir @madsrh

Add common lint rules

Make color selection UI screen size adaptive

Menu does not stand out from the background

Yaru	Material

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: yaruDark,
      home: Scaffold(
        body: Builder(
          builder: (context) {
            return GestureDetector(
              onSecondaryTapDown: (details) {
                showMenu(
                  context: context,
                  position: RelativeRect.fromSize(
                    details.globalPosition & Size.zero,
                    MediaQuery.of(context).size,
                  ),
                  items: [
                    PopupMenuItem(
                      onTap: () {},
                      child: const Text('Foo'),
                    ),
                    PopupMenuItem(
                      onTap: () {},
                      child: const Text('Bar'),
                    ),
                    PopupMenuItem(
                      onTap: () {},
                      child: const Text('Baz'),
                    ),
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Improve page transitions to fit to the desktop

improve card contrast in light themes

The contrast for cards on the background is bad for the light theme(s)

But it is okay for the dark theme